Note: If this is too technical for your taste, forward the article to your designer or webmaster. Adding an iPhone-friendly icon isn’t a huge marketing priority, but it’s a nice branding touch for people who visit your website on a mobile device. At minimum, your site should have a favicon file for desktop-based bookmarking.
I review my website server logs occasionally for 404 errors, since I want to know what people aren’t finding — so I can set up 301 redirects using the excellent Redirection plugin in WordPress so people don’t get the error in the future. Last week, I noticed a lot of 404 (file not found) requests for “apple-touch-icon.png.” I’d never heard of it before.
Turns out the “apple-touch-icon” file is like a newer version of the favicon (the tiny graphic next to the URL in the location bar that also appears in your bookmark list when you add a site to your favorites).
A visitor requests “apple-touch-icon.png” when s/he adds your site as a bookmark on the home screen of their iPhone or related Apple device. If you have one, they’ll get a nice site-branded graphic, instead of a generic icon. Ultimately, you need to create a 57×57 pixel PNG file in the root directory of your website.
This is a good thing, considering someone cares enough to bookmark your site on their mobile device. If you don’t have access to your root directory, there are a few HTML header workarounds. Sadly, this addition doesn’t do anything special on my Android-based phone (Apple design, +1 point).
For a how-to on adding an “apple-touch-icon.png” file to your website, check out these tutorials:
- How to create a custom Apple iPhone icon for your Web site, by Ask Dave Taylor
- Apple Touch Icon, from Phonydev.com
- How To Set an Apple Touch Icon for Any Site, from All in the Head
Have you created a favicon.ico and/or an apple-touch-icon.png for your website?