Top

Categories

Archives

Twitter

Bookmarks

Support

Adium Boxee BBEdit Coda Alfred HandBrake ScreenFlow Caffeine Moom Evernote Pixelmator SecureFiles TextWrangler Transmit Shimo RapidWeaver VLC Dropbox Steam Spotify Acorn VMware Fusion Unison

« Windows 7 Upgrade Options | Main | Cisco Router Password Recovery »
Thursday
Jul232009

Add an iPhone Favicon to your Website

DateThursday, July 23, 2009 at 7:38AM | Print ArticlePrint 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".

tagged , in , |

References (2)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    Response: Creating an iPad icon for your website
    at Ley'ing it Out on November 12, 2010
    I’ve been trying for some time now to spruce up this site to make it a little more graphical and catchy.  One thing that I have wanted to sort is the creation of an official icon that will be used by Apple products when someone created a shortcut...
  • Response
    Response: Creating an iPad icon for your website
    at Ley'ing it Out on November 12, 2010
    I’ve been trying for some time now to spruce up this site to make it a little more graphical and catchy.  One thing that I have wanted to sort is the creation of an official icon that will be used by Apple products when someone created a shortcut...

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Notify me of follow-up comments via email.