I'd like to use a single image as both a regular favicon and iPhone/iPad friendly favicon.
Is this possible? Would an iPad-friendly 72×72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16×16 or 32×32 image?
Update for 2020: Sticking to the original question of 16x16 versus 32x32 icons: the current recommendation should be to provide a 32x32 icon, skipping 16x16 entirely. All current browsers and devices support 32x32 icons. The icon will routinely be upscaled to as much as 192x192 depending on the environment (assuming there are no larger sizes available or the system didn't recognize them). Upscaling from ultra low resolution has a noticeable effect so better stick to 32x32 as the smallest baseline.
For IE, Microsoft recommends 16x16, 32x32 and 48x48 packed in the favicon.ico file.
For iOS, Apple recommends specific file names and resolutions, at most 180x180 for latest devices running iOS 8.
Android Chrome primarily uses a manifest and also relies on the Apple touch icon.
IE 10 on Windows 8.0 requires PNG pictures and a background color and IE 11 on Windows 8.1 and 10 accepts several PNG pictures declared in a dedicated XML file called browserconfig.xml.
Safari for Mac OS X El Capitan introduces an SVG icon for pinned tabs.
Some other platforms look for PNG files with various resolutions, like the 96x96 picture for Google TV or the 228x228 picture for Opera Coast.
Look at this favicon pictures list for a complete reference.
TLDR: This favicon generator can generate all these files at once. The generator can also be implemented as a WordPress plugin. Full disclosure: I am the author of this site.
Short answer
The favicon is supposed to be a set of 16x16, 32x32 and 48x48 pictures in ICO format. ICO format is different than PNG. Non-square pictures are not supported.
To generate the favicon, for many reasons explained below, I advise you to use this favicon generator. Full disclosure: I'm the author of this site.
Long, comprehensive answer
Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons.
The favicon is supported by several files:
A favicon.ico icon.
Some other PNG icons.
In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.
favicon.ico
Although all desktop browsers can deal with this icon, it is primarily for older version of IE.
The ICO format is different of the PNG format. This point is tricky because some browsers are smart enough to process a PNG picture correctly,
even when it was wrongly renamed with an ICO extension.
An ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in favicon.ico.
For example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut.
Declare the favicon with:
<link rel="icon" href="/path/to/icons/favicon.ico">
However, it is recommended to place favicon.ico in the root directory of the web site and to not declare it at all and let the modern browsers pick the PNG icons.
PNG icons
Modern desktop browsers (IE11, recent versions of Chrome, Firefox...) prefer to use PNG icons. The usual expected sizes are 16x16, 32x32 and "as big as possible".
For example, MacOS/Safari uses the 196x196 icon if it is the biggest it can find.
What are the recommended sizes? Pick your favorite platforms:
Most desktop browsers: 16x16, 32x32, "as big as possible"
Android Chrome: 192x192
Google TV: 96x96
... and others that are more or less documented.
The PNG icons are declared with:
<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...
Beware: Firefox does not support the sizes attribute and uses the last PNG icon it finds. Make sure to declare the 32x32 picture last: it is good enough for Firefox, and that will prevent it from downloading a big picture it does not need. edit: fixed in 2016.
Also note that Chrome does not support the sizes attribute and tends to load all declared icons. Better not declare too many icons. edit: fixed in 2018.
Mobile platforms
This question is about desktop favicon so there is no need to delve too much in this topic.
Apple defines touch icon for the iOS platform.
iOS does not support non-square icon. It simply rescales non-square pictures to make them square (look for the Kioskea example).
Android Chrome relies on the Apple touch icon and also defines a 192x192 PNG icon.
Microsoft defines the tile picture and the browserconfig.xml file.
Conclusion
Generating a favicon that works everywhere is quite complex. I advise you to use this favicon generator. Full disclosure: I'm the author of this site.
I don't see any up to date info listed here, so here goes:
To answer this question now, 2 favicons will not do it if you want your icon to look great everywhere. See the sizes below:
16 x 16 – Standard size for browsers
24 x 24 – IE9 pinned site size for user interface
32 x 32 – IE new page tab, Windows 7+ taskbar button, Safari Reading List sidebar
48 x 48 – Windows site
57 x 57 – iPod touch, iPhone up to 3G
60 x 60 – iPhone touch up to iOS7
64 x 64 – Windows site, Safari Reader List sidebar in HiDPI/Retina
70 x 70 – Win 8.1 Metro tile
72 x 72 – iPad touch up to iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone retina touch up to iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome Web Store app, Android
144 x 144 – IE10 Metro tile for pinned site, iPad retina up to iOS6
150 x 150 – Win 8.1 Metro tile
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 wide Metro tile
310 x 310 – Win 8.1 Metro tile
2021 standards thanks to faviconit
I use faviconit.com for the best browser and device support possible. You upload an image and this site gives you the code, the converted images and a browserconfig file.
We could simply upload a favicon manually to our website of 16x16 and it will probably show up in almost any browser.
But when you will mark it as one of your favorites on your smartphone or tablet, we will need larger images (60x60 to 144x144).
And lets say one of our users creates a shortcut on their desktop. In that case a 196x196 looks better!
Example code of what faviconit would give you, next to all the converted images:
<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
Since Windows 8
But that is not all. Since windows 8 we are able to create shortcuts to websites with tiles!
<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
Browserconfig.xml
Upload a file named browserconfig.xml (to enable the tiles in windows >8)
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/favicon-70.png"/>
<square150x150logo src="/favicon-150.png"/>
<square310x310logo src="/favicon-310.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>
16x16 pixels, *.ico format.
I am not sure if/how browsers scale large icons, but The W3C suggests the following1:
The format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.
1 w3c.org: How to Add a Favicon to your Site (Draft in development).
Actually, to make your favicon work in all browsers properly, you will have to add more than 10 files in the correct sizes and formats.
My friend and I have created an App just for this! you can find it in faviconit.com
We did this, so people don't have to create all these images and the correct tags by hand, create all of them used to annoy me a lot!
The simplest solution (2021)
Use one(!) SVG image
If you do not care about supporting Safari, you can use a single SVG icon:
<link rel="icon" href="favicon.svg" type="image/svg+xml" sizes="any">
Use one(!) PNG image
If you want full support*, you should add this to the head of your document:
<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">
The last link is for Apple (home screen), the second one for Android (home screen) and the first one for the rest.
The size is exactly the size the Android home screen uses. The Apple home screen icon size is 60px (3x), so 180px and will be scaled down. Other platforms use the default shortcut icon, which will be scaled down too.
*Note that this solution does not support "tiles" in Windows 8/10. It does, however, support images in shortcuts, bookmarks and browser-tabs.
Wikipedia has this to say:
Additionally, such icon files can be
either 16×16 or 32×32 pixels in size,
and either 8-bit or 24-bit in color
depth (note that GIF files have a
limited, 256 color palette entries).
I think the best way is to use a 32x32 gif and test it with different browsers.
Simple solution for modern browsers (2022)
Use an SVG favicon:
<link rel="icon" href="/icon.svg">
Supported by major browsers (except Safari in 2021) and Living Standard
Only 1 short line of code and simple to remember
Other attributes like type and sizes are not necessary
Scales much better at any size compared to PNG
Let's end the favicon craziness with hundreds of different sizes...
You can have multiple sizes of icons in the same file. I routinely create favicons (.ico file) that are 48, 32, and 16 pixels. You can add in any size image you want. The question is, will the iPhone use an ico file?
ico also supports transparency, but I'm not sure if it's an alpha channel like PNG; probably more like GIF where it's on or it's off.
According to the Wikipedia Article on Favicon, Internet Explorer supports only the ICO format for favicons.
I would stick with two different icons.
As I learned, no one of those several solutions are perfects. Using a favicon generator is indeed a good solution but their number is overwhelming and it's hard to choose. I d'like to add that if you want your website to be PWA enabled, you need to provide also a 512x512 icon as stated by Google Devs :
icons including a 192px and a 512px version
I didn't met a lot of favicon generators enforcing that criteria (firebase does, but there is a lot of things it doesn't do). So the solution must be a mix of many other solutions.
I don't know, today at the begining of 2020 if providing a 16x16, 32x32 still relevant. I guess it still matters in certain context like, for example, if your users still use IE for some reason (this stills happen in some privates companies which doesn't migrate to a newer browser for some reasons)
No, you can't use a non-standard size or dimension, as it'd wreak havoc on peoples' browsers wherever the icons are displayed. You could make it 12x16 (with four pixels of white/transparent padding on the 12 pixel side) to preserve your aspect ratio, but you can't go bigger (well, you can, but the browser'll shrink it).
You will need separate files for each resolution I am afraid. There is a really good article on campaign monitor describing how they created and implemented their icons for each iOS device too:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
The format of favicon must be square otherwise the browser will stretch it. Unfortunatelly, Internet Explorer < 11 do not support .gif, or .png filetypes, but only Microsoft's .ico format. You can use some "favicon generator" app like: http://favicon-generator.org/
favicon.ico is 16x16
<link rel="shortcut icon" href="favicon.ico"/>
And I use these ones to be beautiful in mobile and tablet:
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="apple-touch-icon-precomposed" href="img/ico57.png">
It's important to use the name "favicon.ico" in the root because many browsers will try to find there first.
Seems like your file should be .ico type.
Check this post about favicons:
http://www.html-kit.com/support/favicon/image-size/
the format for the image you have chosen must be 16x16 pixels or
32x32 pixels, using either 8-bit or 24-bit colors. The format of the
image must be one of PNG (a W3C standard), GIF, or ICO. - How to Add a Favicon to your Site - QA # W3C
The favicon doesn't have to be 16x16 or 32x32. You can create a favicon that is 80x80 or 100x100, just make sure that both values are the same size, and obviously don't make it too large or too small, choose a reasonable size.
May I remind everybody that the question was:
I'd like to use a single image as both a regular favicon and iPhone/iPad friendly favicon? Is this possible? Would an iPad-friendly 72x72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16x16 or 32x32 image?
The answer is: YES, that is possible! YES, it will be scaled. NO, you do not need a 'regular browser favicon'. Please look at this answer: https://stackoverflow.com/a/48646940/2397550
Related
This is how I have set up the icon-links in my header.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="/screen/favicon.png" sizes="192x192">
My 16x16 favicon.ico shows a simplified version of my logo, which looks much better than a downscaled version of a larger PNG. For the touch-icons on mobile devices I have created a 192x192 png of my original logo. Since I added that larger PNG to my header, it is not only used (correctly) as a touch-icon, but also replaces the 16x16 favicon.ico. Thus on the browsers the downscaled png-version is display. I dislike it, cause the ico-version looks better.
Is there any way, to force the display of the ico-version of my favicon in browsers?
If the reason of your high-resolution image/png icon is Android, then you should declare it via a web manifest.
This is what RealFaviconGenerator does: it only declares low-resolution image/png icons in the HTML. So desktop browsers only pick those, whereas Android get the high resolution icons it expects. Even if you don't plan to use the service, you can generate a fake set of icons and adapt the generated code and files to your needs.
Full disclosure: I'm the author of this service.
I've been tinkering with support for dark-mode by using a media query in my svg favicon. This is visible on my website.
<link href="favicon.svg" rel="icon" type="image/svg+xml">
<link href="favicon.ico" rel="alternate icon" type="image/x-icon">
Comparison between dark and light mode with Firefox
However, when using a Chromium based browser (Google Chrome version 84), it uses the favicon.ico.
When I remove the ico completely, the browser does show the svg favicon, so I know it works and the browser supports svg favicons. However, the browser seems to pick the .ico if it's got the option to do so.
Can I force Chromium based browsers to pick the svg favicon, while maintaining support for older browsers by including the ico format? It should be noted none of these are stored on the root of my website.
Maybe try putting the SVG image after the ICO image.
This question already has answers here:
What is the best practice for creating a favicon on a web site? [closed]
(4 answers)
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Opinion-based Update the question so it can be answered with facts and citations by editing this post.
What favicon dimensions, file formats and meta/link tags should be used as of 2022? This includes apple icon, windows, android and other devices people use today.
I use Opera and I can see it supports svg format. Is it the best solution to use svg nowadays? Is there any option "one file fits all"?
I've been browsing many websites and checked different "favicon generators". All of them are years old and work mostly with png files.
For example:
What code should be used for ico and svg?
<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
or should dimensions be specified if ico contains more sizes? I didn't find one good answer.
<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">
Please provide dimensions, file formats and meta/link tags of what favicons should be used.
Disclaimer: I'm the author of RealFaviconGenerator, which I expect to be up-to-date (mostly, see below). So don't be surprised if this answer matches what RFG generates.
The one-size-fits-all myth
There is no "one size fits all" icon. You can't create a single SVG icon and expect it to work everywhere.
From a technical point of view, a single SVG icon would be a good thing. But from a UI and UX point of view, this is not a desirable outcome. Compare iOS and Android. On iOS, all home screen icons are squares with rounded corners (iOS fills transparent regions of Touch icons with black). On Android, home screen icons often use non-square shapes and transparency (including Google app icons). Submit a single touch icon and Android Chrome will use it. But you won't be able to match Android icon guidelines, whereas a dedicated icon could.
So I advice to deliberately avoid using a single icon. Rather target each platform individually, when possible (this is not always the case).
Icons, platform per platform
iOS Safari
iOS Safari expects a touch icon. As of today, this is a 180x180 PNG image. This image should not use transparency and its corners will be automatically rounded when added to home screen. Declared with:
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
Over the years, this icon has become the "default high resolution icon" for many browsers. So you will find it elsewhere, when adding to bookmark, etc.
Android Chrome
Android Chrome relies on the Web App Manifest. Although this manifest is not dedicated to Android Chrome, it is currently its main supporter. So at the moment, it is still quite safe to consider the icons from the Web App Manifest to be for Android Chrome.
As the name suggests, the Web App Manifest is for, well, web apps. But any web site can use it as a way to reference some icons.
Android expects a 192x192 PNG icon, transparency allowed and encouraged.
The manifest is declared with:
<link rel="manifest" href="/icons/site.webmanifest">
Edge and IE 12
Microsoft introduced the browserconfig, an XML document which lists various icons that fit the Metro UI.
The file and background color are declared with:
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
Classic desktop browsers
Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE... This is were things are a little more blurry. Historically, there was a single favicon.ico file, still supported. However, most recent browsers rather pick PNG icons, which are lighter. Plus some browsers are not able to select the proper icon in the ICO file (this format can embed several versions of an icon), leading a low resolution icon being wrongly used.
One could be tempted to drop the old favicon.ico entirely. Although I would like to make this leap in RFG, I didn't run the necessary tests to evaluate the impact on the old browsers.
Thus the combo I still recommend today, with favicon.ico embedding 16x16, 32x32 and 48x48 icons:
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">
Other browsers
Other browsers may have dedicated icons. For example Coast by Opera is looking for a 228x228 icon. The need to focus on these browsers is not obvious. They usually use the touch icon or other icons when they cannot find "their" icon.
Conclusion
As announced at the beginning, this is exactly what RealFaviconGenerator creates.
It is also worth mentioning that together with favicon some other tags should be added like OG tags, Twitter cards or MS-application. It all serves the same purpose - visual identification of your brand and should also be included.
Twitter card can be found HERE
I add following tags
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#YourAccount">
<meta name="twitter:creator" content="#YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">
I found that many users make images 1300px by 650px and jpg/png formats.
After adding all tags they should be validated HERE
Facebook OG has more option but general are as follows:
<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">
<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->
Facebook recommend specific ratio of the image and the file size is limited to 8Mb. To keep similar images with twitter card I recommend dimensions 1240px by 650px and jpg/png format. Facebook and twitter do not accept svg...
I found that some global brands use this tag on their websites. One had dimensions 150x150 pixels and png format. This image may be used by browsers to display in search results.
<meta name="thumbnail" content="path/to/image/thumb-150x150.png">
Real Favicon Generator covers also Microsoft favicons. There are many other meta tags for MS-application to optimize bow the page and other infos such as image are displayed. This topic is also worth reading.
I hope this is usefull for someone and expands the topic of branding your website.
I had the exact same question a few weeks back. It is surprisingly hard to find reliable up-to-date information about favicons on the internet. In fact MDN and W3C both link to Wikipedia for more info about favicons. The Wikipedia article, however, is quite short and not very helpful. It took me several hours to research what the optimal icons for modern browsers are.
This is what I learnt:
There is no "one file to rule them all" solution. However, for modern browsers, it is actually not that much you need.
The standard favicon size in browsers is still 16x16 points corresponding to 32x32 pixels on high resolution screens.
There is no need to still include a favicon.ico file in your root directory unless you want to support IE 10 or older.
SVG would be nice, but is not supported by all browsers. So the easiest solution is still to just use PNG images.
Google explicitly says they don't support 16x16 or 32x32 icons. For Google results, you need to include at least one icon that is a multiple of 48x48.
For when users pin your website on their phone's launch screen you need a 192x192 icon for Android, 167x167 for iPad and 180x180 for iPhone (while the link tags for iPhone are special — see below)
In theory, you could provide a single 192x192 (or higher multiple of 48) icon which would be scaled down by browsers and all other services, but especially for the 16x16 point version, these scaling results will probably be worse than what you get when you scale it yourself with a professional image editor or even provide special versions for these low resolution icons.
You can also add a web manifest file that includes more meta info like theme colors. But that is only supported on Android and brings little benefit unless you really expect a large share of your users to pin your website on their home screen (in my humble opinion that is very unlikely for most websites).
My recommendation would be to use the following in your header:
<!-- For all browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- For Google and Android -->
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
<!-- For iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<!-- For iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
I have also written a blog post with a bit more prose and more background information.
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.
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:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
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:
<link rel="icon" href="path/to/favicon.png">
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:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
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:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/smalltile.png"/>
<square150x150logo src="images/mediumtile.png"/>
<wide310x150logo src="images/widetile.png"/>
<square310x310logo src="images/largetile.png"/>
<TileColor>#009900</TileColor>
</tile>
</msapplication>
</browserconfig>
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:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
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:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
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:
<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
<img src="customtile.png" width="320" height="320" />
<div style='margin-top: 40px'>
Add text/graphic asking user to pin to start using the menu...
</div>
</div>
Step 3
You then can add thew following line to add a pin to start link:
Pin this site to your start screen
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
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
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
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.
I have different icons for the ipad, iphone and other devices.
Is it possible to make reference to all of them with an external file? or do I need to paste all of these links in the head section for each page?
<link rel="apple-touch-icon" href="img/apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-iphone-retina-display.png">
<link rel="shortcut icon" href="img/favicon.ico">
You don't have to declare the Apple touch icons in every pages. There is no "external file" technique, but Apple defines both declarations and file naming conventions. You can use the conventions to avoid extra HTML code.
To do this:
Remove the three link markups which declare the Apple touch icons.
Place your icons in the root directory (ie. /) of your web site.
Rename your icons according to Apple specs: apple-touch-icon-72x72.png, apple-touch-icon-114x114.png, etc.
iOS devices will still be able to find them. A note of warning with this practice: this is okay for iOS devices. But some other platforms, such as Android, also use these icons. And these platforms may fail at using the conventions define by Apple (declarations support is more widespread).
Another note about the icons size: 72x72 and 114x114 are for iOS 6 and prior. Make sure you define Apple touch icons with the right sizes.