Favicon 파비콘 아이콘! 완벽하게 만드는 방법 & 적용방법
WEB/HTML

Favicon 파비콘 아이콘! 완벽하게 만드는 방법 & 적용방법

 

이번 포스팅에서는 일반적인 파비콘 설정보다 더 완벽한 파비콘 설정에 대해 알아볼께요

 

일반적으로 파비콘(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 아이콘 사이즈와 용도

아이콘 사이즈 용도
16x16 & 32x32 IE에서 사용되는 기본 파비콘 사이즈
32x32 사이즈는 오래된 Chrome에서 ICO파일로 제대로 처리하지 못하므로 PNG파일로 준비한다
57x57 표준 iOS 홈스크린
(iPad Touch, iPhone 3G의 1세대)
60x60 iPhone iOS7+
72x72 아이패드 홈스크린 아이콘 (iPad non-retina)
76x76 아이패드 홈스크린 아이콘 (iPad non-retina iOS 7)
96x96 구글TV 아이콘
114x114 아이폰 레티나 (iOS 6 and lower)
120x120 아이폰 레티나 터치 (iPhone retina, iOS 7 and higher)
(Change for iOS 7: up from 114x114)
128x128 Chrome 웹스토어와 윈도우8 아이콘
144x144 IE10 매트로 타일
152x152 아이패드 터치
(Change for iOS 7: up from 144x144)
167x167 아이패드 레티나 터치 (iPad Retina touch)
(change for iOS 10: up from 152x152, not in action. iOS 10 will use 152x152)
180x180 아아폰6 plus
195x195 Opera 스피드 다이얼 아이콘
196x196 안드로이드 크롬브라우저 home screen 아이콘
228x228 Opera Coast 아이콘

 

각 디바이스나 브라우저별로 파비콘 파일을 만들기가 귀찮은데

아래 사이트에 이미지파일 1개를 업로드하면 각 디바이스별 파비콘 설정과 관련 파일을 전부 만들 수가 있습니다.

특히 맥북터치바의 사파리 탭 아이콘도 만들어줘서 유용합니다.

 

추천 파비콘 생성 사이트 : https://realfavicongenerator.net

http://webdir.tistory.com/337