본문으로 바로가기

favicon 관련 팁

category 기존 작성물 2013.12.11 18:48

해당 글은 파비콘(Favicon)의 모든 것으로 새로 작성되었습니다. 이 글은 폐기예정입니다.

파비콘(favicon)이라고 불리는 인터넷 주소창의 아이콘들에 대한 간단한 팁이다.

설정 방법은?

크로스브라우징을 염두에 둔 가장 좋은 파비콘 설정방법은 웹서비스 디렉토리의 루트에 favicon.ico 라는 이름으로 파비콘 파일을 위치시키는 것이다. 만약에 루트 디렉토리에 favicon.ico 파일을 위치시키지 않고 서브디렉토리에 위치할 경우에는 아래의 구문처럼 이미지 경로를 알려주어야 한다(head에 작성).

<head>
<link rel="shortcut icon" href="/img/favicon.ico">
</head>

파일의 크기와 종류

16x16 과 32x32 의 크기를 가진 아이콘파일을 준비하도록 한다. 아이콘파일은 여러개의 사이즈에 대응하도록 만들어 지니 하나의 파일에 이를 수용할 수 있다. 만약에 png 등의 이미지로 파일을 준비하면 브라우저마다 다른 호환성으로 인해 고생을 할 것이다.

모바일 대응

iOS 2.0 이상과 안드로이드 2.1 이상의 기기들에선 아래와 같이 삽입한다.

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

참고 : https://github.com/audreyr/favicon-cheat-sheet#id12

'기존 작성물' 카테고리의 다른 글

<noscript> 사용법  (0) 2013.12.20
favicon 관련 팁  (0) 2013.12.11
Normalize.css - CSS 초기화  (0) 2013.12.10
[CentOS] 네임서버(DNS) bind 설정  (4) 2013.04.13
[HTML5] 기본 템플릿  (0) 2012.11.26

댓글을 달아 주세요

티스토리 툴바