With a lot of websites now, people are attaching them to their home screen, so it’s effectively a web app. I was struggling to find a definitive guide, so here’s my own.
I created 4 files:
- apple-touch-icon-57×57.png
- apple-touch-icon-72×72.png
- apple-touch-icon-114×114.png
- apple-touch-icon.png (150×150 pixels, this is the fall-back icon)
Now, adding these files to the root of your directory will work just fine, you can go a bit further if you like though. Different devices will look for different file names by default, depending on the size of the display usually. As a guide:
- iPad: 72x72px
- iPhone 4 onwards: 114x114px
- iPhone 3GS and lower: 57x57px
Also, if you want to move the images to say a sub folder, or name them differently then you will have to put this in your webpage:
|
1 2 3 |
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/img/icons/apple-touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/img/icons/apple-touch-icon-iphone4.png" /> |
There’s more. Apple devices can take the standard square logos (in the gallery above) and make them look a bit more funky with the rounded edges and lighting effects etc. I opted to use the standard icons and let apple do the work, but you can if you like, apply your own effects to your icons. The order in which a device will look for icons is as follows (example shown is for iPhone 3GS, 57x57px):
- apple-touch-icon-57×57-precomposed.png
- apple-touch-icon-57×57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
So, it will search for the file name that has ‘precomposed’ first of all, this is one that has its own effects pre-applied. If it can’t find this, it will look for the regular 57x47px icon. Failing this it looks for the precomposed fall-back icon and failing that it will fall-back to the regular icon.
As more devices come out and the resolutions get higher, this may all change, but I believe it’s correct right now. There is more still however.
That almost covers Apple devices, and the apple-touch-icon.png file should also be used for Android devices.
There are also a few extra tags you can add for Apple devices:
Show/hide status bar on startup:
|
1 |
<meta name="apple-mobile-web-app-capable" content="yes" /> |
Change the color of the browser’s status bar:
|
1 |
<meta name="apple-mobile-web-app-status-bar-style" content="white" /> |
You can go a stage further and display a customised loading screen, again though you will need to specify different files depending on the device being used.
- Default-Portrait.png * (768x1004px)
- Default-PortraitUpsideDown.png (768x1004px)
- Default-Landscape.png **(1024x748px)
- Default-LandscapeLeft.png (1024x748px)
- Default-LandscapeRight.png (1024x748px)
- Default.png (320x460px)
(These file names are all case sensitive)
* If you have not specified a Default-PortraitUpsideDown.png file, this file will take precedence.
** If you have not specified a Default-LandscapeLet.png or Default-LandscapeRight.png image file, this file will take precedence.
Note that the status bar is 20px high, this is reflected above. You will have to change your images accordingly, depending on whether or not you have hidden the status bar.