Scroll to top
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.
You will need to produce an image in PNG format that:
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" />
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 says: 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 says: 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
Well, that’s a great scheme to create and setup the home icon for our website. I really enjoy this site .
Well, that’s a great scheme to create and setup the home icon for our website.
Pingback: uberVU - social comments
Cool, definitely need to do that, even though I’m guessing most visitors to my site use a regular computer.
Designer and web developer, Co-founder and Technical Director at Harkable.com London. Previously I worked at InMobi, Spotify and MySpace. Interests include photography and making short videos. Also an avid F1 fan.
Follow us on Twitter and get in-stream updates.
Subscribe to all the Papermashup tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.
16 discussions around Give your site an iPhone bookmark icon