favicon

favicon은 1999년 3월 인터넷 익스플로러 5부터 적용되기 시작했습니다. 이후 1999년 12월 W3C에 의해 웹표준으로 지정되어 HTML 4.01부터 사용되었으며, XHTML 1.0은 2000년 1월부터 사용되었습니다.  ico이외에도 PNG나 GIF파일을 이용한 favicon을 사용할 수 있으며 브라우저에 따라 animated GIF, JPEG, APNG 등을 사용할 수 있습니다.

브라우저 지원

 
브라우저 ICO PNG GIF 애니메이션 GIF JPEG APNG SVG
Google Chrome 4.0 4.0 4.0 × ×
Internet Explorer 5.0 11.0 11.0 × × × ×
Mozilla Firefox 1.0 1.0 1.0 3.0 ×
Opera 7.0 7.0 7.0 7.0 7.0 9.5 누락됨
Apple Safari 4.0 4.0 × 4.0 × ×

브라우저 지원을 생각하면 기본적으로 ICO 파일을 사용하는 것이 일반적입니다.favicon.ico는 대부분의 브라우저에서 잘 작동합니다. ICO 파일은 하나의 파일에 여러가지의 크기의 이미지를 설정할 수 있습니다.

사용방법

브라우저 지원 내역은 다음과 같다.

Browser Address bar Address bar drop down list Links bar Bookmarks Tabs Drag to desktop
Edge No Yes Yes Yes Yes Yes
Firefox 1.0–12.0: Yes
> v13: No
Yes Yes Yes Yes Yes
Google Chrome × × Yes Yes 1.0 No
Internet Explorer 7.0 × 5.0 5.0 7.0 5.0
Opera 7.0–12.17: Yes
> v14: No
× 7.0 7.0 7.0 7.0
Safari Yes × × Yes Yes No

File Dimension

16×16 Address/Location Bar, Pinned Site(Jump/Toolbar/Overray)
24×24 IE9 Pinned Site
32×32 IE11 Tab Page, Taskbar Icon(over Win7)
48×48 Site Icon
64×64 Site Icon

<!– Just IE? (IE6-10) –>
<!–[if IE]><link rel=”shortcut icon” href=”http://domain/favicon.ico”>&lt;![endif]–>

<!– IE11 & Others –>
<link rel=”icon” href=”http://domain/favicon.ico”&gt;
<!– Or –>
<link rel=”icon” type=”image/png” href=”http://domain/path/image.png”&gt;
<!– Or –>
<link rel=”icon” type=”image/gif” href=”http://domain/path/image.gif”&gt;

  1. IE에서만 이용할 수 있는 type속성이 있는데 무시해도 됩니다. (“image/vnd.microsoft.icon”, “image/x-icon”)
  2. 모든 아이콘 파일은 Root에 둬야 하는 옵션을 지키지 않아도 된다. 브라우저에서 지원하기는 하지만 필수는 아닙니다. (과거 브라우저에서 지키던 내용)

 

Apple Devices Support

With rounded corners, added by iOS

<link rel=”apple-touch-icon” href=”somepath/image.png” />

Without reflective shine

<link rel=”apple-touch-icon-precomposed” href=”somepath/image.png” />

 

HTML5 recommendation for icons in multiple sizes

<link rel=”icon” type=”file content-type” sizes=”space-separated list of icon dimensions

Examples

<link rel=”apple-touch-icon” sizes=”57×57″ href=”/apple-icon-57×57.png”>
<link rel=”apple-touch-icon” sizes=”60×60″ href=”/apple-icon-60×60.png”>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”/apple-icon-72×72.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”/apple-icon-76×76.png”>
<link rel=”apple-touch-icon” sizes=”114×114″ href=”/apple-icon-114×114.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”/apple-icon-120×120.png”>
<link rel=”apple-touch-icon” sizes=”144×144″ href=”/apple-icon-144×144.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”/apple-icon-152×152.png”>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”/apple-icon-180×180.png”>
<link rel=”icon” type=”image/png” sizes=”192×192″ href=”/android-icon-192×192.png”>
<link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”>
<link rel=”icon” type=”image/png” sizes=”96×96″ href=”/favicon-96×96.png”>
<link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.png”>

이외에 …

<link rel=”manifest” href=”/manifest.json”>
<meta name=”msapplication-TileColor” content=”#ffffff”>
<meta name=”msapplication-TileImage” content=”/ms-icon-144×144.png”>
<meta name=”theme-color” content=”#ffffff”>

 

PNG favicion

Chrome, Firefox, Opera 7+, Safari 4+는 PNG 파일을 지원하지만 Chrome과 Safari는 ICO 파비콘이 함께 지정되어 있는 경우 ICO 파일이 사용됩니다. IE 때문에 ICO를 사용하면 IE, Chrome, Safari에서는 ICO만 사용되게 됩니다.

 

관련링크

 

 

Advertisements

답글 남기기

댓글을 게시하려면 다음의 방법 중 하나를 사용하여 로그인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중