HOW TO Make A Custom iPhone Icon for Your Blog

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.

  • http://cyberjunkeez.org Priyanka

    Cool stuff for iPhone users!!

    • http://www.blogotechblog.com Lalit Indoria

      For Bloggers too ;)

  • http://www.blognostics.net Jessica Brant

    Lalit,

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

  • http://www.geekspalace.com/ Ifham khan

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

    • http://www.blogotechblog.com Lalit Indoria

      It works only for iPhone

    • http://funkchoppers.blogspot.com sLEAZEFUNK

      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

    • http://www.blogotechblog.com Lalit Indoria

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

  • http://humortechblog.com/ Sahl @HumorTechBlog

    Thanks man , gonna try this asap :)

  • http://travelwisconsin.us Alice Santos

    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/

    • http://www.blogotechblog.com Lalit Indoria

      That’s cool and easy :) Thanks Sergio