Readme

The Favicon Cheat Sheet at https://github.com/audreyr/favicon-cheat-sheet is an excellent resource created and maintained on GitHub by Audrey Roy @audreyfeldroy.

Included are links to other favicon resources, recommended code to include in your HTML, recommended image specifications and favicon tools.

Also included are instructions on forcing a favicon refresh which is a very popular question asked on the Internet.

Thanks Audrey!

Thanks @danwood for letting me know about new Apple application icon sizes for iOS7.

Mathias Bynens recently updated his excellent everything you always wanted to know about touch icons article including a link to an official Apple document about Icon and Image Sizes.

It appears that the high resolutions for iPhone, iPod Touch and iPad have been updated as follows:

• iPhone and iPod touch: 114x114 updated to 120x120
• iPad: 144x144 updated to 152x152

The standard resolution equivalents are half the above resolutions which means we will also need:

• 60x60
• 76x76

The updated list of required icons as far as I can tell is now as follows:

• apple-touch-icon.png
• apple-touch-icon-57x57.png
• apple-touch-icon-60x60.png *NEW* *
• apple-touch-icon-72x72.png
• apple-touch-icon-76x76.png *NEW*
  
• apple-touch-icon-114x114.png
• apple-touch-icon-120x120.png *NEW*
• apple-touch-icon-144x144.png
• apple-touch-icon-152x152.png *NEW*

Iconifier has been updated accordingly.

* Update 23/09/2013

As pointed out by Mathias Bynens, it's unlikely that iOS 7 will be made available on non-Retina iPhones and iPads so there’s no reason to include the 60×60px and 76×76px icons.

* Update 07/10/2013

As Ben points out, the 76×76px icon is required so I have added it back in.

Jonathan T. Neal has written a  good in-depth article, Understand the Favicon on the favicon, touch icons and tile icons and the best ways to implement these on your website.

Jonathan also points to another interesting article about favicons, Create the Perfect Favicon from .net Magazine. This is an edited excerpt from Chapter 3 of The Icon Handbook by Jon Hicks.

Correct File Names

iconifier.net creates all the required Apple Launcher icons using file names that devices expect so you needn't specify the icon locations in your HTML unless you have some special requirements such as different icons for each page or wish to help Android devices find the correct icons.

The expected file names are as follows:

• apple-touch-icon-144x144.png
• apple-touch-icon-114x114.png
• apple-touch-icon-72x72.png
• apple-touch-icon-57x57.png
• apple-touch-icon.png

Transparency Preserved

Transparency is preserved so transparent PNG or GIF source files result in transparent PNG Apple Launcher and favicon files.

Higher Resolution Multiple Format Favicon

iconifier.net creates fully valid ICO formatted favicon files with multiple embedded sizes of 16 x 16, 24 x 24, 32 x 32, 48 x 48 and 64 x 64 so that the optimum quality favicon will be displayed whichever web browser is being used.

A higher quality favicon is desirable especially with retina screens and now that many browers including IE9 are taking advantage of these.

Easy One Screen Operation

Upload the source image and click on "Iconify" and repeat as necessary. There's no need to go back to the start to re-run iconifier.net.

Easy Download

You can download the icons individually or all together in one easy ZIP file. The ZIP file includes a folder so that icons aren't strewn across your desktop or elsewhere when the file is expanded.

File Locations

Copy the Apple Launcher icons to the root folder of your website unless you are specifying alternative locations via your HTML code.

The favicon.ico is typically installed by copying the favicon.ico to the the root folder of your website although some exceptions are:

• On Joomla websites, copy the favicon.ico to your active template folder at /templates/[your_template_name].
• On WordPress websites you may need to upload the favicon.ico file to your current theme's main folder as well as your website root folder.
• On Drupal websites, navigate to the admin/build/themes/settings/[your_theme_name] page in the admin area of the site and choose the favicon.ico file in the 'Shortcut icon settings' section of the theme configuration page and upload the file. For more details, see the official Drupal favicon changing instructions.

This email address is being protected from spambots. You need JavaScript enabled to view it. if you have other exceptions you think should be listed here.

Thanks

I'm very grateful to Chris Jean for sharing his excellent PHP-ICO tool which can now be found on GitHub. PHP-ICO enables favicon files to be created with PHP and the GD library only.