이번 포스팅에서는 일반적인 파비콘 설정보다 더 완벽한 파비콘 설정에 대해 알아볼께요
일반적으로 파비콘(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
'WEB > HTML' 카테고리의 다른 글
| 网站防止F12审查元素扒代码的两种方法 (0) | 2021.09.09 |
|---|---|
| 一段代码简单防止别人扒自己的网页 (0) | 2021.09.09 |
| 2020大树教你防止别人扒自己的网页方法 (0) | 2021.09.09 |
| HTML禁止复制粘贴以及禁止下载图片的小技巧 转载 (0) | 2021.09.09 |
| [HTML]Emmet 사용법 (0) | 2021.07.31 |