HTML 5 Favicon - Support

Question

I was reading the Favicon page on Wikipedia. They mention the HTML 5 spec for Favicon:

The current HTML5 specification recommends specifying size icons in multiple sizes using the attributes rel="icon" sizes="space-separated list of icon dimensions" within a tag. [source] Multiple icon formats, including container formats such as Microsoft .ico and Macintosh .icns files, as well as Scalable Vector Graphics may be provided by including the icon's content type in the form of type="file content-type" within the tag.

Looking at the cited article (W3) they show this example:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

My question is do any browsers support the HTML 5 method?

Note: I know Apple uses their apple-touch-icon meta tag method over the HTML5 method.

The wikipedia article claims:

The Google Chrome web browser however, will select the closest matching size from those provided in the HTML headers to create 128×128 pixel application icons when the user chooses the Create application shortcuts... from the "Tools" menu.

How does Internet Explorer (v9 to v11) and Firefox handle this? And is the article correct in how Chrome handles the HTML Favicons? (There is no source cited for Chrome confirming this.)

In searching I wasn't able to really find any (credible) info on HTML 5 Favicon other than the Wikipedia Article.

User · Answer

No  not all browsers support the sizes attribute    Safari  Yes  it picks the picture that fits best  Opera  Yes  it picks the picture that fits best  IE11  Not sure  It apparently takes the larger picture it finds  which is a bit crude but okay  Chrome  No  see bugs 112941 and 324820  In fact  Chrome tends to load all declared icons  not only the best first last one  Firefox  No  see bug 751712  Like Chrome  Firefox tends to load all declared icon    Note that some platforms define specific sizes    Android Chrome expects a 192x192 icon  but it favors the icons declared in manifest json if it is present  Plus  Chrome uses the Apple Touch icon for bookmarks  Coast by Opera expects a 228x228 icon  Google TV expects a 96x96 icon

User · Answer

The answers provided  at the time of this post  are link only answers so I thought I would summarize the links into an answer and what I will be using   When working to create Cross Browser Favicons  including touch icons  there are several things to consider    The first  of course  is Internet Explorer  IE does not support PNG favicons until version 11  So our first line is a conditional comment for favicons in IE 9 and below     lt  -- if IE  gt  lt link rel  shortcut icon  href  path to favicon ico  gt  lt   endif -- gt    To cover the uses of the icon create it at 32x32 pixels  Notice the rel  shortcut icon  for IE to recognize the icon it needs the word shortcut which is not standard  Also we wrap the  ico favicon in a IE conditional comment because Chrome and Safari will use the  ico file if it is present  despite other options available  not what we would like    The above covers IE up to IE 9  IE 11 accepts PNG favicons  however  IE 10 does not  Also IE 10 does not read conditional comments thus IE 10 won t show a favicon  With IE 11 and Edge available I don t see IE 10 in widespread use  so I ignore this browser   For the rest of the browsers we are going to use the standard way to cite a favicon     lt link rel  icon  href  path to favicon png  gt    This icon should be 196x196 pixels in size to cover all devices that may use this icon   To cover touch icons on mobile devices we are going to use Apple s proprietary way to cite a touch icon     lt link rel  apple-touch-icon-precomposed  href  apple-touch-icon-precomposed png  gt    Using rel  apple-touch-icon-precomposed  will not apply the reflective shine when bookmarked on iOS  To have iOS apply the shine use rel  apple-touch-icon   This icon should be sized to 180x180 pixels as that is the current size recommend by Apple for the latest iPhones and iPads  I have read Blackberry will also use rel  apple-touch-icon-precomposed    As a note  Chrome for Android states       The apple-touch-  are deprecated  and will be supported only for a short time   Written as of beta for m31 of Chrome     Custom Tiles for IE 11  on Windows 8 1   IE 11  on Windows 8 1  does offer a way to create pinned tiles for your site   Microsoft recommends creating a few tiles at the following size       Small  128 x 128      Medium     270 x 270      Wide  558 x 270      Large  558 x 558   These should be transparent images as we will define a color background next    Once these images are created you should create an xml file called browserconfig xml with the following code     lt  xml version  1 0  encoding  utf-8   gt   lt browserconfig gt     lt msapplication gt       lt tile gt         lt square70x70logo src  images smalltile png   gt         lt square150x150logo src  images mediumtile png   gt         lt wide310x150logo src  images widetile png   gt         lt square310x310logo src  images largetile png   gt         lt TileColor gt  009900 lt  TileColor gt       lt  tile gt     lt  msapplication gt   lt  browserconfig gt    Save this xml file in the root of your site  When a site is pinned IE will look for this file  If you want to name the xml file something different or have it in a different location add this meta tag to the head     lt meta name  msapplication-config  content  path-to-browserconfig custom-name xml    gt    For additional information on IE 11  custom tiles and using the XML file visit Microsoft s website   Putting it all together   To put it all together the above code would look like this    lt  -- For IE 9 and below  ICO should be 32x32 pixels in size -- gt   lt  -- if IE  gt  lt link rel  shortcut icon  href  path to favicon ico  gt  lt   endif -- gt    lt  -- Touch Icons - iOS and Android 2 1  180x180 pixels in size  -- gt    lt link rel  apple-touch-icon-precomposed  href  apple-touch-icon-precomposed png  gt    lt  -- Firefox  Chrome  Safari  IE 11  and Opera  196x196 pixels in size  -- gt   lt link rel  icon  href  path to favicon png  gt         Windows Phone Live Tiles  If a user is using a Windows Phone they can pin a website to the start screen of their phone  Unfortunately  when they do this it displays a screenshot of your phone  not a favicon  not even the MS specific code referenced above   To make a  Live Tile  for Windows Phone Users for your website one must use the following code    Here are detailed instructions from Microsoft but here is a synopsis   Step 1  Create a square image for your website  to support hi-res screens create it at 768x768 pixels in size   Step 2  Add a hidden overlay of this image  Here is example code from Microsoft    lt div id  TileOverlay  onclick  ToggleTileOverlay    style  background-color  Highlight  height  100   width  100   top  0px  left  0px  position  fixed  color  black  visibility  hidden  gt     lt img src  customtile png  width  320  height  320    gt     lt div style  margin-top  40px  gt       Add text graphic asking user to pin to start using the menu       lt  div gt   lt  div gt    Step 3  You then can add thew following line to add a pin to start link    lt a href  javascript ToggleTileOverlay    gt Pin this site to your start screen lt  a gt    Microsoft recommends that you detect windows phone and only show that link to those users since it won t work for other users   Step 4  Next you add some JS to toggle the overlay visibility   lt script gt  function ToggleTileOverlay      var newVisibility        document getElementById  TileOverlay   style visibility     visible      hidden     visible    document getElementById  TileOverlay   style visibility      newVisibility     lt  script gt    Note on Sizes  I am using one size as every browser will scale down the image as necessary  I could add more HTML to specify multiple sizes if desired for those with a lower bandwidth but I am already compressing the PNG files heavily using TinyPNG and I find this unnecessary for my purposes  Also  according to philippe b s answer Chrome and Firefox have bugs that cause the browser to load all sizes of icons  Using one large icon may be better than multiple smaller ones because of this    Further Reading  For those who would like more details see the links below     Wikipedia Article on Favicons The Icon Handbook Understand the Favicon by Jonathan T  Neal rel  shortcut icon  considered harmful by Mathias Bynens Everything you always wanted to know about touch icons by Mathias Bynens

[html] HTML 5 Favicon - Support?

The answer is

Examples related to html

Examples related to browser

Examples related to favicon

Tags