이번 포스팅에서는 일반적인 파비콘 설정보다 더 완벽한 파비콘 설정에 대해 알아볼께요
일반적으로 파비콘(favicon) 설정은
아래와 같이 웹 소스 최상단에 16x16 과 32x32의 이미지를 하나에 품은(multiple sizes) 혹은 단일 사이즈의 favicon.ico 파일을 올려놓는 것으로 끝납니다.
Favicon 기본 설정방법
<head> <link rel="shortcut icon" href="favicon.ico">
</head>
그러나
상기 방법은 초창기 파비콘 설정방법이고 세월이 흘러 현재는 다양한 디바이스와 브라우저를 지원하기 위해서
파비콘 설정을 아래와 같이 작업해주어야 합니다.
Favicon 범용 설정방법
<head> <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff">
</head>
※ 당연히 각 사이즈별 파일은 만들어줘야 합니다.
상기와 같이 설정하면 아이폰, 아이패드, 안드로이드, PC, 구글TV, 구글웹스토어, 오페라 브라우저등을 지원하게 되어 어디에서도 파비콘 이미지가 예쁘게 잘 나옵니다.
그런데, 일반적인 홈페이지나 모바일웹에서는 상기와 같이 다양한 장치에서 이용될 일이 없어 불필요한 설정이 존재합니다.
예를 들어 우리의 블로그는 아이폰, 아이패드, 안드로이드, PC에서만 파비콘이 잘 나오면 되므로 아래와 같이 최적화된 설정방법을 이용하는 것이 좋습니다
홈페이지, 모바일웹용 Favicon 설정방법 1번
<head> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#ffffff"> </head>
※ 아이폰 6이상 브라우저, 안드로이드 크롬브라우저에 대응하고 나머지 환경은 기본 파비콘 16, 32 파일로 대응
이러한 최적화 방법은 본인의 사이트가 지원해야 할 디바이스나 서비스에 맞게 적절하게 골라 설정해야 하는것 입니다.
홈페이지, 모바일웹용 Favicon 설정방법 2번
<head> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff"> </head>
※ 아이폰 6이상 브라우저, 안드로이드 크롬브라우저에 대응하고 나머지 환경은 기본 파비콘 16,32사이즈 파일로 대응, macOS 사파리탭 대응, 윈도우10 지원
추가로 어떤 사이즈가 어디에 사용되는지는 아래 표에서 확인할 수 있습니다.
Favicon 아이콘 사이즈와 용도
팁
각 디바이스나 브라우저별로 파비콘 파일을 만들기가 귀찮은데
아래 사이트에 이미지파일 1개를 업로드하면 각 디바이스별 파비콘 설정과 관련 파일을 전부 만들 수가 있습니다.
특히 맥북터치바의 사파리 탭 아이콘도 만들어줘서 유용합니다.
추천 파비콘 생성 사이트 : https://realfavicongenerator.net
참조: http://webdir.tistory.com/337
https://realfavicongenerator.net/faq#.WdeqAmh-paQ
https://www.npmjs.com/package/grunt-favicons
'IT > 웹·모바일' 카테고리의 다른 글
| 네이버 ‘웨일 WHALE’ 브라우저에 대한 소고(小考) (2) | 2018.11.15 |
|---|---|
| DNS 변경으로 인터넷 빠르게 하기 (0) | 2018.05.29 |
| WordPress 워드프레스 설치 방법 (0) | 2017.09.11 |
| 다음(DAUM) 메일이 개편된 메일을 선보인다 (1) | 2016.10.29 |
| 모바일 정보보호 컨퍼런스 - MISCON 2016 참석 (0) | 2016.02.26 |