Get our posts emailed to you with our monthly newsletter, subscribe here.

When creating a website, it is more common then not now that we will add a custom favicon that will display in the browser tab alongside the website page title, this is fairly simple in fact only one line of code as below:

[php] <link rel="icon" href="/favicon.png" type="image/vnd.microsoft.icon" />
[/php]

What is becoming just as popular is to add a custom iPhone icon that will appear on your iPhone’s Home Screen. Again this is very straight forward with one line of code in between your header tags, as shown below:

[php] <link rel="apple-touch-icon" href="/iphone_icon.png"/>
[/php]

If you use an image of anything around 50px by 50px in size that will be, as the iPhone will resize and round off the corners for you on the fly. To add your site to your Home Screen, simply visit the webpage on your iPhone, then select the plus sign, followed by Add to Home Screen. You will get a prompt now and your icon should show, to finish, simply click add.

You will now be taken to your Home Screen where the icon should now be appearing. Here is the example below for Design Woop:

Now if your a picky sod like me, you will notice the horrible gloss effect that Apple adds to the icon by default. Until today I was using jQTouch to remove this until I came across this page on Apple.com which brought my attention to the additional -precomposed option. This stops mobile Safari adding any effects to the icon which is just what I was after! The line of code we use for this is now:

[php] <link rel="apple-touch-icon-precomposed" href="/iphone_icon.png"/>
[/php]

After refreshing the page and re-saving it to my iPhone Home Screen I was left with the much nicer…

I hope you agree with me but I think the no gloss icons are nicer!

Posted by Stu Greenham

Stu Greenham is a Web Designer / Developer who lives in Hull (North East England) and works for the web agency.

10 Comments

  1. Sweet, nice and easy. Much prefer the gloss though. Agree that it does suit the iPhone more. Looks like it belongs there.

  2. Thanks for this, most helpful :D

  3. cheers for posting this. just what i was after!

  4. OK, I have to ask… is your iPhone jailbroken with some sort of custom Springboard theme? The wooden shelves look pretty nice!

    1. Actually he has updated his iPhone to the latest firmware (4.0).
      In 4.0 you may choose what wallpaper to use (instead of the boooring black one).

  5. sweeeet..
    useful post… thanks!

    1. Thanks glad I could be of use :)

  6. Cool! Thanks!

    Though I prefer the glossy effect – seems more iPhone-ish lol.

    1. Lol I know what you mean! I just like my icons minus the gloss :)

Comments are closed.