Minimalist solution – Recommended
A common practice is to create a single 180×180 icon, which is the highest expected resolution, and let the iOS devices scale it down as needed. It is declared with:
<link rel="apple-touch-icon" href="https://stackoverflow.com/path/to/apple-touch-icon.png">
Exhaustive solution – Not recommended
Apple specs specify new sizes for iOS7:
- 60×60
- 76×76
- 120×120
- 152×152
And also for iOS8:
- 180×180
In addition, precomposed icons are deprecated.
As a consequence, to support both new devices (running iOS7) and older (iOS6 and prior), the generic code is:
<link rel="apple-touch-icon" sizes="57x57" href="https://stackoverflow.com/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://stackoverflow.com/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://stackoverflow.com/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://stackoverflow.com/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://stackoverflow.com/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://stackoverflow.com/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://stackoverflow.com/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://stackoverflow.com/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="http://stackoverflow.com/apple-touch-icon-180x180.png">
In addition, you should create a 180×180 picture named apple-touch-icon.png.
Note that iOS looks for URL like /apple-touch-icon-76x76.png
, if it does not find interesting stuff in the HTML code (a bit like what IE is doing with /favicon.ico
). So it is important to keep the file names are they are above. It is also important to consider that Android/Chrome is also using these pictures.
You might want to know that this favicon generator can create all these pictures at once. Full disclosure: I’m the author of this site.