HOW TO Make A Custom iPhone Icon for Your Blog

Author: | Posted in Apple, Blogger, How To, Wordpress 11 Comments

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

  1. If you don’t have a favicon for you Blog (rare case) you need to create a 57*57 pixels icon.
  2. Save it with file name apple-touch-icon.png
  3. 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

  1. Create the icon and save it with any name you want to as it does not matter for Blogspot platform.
  2. Upload the icon to any free image hosting services like imgur.com or tinypic.com
  3. 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.iphone bookmark BlogoTech

If you are using the WPTouch plugin for WordPress, you don’t need to try this as the plugin takes care of the icon.

  • Cool stuff for iPhone users!!

  • Lalit,

    Your post are nothing short of amazing… I am doing this one toooo.
    hehehe
    xoxox
    Jess

  • Hey good article I have a question does it works only for iphone??? or with other smartphones

    • It works only for iPhone

    • I cannot get it into thescript and it is not working, as you can see i am using blogspot.
      Please advice me on which line should i insert the

      Thanks

    • You can place the code between the closing head tag! Have you tested it on the iPhone?

  • Thanks man , gonna try this asap 🙂

  • Hi Lalit,
    thanks for the info you post here its really helpful.

  • Sergio

    Try my online iPhone/ipad generator at http://www.quirco.com/iPhoneIcon/