If you are using an iPhone, you must be knowing that when you save a bookmark on the Homescreen, the iPhone makes an icon of the last visited page from that site. This is by default that the iPhone uses the snapshot of the last visited page as the icon for the bookmark. But if you are a Blogger, you might want your visitors to see a custom icon instead of the screenshot, perhaps your Blog’s icon 🙂 It can be done by a simple trick both for WordPress and Blogspot platforms.
WordPress
- If you don’t have a favicon for you Blog (rare case) you need to create a 57*57 pixels icon.
- Save it with file name apple-touch-icon.png
- Upload it to the root directory of your Blog. The image you have uploaded will be used as the icon for the Bookmark on the iPhone home screen.
Blogspot
- Create the icon and save it with any name you want to as it does not matter for Blogspot platform.
- Upload the icon to any free image hosting services like imgur.com or tinypic.com
- Go to Edit Template and insert the following code between <head> and </head> tags:
<link rel="apple-touch-icon" href="http://www.location.of/your-image.png"></link>
The rel=”apple touch icon” matters instead of the file name in Blogspot Platform.
This is how the Bookmark looks for BlogTech.
If you are using the WPTouch plugin for WordPress, you don’t need to try this as the plugin takes care of the icon.