파비콘

웹 브라우저의 주소창에 표시되는 웹페이지를 대표하는 아이콘

파비콘(영어: favicon, 'favorites + icon') 또는 패비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트웹페이지를 대표하는 아이콘이다. 특정 웹사이트나 웹페이지와 관련된 하나 이상의 작은 아이콘이 포함된 파일이다. 웹 디자이너는 이러한 아이콘을 만들어 여러 가지 방법으로 웹사이트(또는 웹페이지)에 업로드할 수 있으며, 이때 그래픽 웹 브라우저가 이를 활용하게 된다. 파비콘 지원을 제공하는 브라우저는 일반적으로 브라우저의 주소 표시줄과 북마크 목록의 페이지 이름 옆에 페이지의 파비콘을 표시한다. 탭 문서 인터페이스를 지원하는 브라우저는 일반적으로 탭의 페이지 제목 옆에 페이지의 파비콘을 표시하며, 사이트별 브라우저는 파비콘을 바탕 화면 아이콘으로 사용한다.

파비콘의 한 예.

역사 편집

1999년 3월, 마이크로소프트는 처음으로 파비콘을 지원하는 인터넷 익스플로러 5를 출시했다. 원래 파비콘은 웹사이트의 루트 디렉터리에 있는 favicon.ico라는 파일이었다. 인터넷 익스플로러의 즐겨찾기(북마크)와 해당 페이지가 북마크된 경우 주소 표시줄의 URL 옆에 사용되었다. 부작용으로는 페이지를 북마크한 방문자 수를 파비콘의 요청으로 추정할 수 있다는 점이었다. 모든 최신 브라우저는 사이트 북마크 여부에 관계없이 파비콘 파일을 로드하여 웹 주소 표시줄에 표시하므로 이 부작용은 더 이상 유효하지 않다.

표준화 편집

2003년에 .ico 형식은 IANA를 통해 제3자에 의해 MIME 타입 image/vnd.microsoft.icon으로 등록되었다. 그러나 .ico 형식을 사용하여 이미지(예: 파비콘이 아님)로 표시하는 경우 인터넷 익스플로러는 이 표준화된 MIME 유형으로 제공되는 파일을 표시할 수 없다. 인터넷 익스플로러의 해결 방법은 .ico를 웹 서버의 비표준 image/x-icon MIME 타입과 연결하는 것이다.

RFC 5988에서는 IANA 링크 관계 레지스트리를 확립하였으며, HTML5 사양을 기반으로 2010년에 rel="icon"이 등록되었다. 널리 사용되는 <link rel="shortcut icon" type="image/png" href="image/favicon.png">는 이론적으로 바로가기와 아이콘이라는 두 가지 관계를 식별하지만 바로가기가 등록되지 않아 중복된다. 2011년 HTML 생활 표준에서는 역사적인 이유로 아이콘 바로 앞에 바로 가기가 허용되도록 지정했다. 그러나 이 문맥에서는 바로가기가 의미가 없다.

레거시 편집

인터넷 익스플로러 5~10은 ICO 파일 형식만 지원한다. 넷스케이프 7과 인터넷 익스플로러 버전 5, 6은 페이지가 북마크에 추가된 경우에만 파비콘을 표시하며, 이후 브라우저에서처럼 단순히 페이지를 방문할 때만 표시되는 것은 아니다.

브라우저 지원 여부 편집

브라우저 ICO PNG GIF 애니메이션 GIF JPEG APNG SVG
구글 크롬 4.0 4.0 4.0 아니요 아니요
인터넷 익스플로러 5.0 11.0 11.0 아니요 아니요 아니요 아니요
모질라 파이어폭스 1.0 1.0 1.0 3.0 아니요[1]
오페라 7.0 7.0 7.0 7.0 7.0 9.5 누락됨
사파리 4.0 4.0 아니요 4.0 아니요 아니요

아이콘 크기는 16x16, 32x32, 48x48, 64x64픽셀이 될 수 있고, 8비트, 24비트, 32비트 색상이 가능하다.

다음 포맷은 브라우저에 상관없이 호환되며 인터넷 익스플로러, 파이어폭스, 크롬, 오페라에서 모두 지원한다.[2]

  • <link rel="shortcut icon" href="http://www.example.com/myicon.ico"/>

다음도 허용된다.

  • <link rel="shortcut icon" href="/somepath/myicon.ico"/>

응답 컨텐츠 타입 편집

  • image/vnd.microsoft.icon
  • image/x-icon

각주 편집

  1. “Bug 366324 - SVG site icons (favicons, shortcut icons) support”. 2010년 2월 21일에 확인함. 
  2. “How to Add a Shortcut Icon to a Web Page”. 마이크로소프트. 2009년 8월 11일에 확인함. 

외부 링크 편집