최근 바뀜 사이트맵

사이트 도구

파비콘_favicon

파비콘(Favicon)

정의

웹사이트 혹은 웹 페이지를 대표하는 작은 아이콘. 하나 이상의 아이콘을 포함하는 .ico 파일 형태로 서버에 업로드 하고, 웹사이트 혹은 웹 페이지 소스에 태그로 적용한다. 브라우저의 주소 표시줄(address bar ), 즐겨찾기(bookmark), 탭(tab) 등에 사용된다. 바로가기 아이콘(shortcut icon), 웹사이트 아이콘(website icon), 탭 아이콘(tab icon), URL 아이콘(URL icon), 즐겨찾기 아이콘(bookmark icon) 등 다양한 이름으로 불린다. 1)

적용 방법

자신의 웹계정 루트(root) 디렉토리에 16×16 과 32×32의 이미지를 하나에 품은(multiple sizes) favicon.ico 파일을 위치시키고 아래와 같이 태그를 헤더에 적용한다. 타일의 색상은 content=“#ffffff” 부분을 수정한다.

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

규격

favicon.ico 파일은 전통적으로 16*16 규격인데, 최근은 32*32, 64*64까지 사용된다. 2) 일반적으로는 32*32 정도면 충분하다.

크기용도
16*16IE9 주소 표시줄, 고정된(pinned) 사이트의 점프목록/툴바/오버레이
32×32IE의 새로운 탭 페이지, 윈도우7 이상에서 작업 표시줄 단추, Safari 나중에 읽기 사이드바
24×24IE9 고정된(pinned) 사이트 브라우저 UI
64×64윈도우즈 사이트 아이콘, HiDPI/Retina에서 Safari 나중에 읽기 사이드바

추가 설정

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

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

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">

ICO 파일 제작

ICO 파일은 마이크로소프트 윈도를 위해 개발된 파일 포맷으로, 다양한 사이즈(multiple sizes)의 아이콘을 여러개 포함할 수 있다. 시작 메뉴, 바탕화면, 익스플로러에서 사용되며 파비콘 또한 익스플로러에서 처음 도입되었다.

파비콘은 온라인으로 제작할 수 있는 몇 가지 도구가 있다.

PNG 파일 지원

파비콘은 ICO 외에 PNG 파일로도 만들 수 있다. 단, Chrome, Firefox, Opera 7+, 그리고 Safari 4+는 모두 PNG 파비콘을 지원하지만, IE는 지원하지 않는다. 만일 IE를 위해 ICO와 PNG 파비콘을 모두 선언할 경우 PNG 는 무시하고 ICO를 우선 사용한다.

<!-- 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는 사용가능한 아이콘 중에서 하나를 임의로 선택하게 된다.
2)
ICO 파일은 하나의 파일에 여러 사이즈의 아이콘을 포함할 수 있다.
파비콘_favicon.txt · 마지막으로 수정됨: 2018/07/01 22:56 저자 baobab