파비콘(favicon) 소개

파비콘(favicon) 소개

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

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

파비콘(favicon) 기본 설정

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

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

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

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

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

rel 속성과 type 속성 자세히

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

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

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

파비콘(favicon) 추가 설정

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

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

apple-touch-icon 세분화 대응

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

<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

<!-- 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 파비콘은 이것이 불가능하다. 그런 이유로 각각의 필요한 사이즈를 아래와 같이 모두 선언해야 한다.

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

파비콘(favicon) 실전 정리

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

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

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

파비콘(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용 타일 파비콘을 생성).

출처: http://webdir.tistory.com/337#footnote_link_337_1 [WEBDIR]