Yesterday, I showed you how to add bookmark icons on your iPhone‘s home screen. Today, I am going to show you how I added support for custom icons on Search Engine Roundtable and RustyBrick.

As per the iPhone Developer Center, it is very simple.

Step 1: Create custom icons that are 57×57 and save them as PNG files. They can be larger, but Apple will scale them for you.

Step 2: Rename the file to apple-touch-icon.png

Step 3: Upload them to your root directory on your server.

STOP – what if you don’t have access to your root directory? Well, you can add a <link> element similar to <link rel=”apple-touch-icon” href=”/customIcon.png”/> within the <head> element of the page.

Then you go to your site and follow my directions on how to add bookmark icons on your iPhone.

Here are the three I added:
Cartoon Barry Apple iPhone Icon Search Engine Roundtable Apple iPhone Icon RustyBrick Apple iPhone Icon

Here is what it looks like on my iPhone:

iPhone WebClip Bookmark Icons

Pretty slick, don’t you think?

OK, I am obsessed this week with the iPhone – sorry.

Website Comments

  1. Betty
    Reply

    > Step 2:
    > Rename the file to apple-touch-icon.png

    You can name them to anything you want.
    You do NOT have to name them this.

  2. gilfd
    Reply

    hey you you are so professional about that ha , you tell to everyone to follow your step by step ha, you are so do a good job ha ,, ok why don’t you tell everyone living in a round country go to hell it better,,,,,, look what you been toll them Upload them to your root directory on your server. do you thinks they’re know that too?!! like me… what server what root directory what links ha ? what about if i tell you to go on freeway and get off the next 5th exit ..do you thinks you know how to get there too ha?! come on wakeup would you! thanks milloin times to toll to everyone like me ok… thinking about that ?please next time if you’re so do a very good job just tell to everyone to understand to ok ….here make sure tell to everyone use the prog name too ok. not just go to server , root directory, link

  3. Jon
    Reply

    I’ve been able to change the icons but the sites that have a default icon replace mine. I like mine better. How can I keep my icon over the website’s?

  4. Chogyel
    Reply

    Hi. I m using iPhone 2g n I m facing problem. I cannot see camera and calender icons on my phone. So can u tell me the solution from where can I restore back on my desktop

  5. sivan
    Reply

    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?

  6. Anne
    Reply

    We want to create two different icons for different pages on our website. Since we must name the image “apple-touch-icon.png” how can we differentiate which one to use for which page or can we only have one icon for the entire website?

Post a comment