As per feedback from Seb Frost, I have added support for the 180x180 Apple Launcher Icon.
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 @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:
The updated list of required icons as far as I can tell is now as follows:
- apple-touch-icon-60x60.png *NEW* *
- apple-touch-icon-76x76.png *NEW*
- apple-touch-icon-120x120.png *NEW*
- 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.
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.
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.
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.
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.
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.