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 3GS.

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 120×120 pixels, but you could choose other sizes
  • 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:

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.

Enjoy this tip? Subscribe to the OSXDaily newsletter to get more of our great Apple tips, tricks, and important news delivered to your inbox! Enter your email address below:

Related articles:

Posted by: William Pearson in Development

9 Comments

» Comments RSS Feed

  1. sam says:

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

  2. Ian says:

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

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

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

  6. [...] 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 [...]

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

Leave a Reply

 

Shop for Apple & Mac Deals on Amazon.com

Subscribe to OSXDaily

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