웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 모바일용 솔루션 사용자 아이콘(Favicon)을 바탕화면으로 놓기! 본문

CGIMALL소개/자주하는질문

[해피CGI][cgimall] 모바일용 솔루션 사용자 아이콘(Favicon)을 바탕화면으로 놓기!

해피CGI윤실장 2017. 4. 7. 09:19

 

모바일용 솔루션 사용자 아이콘(Favicon)을 바탕화면으로 놓기!


기존 솔루션에 모바일용 솔루션을 설치해서 사용하신다면 데스크탑에서 사용하던  Favicon 기능을
스마트폰 바탕화면에 고객님 모바일 사이트의 아이콘을 앱(App) 아이콘처럼 모바일 Favicon 기능을
만들어 놓을 수 있습니다.


지금부터 이 아이콘을 모바일 Favicon 으로 명명하겠습니다.

모바일 Favicon 크게 아이폰/안드로이드폰으로 나누어 집니다.

모바일 Favicon 기능을 이용하게 되면, 스마트폰으로 모바일 사이트에 접속 후에
스마트폰 브라우저 기능으로 사이트에 설정된 모바일 Favicon 기능을
앱(App) 프로그램 아이콘처럼 바탕화면으로 놓을 수 있습니다.


아래 설명은 저희  해피CGI 모바일 솔루션을 기준으로 설명을 드립니다.

스마트폰으로 접속시 처음에 보여지는 템플릿 (HTML)파일에 해당 소스코드를
<head>~</head> 사이에 아이폰/안드로이드폰 관련 코드를 모두 넣어줍니다.

 

 

 

 

 


view plaincopy to clipboardprint?
  1. <link rel="apple-touch-icon-precomposed" href="./img_mobile/favicon.png" />  
  2. <link rel="shortcut Icon" href="./img_mobile/favicon.png">  


(참고) 처음 보여지는 템플릿(HTML) 파일은 보통 "html_mobile", "mobile_html"
폴더안에 메인페이지 담당 템플릿파일(main.html)이 해당됩니다.



아이폰 모바일 Favicon 설정방법

아이콘사이즈: 57x57
<link rel="apple-touch-icon-precomposed" href="./이미지폴더경로명/아이콘명.png">

위 코드를 <head>~</head> 사이에 넣어줍니다.

아이폰 바탕화면에 설정된 모바일 Favicon을 빼내는 방법

  1. 사이트에 접속합니다.
  2. 스마트폰 브라우저 하단 중앙에 하단추가 메뉴버튼을 누릅니다.


  3. 펼쳐진 메뉴에서 "홈 화면에 추가"를 클릭합니다.



  4. 저장할 사이트의 제목을 수정 입력 후 저장합니다.




  5. 아이폰 홈 화면에 조금전에 추가한 아이콘이 바탕화면에 생성되어져 있습니다.




안드로이드폰 모바일 Favicon 설정방법

아이콘사이즈: 128x128
<link rel="shortcut Icon" href="./이미지폴더경로명/아이콘명.png">

또는
<link rel="shortcut Icon" href="./이미지폴더경로명/아이콘명.ico">


위 코드를 <head>~</head> 사이에 넣어줍니다.

안드로이드폰 바탕화면에 설정된 모바일 Favicon을 빼내는 방법

  1. 사이트에 접속합니다.
  2. 스마트폰의 좌측하단 메뉴버튼을 누릅니다.
  3. [더보기] 버튼을 누릅니다.



  4. "북마크추가" 메뉴를 클릭 확인하여 북마크 합니다.



    (!잠깐) "대기화면에  단축메뉴 추가"를 클릭하면 바탕화면에 합쳐진 아이콘 모양이 생성되어집니다.



  5. 스마트폰 대기 메인화면으로 돌아와서 스마트폰 좌측하단 메뉴버튼을 누릅니다.
  6. "바로가기" 버튼을 누릅니다.



  7. "북마크" 메뉴버튼을 누릅니다.




  8. 조금 전에 북마크된 뉴스항목이 보여지며, 뉴스항목을 선택합니다.




  9. 바탕화면에 아이콘이 생성되어 졌습니다.



 

홈페이지바로가기 

저작자표시

'CGIMALL소개 > 자주하는질문' 카테고리의 다른 글

[해피CGI][cgimall] 보안서버 관련 규정 참고하세요~ ^^  (0) 2017.04.11
[해피CGI][cgimall] 모바일웹에서 현재위치 찾기가 잘 안됩니다.  (0) 2017.04.11
[해피CGI][cgimall] 한글 파일이 화면에 안나오고 엑스박스 표시가 납니다.  (0) 2017.04.05
[해피CGI][cgimall] 해피CGI에서 제공하는 문자의 1건당 발송요금이 궁금해요.  (0) 2017.04.03
[해피CGI][cgimall] 프로그램 수정을 직접 하고 싶습니다.  (0) 2017.03.30
공유하기 링크
'CGIMALL소개/자주하는질문' Related Articles more
Comments