[HTML] 파비콘(Favicon)

파비콘

인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

 

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

<link rel="shortcut icon" href="/path/to/favicon.ico">
<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 파일 크기에 따른 용도

크기 파일명 용도

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 아이콘