Papermashup

Subscribe


Tweets


"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 3 days ago

"RT @lalpra: Galaxy Note 7 Unboxing https://t.co/FM8gZmqpBK"

@ashleyford 5 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Give your site an iPhone bookmark icon

AshleyAshley

I recently configured my site for mobile consumption, by using the WordPress Mobile Edition plugin along with the Carrington Mobile 1.0.2 theme. I noticed when I bookmarked my site using the iPhone that the home screen icon as missing. Today I’m going to run through how to create and setup the home icon for your website.

Create the icon

You will need to produce an image in PNG format that:

The Code

This part is extremely easy. there are two options, if you have access to your root directory (usually where your index.html file is kept) you can save your icon as apple-touch-icon-precomposed.png and the iphone or ipod will do the rest.

Or you can add a line of meta code to the head of your page which specifies the link to your icon.

Glossy icon:


<link rel="apple-touch-icon" href="/images/iphone_icon.png" />

Non glossy icon:


<link rel="apple-touch-icon-precomposed" href="/images/iphone_icon.png" />

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 28
  • Mishkat Islam
    Posted on

    Mishkat Islam Mishkat Islam

    Reply Author

    Nice Icon… For iPhone Thanks for sharing this


  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    wow ! great collections of iphone bookmark icon ..thanks


  • SAM
    Posted on

    SAM SAM

    Reply Author

    Great effort ..Thank you for sharing


  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    nice iphone icon for any site ..thanks for sharing with us


  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    Many many thanks for your nice post. this is really very helpful


  • Moniruzzaman Monir
    Posted on

    Moniruzzaman Monir Moniruzzaman Monir

    Reply Author

    Really awesome collection. Thanks


  • Hossain
    Posted on

    Hossain Hossain

    Reply Author

    I saw them, They are really looking too nice….


  • Cpo Experts
    Posted on

    Cpo Experts Cpo Experts

    Reply Author

    wow great


  • Creative Clipping Path
    Posted on

    Creative Clipping Path Creative Clipping Path

    Reply Author

    Awesome collection!!!


  • Md Razaul Karim
    Posted on

    Md Razaul Karim Md Razaul Karim

    Reply Author

    Good looking icon………thanks for your creativity…….


  • Sumon Chowdhury
    Posted on

    Sumon Chowdhury Sumon Chowdhury

    Reply Author

    Very nice icon for iphone……..


  • hasan
    Posted on

    hasan hasan

    Reply Author

    Nice icon…thank u very much..


  • Alex
    Posted on

    Alex Alex

    Reply Author

    Wow, that was easy :) Never thought iOS will recognize files based on it’s file name. Thanks, awesome tutorial and very up to date.


  • RezaK
    Posted on

    RezaK RezaK

    Reply Author

    Issue RESOLVED !

    Since WPtouch plugin was active, it was overwriting the “apple-touch-icon-precomposed.png” file.
    Image in WPtouch control panel was of the incorrect resolution! Once replaced, issue was fixed.


  • RezaK
    Posted on

    RezaK RezaK

    Reply Author

    Hi,

    I am quite familiar with both of these but I’m having an issue you might be able to shed some light on… regarding the iPhone shortcut icon.

    FYI … I’m using the SAME “apple-touch-icon-precomposed.png” file in BOTH websites as a test.

    Website A: (www.rkadia.net) the file is in the root directory and nothing else is on the domain, so simply in stand-by. The shortcut looks perfect and hi-res on the iphone.

    Website B: (www.rezak.com) This is a WordPress based website. The file is again in the root directory and as a back-up, it is also being called up by the code. HOWEVER, for this one, the bookmark icon is degraded in quality ! No idea why or how. I have even taken a screenshot of the iphone with both icons next to each other and it is very apparent.

    Any idea what is going on?

    Many thanks. (Feel free to contact me directly)

    Reza


  • Asikur Rhaman Reko
    Posted on

    Asikur Rhaman Reko Asikur Rhaman Reko

    Reply Author

    In a single word, this is very nice posting.
    thanks to share….


  • software development in nederland
    Posted on

    software development in nederland software development in nederland

    Reply Author

    That is nice collection.


  • lifestyle photography in miami
    Posted on

    lifestyle photography in miami lifestyle photography in miami

    Reply Author

    Thanks for sharing iPhone bookmark icon.


  • tour and transportation services
    Posted on

    tour and transportation services tour and transportation services

    Reply Author

    nice,
    i loved this …


  • Globalweb Outsourcing
    Posted on

    Globalweb Outsourcing Globalweb Outsourcing

    Reply Author

    Thanks for showing me a new think…………it;s works.


  • Web Designe in Bangladesh
    Posted on

    Web Designe in Bangladesh Web Designe in Bangladesh

    Reply Author

    Well, that’s a great scheme to create and setup the home icon for our website. I really enjoy this site .


  • Md.Saiful Alam
    Posted on

    Md.Saiful Alam Md.Saiful Alam

    Reply Author

    Thanks for showing iPhone bookmark icon. Fine!!!


  • Rokaiya Yeasmin Munni
    Posted on

    Rokaiya Yeasmin Munni Rokaiya Yeasmin Munni

    Reply Author

    Well, that’s a great scheme to create and setup the home icon for our website.


  • Al Kamal Md. Razib
    Posted on

    Al Kamal Md. Razib Al Kamal Md. Razib

    Reply Author

    This is a great icon! Thanks for sharing this. :)


  • Kev Guy
    Posted on

    Kev Guy Kev Guy

    Reply Author

    This is great, followed your tutorial and it works a treat!


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @kev, I’m sure we’ve met before 😉


  • Romantisk Weekend
    Posted on

    Romantisk Weekend Romantisk Weekend

    Reply Author

    Cool, definitely need to do that, even though I’m guessing most visitors to my site use a regular computer. :-)