How to Create a Custom Logo iPhone Icon for Your Web Site

The iPhone represents the biggest chunk of mobile web traffic for most webmaster. So you’ll want to make it easier for iphone visitors to bookmark your site with a custom iPhone icon. If you don’t create a custom icon, the iphone will create a tiny screenshot of your home page instead, so a nice readable graphic will be better if you want users to recognize your site.

Let’s back up a step so those of you without iPhones will know why this matters. The iPhone allows site visitors to bookmark a page either by adding it to bookmarks in the Safari browser, or by placing an icon on the home screen which will act as a shortcut to your site. When someone clicks a + sign at the bottom center of their iPhone Safari web browser to bookmark a page on their iphone, they’ll see your custom icon instead of the miniature screenshot of your page. Here’s what it looks like on the iPhone when adding a bookmark.

Here’s a three step “How To” on creating and posting an iphone specific bookmark that will appear on the iPhone home screen when visitors bookmark your site and choose “Add to Home Screen” from the bookmark options presented by the iphone.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Your Logo in Square Format
• Graphics Software
• FTP Program to Upload Icon
• Basic HTML skills

1. 
    
   Tiny Screenshot of Home Page Created by iPhone

   Here is what the WebSite101 bookmark icon looked like when I let my iPhone create it for me. It’s not visually compelling and won’t help anyone to remember what they bookmarked. If you have an existing logo that can be adapted to a square 45X45 pixel icon, simply re-size the logo to fit the small square format using your favorite graphics program. I did mine by taking an existing Twitter Icon created for WebSite101 and reducing the size from 73 pixels square to the required 45 pixels.

2. 
    
   Adapted Logo in Square Format Required for iPhone Icon

   Here's my adapted logo to fit the square format required of iPhone icons. (I’ve added an outline so you can see the edges against the white background here.) Save the graphic in PNG format and name it “apple-touch-icon.png” and upload that graphic to the root of your site using an FTP program. The custom logo at left is much more likely to help visitors remember the site and what they bookmarked.

3. 
    
   Here's the iPhone Bookmark Screen as Users See Your Logo

   Now that you’ve uploaded the graphic icon representing your site, how do you get the iphone to recognize it and use your new version instead of that tiny screenshot? Add the following line of code to the < head > section of your pages.
   
   < link rel=”apple-touch-icon” href=”/apple-touch-icon.png” />

Tips & Warnings

• If the icon doesn't show up in your first test, try adding the domain name to the image path.
• If you want to store the iPhone icon in an image folder adjust the file path to reflect location

Resources

• iPhone Custom Logo Icon Tutorial