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     lt link rel icon href favicon png sizes  16x16  type  image png  gt   lt link rel icon href windows ico sizes  32x32 48x48  type  image vnd microsoft icon  gt   lt link rel icon href mac icns sizes  128x128 512x512 8192x8192 32768x32768  gt   lt link rel icon href iphone png sizes  57x57  type  image png  gt   lt link rel icon href gnome svg sizes  any  type  image svg xml  gt    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?

Examples related to html

Examples related to browser

Examples related to favicon