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.