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.
Things You'll Need
- Your Logo in Square Format
- Graphics Software
- FTP Program to Upload Icon
- Basic HTML skills
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.
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.
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
- Photo Credit Mike Valentine
How to Create an Icon on the iPhone
Creating an icon for your iPhone application is a simple and fun project that allows you to show off your creativity to...
How to Customize iPhone Icons
The iPhone is one of the most popular phones currently on the market. An "icon" is a small graphic on the iPhone...
How to Change Icons on an iPhone
The Apple iPhone has many features, such as a touch screen, 3G Internet capabilities and the ability to run applications. Applications are...
How to Operate an iPhone
The Apple iPhone is sold exclusively for the AT&T 3G mobile network. The iPhone works similarly to the iPod Touch with the...
How to Create a Logo Icon
After you've gone through the marketing and design process to create your logo -- a graphic image used to represent and brand...
How to Hide the Carrier Logo on an iPhone
If you have an iPod or an iPhone, you'll notice that the carrier logo is part of the display. For those who...