Set “apple-touch-icon.png” to Customize a Websites iPhone Bookmark FavIcon

Feb 9, 2011 - 9 Comments

custom-bookmark-homescreen-icon

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):

OSXDaily iOS Bookmark Icon

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.

.

Related articles:

Posted by: William Pearson in Development

9 Comments

» Comments RSS Feed

  1. […] 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 […]

  2. […] 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 […]

  3. […] 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 […]

  4. sivan says:

    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?

  5. […] 記事元: Set “apple-touch-icon.png” to Customize a Websites iPhone Bookmark FavIcon. […]

  6. Ian says:

    You can also use apple-touch-icon-precomposed.png to vet rid of the glossy effect that iOS adds.

  7. sam says:

    I had no idea you could do this, good to know

Leave a Reply

 

Shop on Amazon.com and help support OSXDaily!

Subscribe to OSXDaily

Subscribe to RSS Subscribe to Twitter Feed Follow on Facebook Subscribe to eMail Updates

Tips & Tricks

News

iPhone / iPad

Mac

Troubleshooting

Shop on Amazon to help support this site