파비콘

 

 파비콘은 웹페이지 상단 태베 보여지는 아이콘이다. 이 아이콘은 즐겨찾기 등록시 대표 아이콘으로도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하다.

 

 파비콘은 ico 파일을 쓰지만 요즘엔 png 파일도 지원하고 있어서 나는 png 파일을 주로 쓴다. 즐겨찾기 등록시(주로 모바일) 생기는 아이콘의 화질에 많은 영향을 미치기 때문이다. 

 

 

---

 

 

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

 

 

도움이 되는 도구들

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

 

출처: https://webdir.tistory.com/337 [WEBDIR]