파비콘의 실전정리 2 > 담글

파비콘의 실전정리 2

페이지 정보

작성자 최고관리자
댓글 0건 조회 1,014회 작성일 18-08-04 10:05

본문

파비콘(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

도움이 되는 도구들

OptiPNG : ICO 파일안에 넣을 PNG 파일들을 최적화 한다.

x-icon editor : ICO 파일을 만들수 있는 웹용 도구이다.

Favicon & App Icon Generator : PNG 파비콘을 다양하게 생성해준다(위에서 다룬 apple-touch-icon을 크기별로, IE10용 타일 파비콘을 생성).

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

댓글목록

등록된 댓글이 없습니다.