83

What is currently the best way to get a favicon to display in all browsers that currently support it?

Please include:

  1. Which image formats are supported by which browsers.

  2. Which lines are needed in what places for the various browsers.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Fred
  • 2,713
  • 3
  • 27
  • 30
  • 1
    It might also be worth including the 'favicons' for the iPhone here as well; that is if the user chooses to add your website to their home screen. The code used in this case is as follows: The dimensions should be 57x57 pixels. Alternatively you can omit the link tag and just put a file called 'apple-touch-icon.png' in the root directory of your website. – different Aug 31 '08 at 21:21
  • While you're at it, read this: http://mathiasbynens.be/notes/touch-icons – Zach Lysobey Nov 11 '11 at 20:29
  • Note that you'll need larger icons for iPad and retina iPhone displays. See Apple's guidelines: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html – Mike Ottum Jul 14 '12 at 04:29

9 Answers9

110

I go for a belt and braces approach here.

I create a 32x32 icon in both the .ico and .png formats called favicon.ico and favicon.png. The icon name doesn't really matter unless you are dealing with older browsers.

  1. Place favicon.ico at your site root to support the older browsers (optional and only relevant for older browsers.
  2. Place favicon.png in my images sub-directory (just to keep things tidy).
  3. Add the following HTML inside the <head> element.
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

Please note that:

  • The MIME type for .ico files was registered as image/vnd.microsoft.icon by the IANA.
  • Internet Explorer will ignore the type attribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn't need to be supplied.

Reference

hwnd
  • 69,796
  • 4
  • 95
  • 132
Brian Matthews
  • 8,506
  • 7
  • 46
  • 68
  • 2
    OK, I'm having a 'Microsoft is getting on my nerves' day. I can't get this to work in Internet Explorer, despite the fact that it shows the favicon for the stackoverflow site. Are there any other settings that affect this, such as doctype? – belugabob Nov 27 '08 at 11:54
  • 1
    FYI - I found the answer. If you refer to the site via http://localhost:8080/index.html , it doesn't work - if you use the actual name of the machine (http://machineName:8080/index.html) everything functions as you'd expect. I can't even begin to understand this behaviour - anybody care to try? – belugabob Nov 27 '08 at 12:23
  • 2
    Update - the behaviour is caused by the browser caching the icon. Clearing the temporary internet files will cure this, if you feel happy losing your cache. – belugabob Nov 27 '08 at 14:47
  • 2
    Would it be neater to put the IE version of the link in an IE conditional comment? – EoghanM Dec 02 '08 at 10:40
  • 9
    32x32?? Isn't 16x16 the norm? – Eduardo Molteni Jun 04 '09 at 13:47
  • If anyone is having trouble with this on their test systems ensure that the path "/images/favicon.png" is correct remember the "/" at the start makes it the root of the domain so if your file is in "http:/ /testpc/site1/default.htm" and the image at "http:/ /testpc/site1/images/favicon.png" remove that first "/" ;) – GazB Jun 26 '12 at 11:46
  • @EoghanM indeed, but the catch is that conditional comments are version specific : heavy to set, and painful to maintain. – Bombinosh Jan 07 '15 at 07:57
10

I use .ico format and put the following two lines within the <head> element:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
John Topley
  • 113,588
  • 46
  • 195
  • 237
6

To also support touch icons for tablets and smartphones I prefer the approach of HTML5Boilerplate

More information on touch icons can be found in this article.

With the current status of browser-support you don't even have to add the HTML tag for the favicon in your document. The browsers will search automaticly a list of files, see this example for iOS:

If no icons are specified in the HTML, iOS Safari will search the website’s root directory for icons with the apple-touch-icon or apple-touch-icon-precomposed prefix. For example, if the appropriate icon size for the device is 57 × 57 pixels, iOS searches for filenames in the following order:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

My advise is to not include a favicon in your document, but have a list of files ready in the root website:

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

When you download a template from html5boilerplate.com these are all included, you just have to replace them with your own icons.

Willem de Wit
  • 8,604
  • 9
  • 57
  • 90
  • First link is outdated, needs to go to https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/html.md#favicons-and-touch-icon now. I'd edit myself but it's not enough characters changed :/ Thanks for your answer! – Brendan Feb 04 '15 at 19:33
5

Wikipedia to the rescue

Paul Tomblin
  • 179,021
  • 58
  • 319
  • 408
4

IE6 cannot handle PNGs correctly, be warned.

Andreas Rejbrand
  • 105,602
  • 8
  • 282
  • 384
nimish
  • 4,755
  • 3
  • 24
  • 34
3

Favicon must be an .ico file to work properly on all browsers.

Modern browsers also support PNG and GIF images.

I've found that in general the easiest way to create one is to use a freely available web service such as favicon.cc.

Antti Kissaniemi
  • 18,944
  • 13
  • 54
  • 47
3

There is also a site where you can check how the favicon of any page is made

getfavicon.org

There you can see a tutorial about making favicons, image types and resolutions, it's nice!

2

Having a favicon.* in your root directory is automatically detected by most browsers. You can ensure it's detected by using:

 <link rel="icon" type="image/png" href="/path/image.png" />

Personally I use .png images but most formats should work.

Ross
  • 46,186
  • 39
  • 120
  • 173
  • No, it's not "favicon.*", only very few formats work: ico, png, gif, jpeg and SVG. See https://en.wikipedia.org/wiki/Favicon#File_format_support. – WhyNotHugo May 14 '13 at 19:09
1

The answer to this question has become complicated enough that the best way is to just use a tool like RealFaviconGenerator, which lets you upload a png/jpg and then generates favicons and code to cover all the platforms for you: https://realfavicongenerator.net/

npfoss
  • 423
  • 5
  • 14