Add an iPhone Favicon to your Website
Thursday, July 23, 2009 at 7:38AM | Print Article The iPhone is the number one device for mobile Internet browsing. One unique feature of the iPhone is the ability to create home screen bookmarks for easy access to your favourite websites. If you have done this you will notice the "better" websites use a custom iPhone favicon (favorites icon) instead of just showing a screenshot of the website. This little touch makes the website feel more professional and makes it more likely for people to keep a bookmark for your site on their iPhone home screen.
Thankfully to enable this feature it is incredibly simple:
Create a ".PNG" image that is 57x57 pixels. Add your websites logo/branding to the image and save it as "apple-touch-icon.png". Don't worry about adding reflection to your image as the iPhone will do that for you.
Once complete upload the image to your server and add the following line to your websites "<head>".
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />You will need to change the "href" to point to the location of your iPhone favicon.
Thats it, now go and add a new home screen bookmark on your iPhone and you will see your new favicon. If it does not appear first time you may need to clear your iPhones browser cache which can be done from "Settings > Safari".