파비콘(Favicon)의 모든 것

 

파비콘에 대해 궁금했던 내용들을 정리했습니다.

파비콘(favicon) 소개

파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫는다. 이 아이콘은 즐겨찾기에 웹페이지를 등록할때도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하며, 사이트의 성격을 드러내기도 한다.

최근에는 터치(touch) 아이콘, 타일(tile) 아이콘의 등장으로 더욱 혼란스러움이 가중되었으며, 각각의 기기에 최적화된 파비콘의 크기를 재설정하여 개발자들에게 어려움을 주고 있다.

파비콘(favicon) 기본 설정

1999년에 인터넷 익스플로러(Internet Explorer)에 처음 도입된 후로, 파비콘의 사양은 거의 변경되지 않은 채로 대부분 아이콘(ico) 파일의 형태로 도메인(domain)의 루트(root) 디렉토리에 위치해 왔다.

크로스브라우징을 염두에 둔다면, 어떠한 HTML 코드도 작성하지 않고, 자신의 웹계정 루트(root) 디렉토리에 16x16 과 32x32의 이미지를 하나에 품은(multiple sizes¹) favicon.ico 파일을 위치시킴으로써, 설정을 마무리한다.

이 방법은 씨몽키(SeaMonkey) 브라우저를 제외한 모든 데스크톱 브라우저/버전에서(IE6 포함) 작동한다.

CMS의 경우에는 테마(theme) 혹은 이미지(image) 디렉토리를 이용하기도 한다.

HTML

<link rel="shortcut icon" href="/path/to/favicon.ico">

rel 속성과 type 속성 자세히

전통적으로 favicon.ico 파일은 16컬러 24비트 알파 투명도(alpha transparency) 포맷의 16x16 아이콘(ICO) 파일이다. 최근의 파비콘은 32x32를 지원하는데, 모든 주요 인기 있는 브라우저들에서 적절하게 축소되어 이를 표현해준다. IE10의 매트로(Metro)에서는 32x32 아이콘이 주소창에 사용된다.

ICO 파일을 사용할 경우 아래와 같은 크기 정도는 포함하는 것을 추천한다.

크기	용도
16x16	IE9 주소 표시줄, 고정된(pinned) 사이트의 점프목록/툴바/오버레이
32x32	IE의 새로운 탭 페이지, 윈도우7 이상에서 작업 표시줄 단추, Safari 나중에 읽기 사이드바
48x48	윈도우즈 사이트 아이콘

좀 더 완벽하게 설정하길 원하고 1~3kb 쯤의 여분의 용량증가가 상관없다면 아래의 크기도 포함시켜도 된다.

크기	용도
24x24	IE9 고정된(pinned) 사이트 브라우저 UI
64x64	윈도우즈 사이트 아이콘, HiDPI/Retina 에서 Safari 나중에 읽기 사이드바

파비콘(favicon) 추가 설정

iOS 2.0 이상과 Android 2.1 이상에서는 터치(Touch) 아이콘 지정이 가능하다. 고해상도 아이콘(152x152) 하나만 준비하면 저해상도에서는 알아서 아이콘의 크기가 변경된다. 다만, 기기의 홈스크린에 아이콘이 추가되면 성능에 부정적일 수는 있다.

HTML

<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">

apple-touch-icon 세분화 대응

IE10 매트로는 타일(tile) 아이콘이 추가되었는데(apple-touch-icon과 유사한) 방문자가 고정(pins)할 경우, 시작화면에 이를 표시한다. 타일 아이콘의 크기는 144x144 PNG 파일이며, 투명한 배경을 사용해야 최상의 결과를 얻을 수 있다.

HTML

<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

원하는 타일의 색상으로 content="#ffffff"부분을 수정하면 된다.

파비콘(favicion) PNG 파일 지원 사항

Chrome, Firefox, Opera 7+, 그리고 Safari 4+는 모두 PNG 파비콘을 지원하지만 Chrome과 Safari는 ICO 파비콘이 함께 지정되어 있으면 선언된 순서에 상관없이 PNG 파비콘을 무시하고 ICO 파비콘을 사용한다. 즉, PNG 파비콘을 지원하지 않는 IE를 위해 ICO 파일을 사용하게 되는 순간, Chrome과 Safari는 PNG 파비콘을 무시하게 된다는 이야기다.

favicion.ico > favicon.png

HTML

<!-- Chrome, Safari, IE -->
<link rel="shortcut icon" href="path/to/favicon.ico">
 
<!-- Firefox, Opera (Chrome and Safari say thanks but no thanks) -->
<link rel="icon" href="path/to/favicon.png">

