Set “apple-touch-icon.png” to Customize a Websites iPhone Bookmark FavIcon
If you have a website of your own or are developing one for someone else, you should customize the saved bookmark icon that appears on a users iOS home screen. In the screenshot above you’ll see the custom OSXDaily favicon sitting on the screen of an iPhone.
Setting the Apple Touch Icon is a good idea because by default iOS will just save a small thumbnail of the site. The small thumbnails are often hard to identify and generally don’t look that great, so let’s set your own favicon image instead.
How to Customize and Set an Apple Touch Icon for a Website
- Create the icon, make sure it is a square, the one here on OSXDaily.com is 512×512 pixels, but you could choose other square sizes if you really want to – note larger is appropriate for retina displays
- Save the homescreen icon as a PNG file and label it: apple-touch-icon.png
- Drop apple-touch-icon.png into the root webserver directory, so it can be accessed at domain.com/apple-touch-icon.png
- Test your websites homescreen bookmark icon by visiting the site from Safari in iOS, and then tapping on “Add to Home Screen”
- Look at the iOS device homescreen and you’ll see the bookmark saved there with your new custom icon, like the screenshot above
As long as the file is properly named and in the webservers root directory, Mobile Safari will know what to do with it so there is no further adjustment needed to get the iOS specific favicon to show up.
For reference, here is our custom ‘apple-touch-icon.png’ image that we use for OSXDaily.com, this example bookmark icon is created and sized appropriately for retina displays (learn more about retina bookmark icon creation here):
You’ll notice that the actual icon file does not have the light refraction saved onto the icon, iOS handles this on it’s own. You can use any image you want, but I’d recommend creating one that captures the familiar UI of existing iOS icons.
This obviously isn’t the same as having a dedicated iOS app, but a decent mobile user experience from the web is a good idea and it avoids what can be the high price of developing an iOS app.
And hey, if you’re concerned about stuff like this, you probably use Photoshop to at least design the icons right? So check out some tips to speed up Photoshop while you’re at it.
[…] they’d like to prompt users to download that app. For those with websites and without apps, setting the Apple Touch Icon is equally as important, since that controls what a user sees when bookmarking a website to their […]
[…] you were wondering, the icon used by Safari’s home screen bookmarks, known as an Apple Touch Icon, can be customized by any web developer on a per site basis rather easily. If a web developer […]
[…] will be useful even for web designers and developers who want to use it as a template for the apple-touch-icon.png iOS bookmark icon that appears on a Home screen whenever an individual bookmarks a […]
I put the file with right name for 2 of my sites.
for the first one it work perfectly. but for the second site it didn’t work at all.
my second site id running under SharePoint.
do you know what could be the problem?
[…] 記事元: Set “apple-touch-icon.png” to Customize a Websites iPhone Bookmark FavIcon. […]
You can also use apple-touch-icon-precomposed.png to vet rid of the glossy effect that iOS adds.
I approve of this informative message.
EXACTLY what i was after. thank you so much!
I had no idea you could do this, good to know