FavIcon Notes

The Holy Grail — SVG FavIcon

<link rel="icon" href="logo.svg" sizes="any" type="image/svg+xml">

FavIcon Tools

grunt-favicons

Apps And App Plugins

Wikipedia: Apple Developer Tools - Icon Composer
GIMP
Telegraphics Photoshop ICO Format Plugin
RealWorld Icon Editor – Windows only. $47 license. Pro License $89.

Online Tools

Online Converters

Dynamic Drive FavIcon Generator - Can create 16x16, 32x32, 48x48 merged FavIcon
IconConvert
favicon.cc
HTML-Kit: FavIcon from Pics
HTML-Kit: Favicon Validator

Links

Browser Support

Browser	ICO	PNG	GIF	GIFa	JPEG	APNG	SVG	Tiles	XML	JSON
Chrome	Yes	4.0	4.0	No	4.0	No	Yes	No?	No?	M39
IE	5.0	11.0	11.0	No	No	No	No	Win 8/IE 10	Win 8.1/IE 11	No?
Firefox	1.0	1.0	1.0	Yes	Yes	3.0	4.0	No?	No?	No?
Mozilla	1	?	?	?	?	?	No?	No?	No?	No?
Netscape	7	?	?	?	?	?	No?	No?	No?	No?
Opera	7.0	7.0	7.0	7.0	7.0	9.5	9.6	No?	No?	No?
Safari	Yes	4.0	4.0	No	4.0	No	No	No?	No?	No?
Konqueror	3	?	?	?	?	?	No?	No?	No?	No?

JSON: This is a reference to Chrome’s manifest.json
No?: Probably safe to assume it’s not supported
XML: This is a reference to Microsoft’s browserconfig.xml

Accessibility

	Chrome	IE	Firefox	Opera	Safari
`<link rel="shortcut icon" href="http://example.com/myicon.ico" />`	Yes	Yes	Yes	Yes	Yes
`<link rel="icon" type="image/x-icon" href="http://example.com/image.ico" />`	Yes	No	Yes	Yes	Yes
`<link rel="icon" type="image/png" href="http://example.com/image.png" />`	Yes	No	Yes	Yes	Yes
`<link rel="icon" type="image/gif" href="http://example.com/image.gif" />`	Yes	No	Yes	Yes	Yes
`example.com/favicon.ico`	Yes	Yes	Optional	Yes	Yes
root or link preference	?	root	?	?	?

image/vnd.microsoft.icon: Unofficial MIME-Type submitted to ICANN by someone other than Microsoft
image/x-icon: Official MIME-Type from Microsoft

Optimal Usage

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" sizes="16x16 24x24 32x32 48x48" title="IE Compatible" />
<link rel="icon" type="image/icns" href="/assets/img/favicon.icns" sizes="16x16 32x32 128x128 256x256 512x512" title="Mac/iOS Options" />
<link rel="icon" type="image/png" href="/assets/img/favicon_57.png" sizes="57x57" title="Web-Clip" />
<link rel="icon" type="image/png" href="/assets/img/favicon_114.png" sizes="114x114" title="Web-Clip HD" />
<link rel="apple-touch-icon-precomposed" href="/assets/img/favicon-precomp_57.png" sizes="57x57" title="Web-Clip Precomp" />
<link rel="apple-touch-icon-precomposed" href="/assets/img/favicon-precomp_114.png" sizes="114x114" title="Web-Clip Precomp HD" />
<!--
IE Compatible: For IE the filename must not be favicon.ico for the link take precedence.
Web-Clip: Alternate and more generic format used instead of rel="apple-touch-icon"
    iOS also checks /apple-touch-icon.png
Web-Clip HD: Can be used instead of apple-touch-icon for Retina HD (and iPad?)
    iOS also checks /apple-touch-icon.png
Web-Clip Precomp: Web-Clip is pre-composed so will not be modified by iOS.
    iOS also checks /apple-touch-icon-precomposed.png
Web-Clip Precomp HD: Web-Clip is pre-composed for Retina HD (and iPad?)
    iOS also checks /apple-touch-icon-precomposed.png
-->

iOS and Android Web-Clip

<!-- iOS also checks /apple-touch-icon.png -->
<link rel="apple-touch-icon" href="web-clib_57x57.png" />
<!-- Doesn't get rounded corners, etc. iOS also checks /apple-touch-icon-precomposed.png -->
<link rel="apple-touch-icon-precomposed" href="web-clib_57x57.png" />
<!-- Can be used instead of apple-touch-icon -->
<link rel="icon" type="image/png" href="web-clib_57x57.png" sizes="57x57" />
<!-- Can be used instead of apple-touch-icon for Retina HD (and iPad?) -->
<link rel="icon" type="image/png" href="web-clib_114x114.png" sizes="114x114" />

StackOverflow

favicon.png vs favicon.ico - why should I use PNG’s instead of ICO’s?

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="apple-itouch-icon" href="http://sstatic.net/so/apple-touch-icon.png">

MSDN

http://msdn.microsoft.com/en-us/library/gg491740%28v=VS.85%29.aspx

BuildMyPinnedSite.com

Recommended Sizes: 16x16, 32x32, 48x48
Optimal Sizes: 16x16, 24x24, 32x32, 64x64

http://msdn.microsoft.com/en-us/library/ms537656%28v=VS.85%29.aspx

<link rel="SHORTCUT ICON" href="http://www.mydomain.com/myicon.ico"/>

Suggestion at http://forums.asp.net/t/1165292.aspx

<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="~/favicon.ico" type="image/ico" />

Options with Little Support or Simply Not Necessary

<link rel="icon" type="image/icon" href="favicon.png" sizes="16x16" title="Non-IE Icon" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" title="Vector Icon only supported by Firefox" />

<link rel="icon" type="image/icns" href="favicon.icns" sizes="16x16 32x32 128x128 256x256 512x512" title="Mac Icons" />