ICO 파비콘은 multiple sizes를 지원하기에 하나의 ICO 파일에 여러 사이즈의 아이콘을 넣어 두고 이를 활용할 수 있지만 PNG 파비콘은 이것이 불가능하다. 그런 이유로 각각의 필요한 사이즈를 아래와 같이 모두 선언해야 한다.

HTML

<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">

PNG 파비콘을 사용시에 브라우저는 어떠한 파비콘을 사용할지 어떻게 결정하는가?

• Firefox와 Safari는 마지막에 제공되는 파비콘을 사용한다.
• 맥(Mac) 용 Chrome은 ICO 포맷의 파비콘이 아니라면 32x32 파비콘을 사용한다.
• 윈도우즈(Windows) 용 Chrome은 16x16이 먼저 선언되지 않는다면 ICO 파비콘이 사용된다.
• 상기 옵션 중 아무것도 사용할 수 없는 경우, 양쪽 Chrome은 먼저 선언되는 파비콘을 사용하고 Firefox와 Safari는 마지막에 선언된 것이 사용된다. 사실 맥 용 Chrome은 16x16 파비콘을 무시하고 non-retina 기기에서 16x16으로 크기를 줄일때만 32x32 파비콘을 사용한다.
• Opera는 사용가능한 아이콘 중에서 하나를 임의로 선택하게 된다.

파비콘(favicon) 실전 정리

적어도 아래의 ICO 파일은 준비한다.

크기	파일명	용도
16x16 & 32x32	favicon.ico	IE를 위해 필요한 기본이다.

조금 느려지더라도 iOS와 Android를 고려하겠다면 아래와 같은 PNG 파일을 준비한다.

크기	파일명	용도
152x152	favicon-152.png	일반적으로 iOS와 Android에서 사용하는 아이콘, 기기에 따라 자동으로 크기가 줄여진다.

좀 더 완벽한 파비콘을 설정하기 원한다면 아래의 표를 참고하여 PNG 파일을 준비하도록 하자.

크기	파일명	용도
32x32	favicon-32.png	일부 오래된 하지만 너무 오래된 Chrome은 ICO를 제대로 처리하지 못함.
57x57	favicon-57.png	표준 iOS 홈스크린(iPad Touch, iPhone 3G의 1세대)
72x72	favicon-72.png	iPad 홈스크린 아이콘
96x96	favicon-96.png	구글TV 아이콘
120x120	favicon-120.png	iPhone 레티나(retina) 터치 아이콘(Change for iOS 7: up from 114x114)
128x128	favicon-128.png	Chrome 웹스토어 아이콘
144x144	favicon-144.png	고정(pinned)된 IE10 매트로 타일
152x152	favicon-152.png	iPad 레티나 터치 아이콘(Change for iOS 7: up from 144x144)
195x195	favicon-195.png	Opera 스피드 다이얼 아이콘
228x228	favicon-228.png	Opera Coast 아이콘

파비콘(favicon)과 IE 브라우저 유의사항

• IE8~10은 페이지의 첫 방문에 바로 파비콘을 표시해준다.
• IE7은 첫번째 방문은 무시하고 재방문시에 파비콘을 표시해준다.
• IE6은 사이트를 북마크를 한 후 브라우저를 다시 열면 표시해준다. IE6은 브라우저 캐시가 삭제 될 때마다 파비콘을 삭제하며, 사이트가 다시 북마크된다거나 파비콘이 어떻게든 다시 로드 될때까지 파비콘을 표시하지 않는다.

파비콘(favicon) 강제 새로고침

일반적으로는 필요치 않으나, 개발하는 동안이나 새로고침으로 파비콘이 표시되지 않을때를 고려한 방법이다.

• 브라우저 캐시를 삭제한다(Ctrl + F5 혹은 Ctrl + Shift + R).
• 만일 IE라면 브라우저를 닫고 다시 연다.
• 만일 여전히 골머리를 썩고 있다면 새로운 탭을 열어보거나 How do I force a favicon refresh을 참고하라.

• 일시적으로 명시적인 HTML 태그를 추가하고 쿼리 문자열을 추가한다. 확인이 완료된 후엔 이를 제거하자.

  HTML

  <link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2">
  <link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">
  

도움이 되는 도구들

• OptiPNG : ICO 파일안에 넣을 PNG 파일들을 최적화 한다.
• x-icon editor : ICO 파일을 만들수 있는 웹용 도구이다.
• Favicon & App Icon Generator : PNG 파비콘을 다양하게 생성해준다(위에서 다룬 apple-touch-icon을 크기별로, IE10용 타일 파비콘을 생성).

참고문헌 및 관련링크.

1. favicon-cheat-sheet
2. understand-the-favicon

출처: 티스토리 블로그 - WEBDIR