In my previous post about making an iPhone-friendly website, I talked a bit about the growing popularity of the iPhone and iPod Touch in regards to surfing the web. Just like any other browser, you can bookmark your favorite sites, but on the iPhone and iPod Touch, you can save bookmarks to the Home screen as well.
When a bookmark is saved to the Home screen, the iPhone or iPod makes an icon for it. By default, it will use a snapshot of the web page. But what if you want your visitors to see a custom icon instead of a micro-view of your blog?
Here’s what you need to do:
- Create a PNG image that’s 57×57 pixels. Ideally, this would be the same as your favicon or your site logo if you have one.
- Save the image with the filename apple-touch-icon.png
- Upload this image to the root directory of your blog.
That’s it. Now when readers bookmark your site to their Home screen, they’ll have a shiny, eye-catching icon. Go ahead, try it with this site. Even if you don’t have an iPhone or iPod Touch yourself, it doesn’t take much effort to offer an extra bell/whistle to those that do.
“But Chris, what if I don’t have the ability to upload to the root directory?”
Good question, Chris. If you’re hosting your blog on Blogspot, for example, there’s another way to do this.
- Create your icon as mentioned above.
- Upload the icon to your favorite image hosting service – Flickr, Photobucket, or TinyPic for example.
- Go to Edit Template – how you do this will vary depending on your host – and insert the following code between the <head></head> tags:
<link rel="apple-touch-icon" href="http://www.location.of/your-image.png"></link>
Please note that in the Blogspot example, the filename of the image doesn’t matter; the rel="apple-touch-icon" attribute tells the iPhone or iPod Touch what to look for.
Also note that if you’re using the WPTouch addon to create an iPhone-friendly version of your Wordpress blog, then you don’t need to worry about any of this. Choosing an icon for the “Logo & Home Screen Bookmark Icon” in the plugin’s settings will take care of this for you.
I love tech, but don’t have as much time or money to spend on it as I’d like. I get what I need to sustain my Geek vicariously through other sources and pass it along to you.
