Making an iPhone/iPod Touch Webclips Favicon

Tagged Tutorials by Brent on January 23rd, 2008

Here’s a pretty easy one. The newest release of the iPhone firmware brings us all sorts of fun and necessary updates. We can now create webclip icons on our home page from inside Safari. If you’re a design geek like me, a crappy snapshot of a website screen isn’t on my list of things I want to see as icons on my home screen. So Apple has given us a workaround.

Just like with browsers and favicons, your iPhone looks for a special image in the root of the site to use as a webclip icon. If it can’t find anything, you get a screenshot. Making the icon is a snap. All you need to do is create a PNG image that is 57×57 pixels in size and save it as “apple-touch-icon.png” in the root of your website. Here’s what mine looks like:

Additionally you can specify any image as your icon in your CSS (like you do with the favicon). Here’s the syntax:

<link rel="apple-touch-icon" href="/whatever.jpg"/>

Place that in your website code between your <head> tags and you’re golden. That’s it!

Now… I really want to see your icons, so if you don’t mind, post a link in the comments to your webclip icon so we can all see.

Alia

Jan 23rd 2008

I threw one together, because it seemed like a good way not to read for Chinese Business Law. Mine is:

http://www.alialuria.com/apple-touch-icon.png

The edges of the name gets cut off though, so I’ll probably end up editing it later.

Brent

Yeah, I forgot to mention that, sorry. Nice icon though! Thanks!

Cheryl Colan

Here is mine (if your comments allow the html to display an image):

And if not then here is the link: http://www.hummingcrow.com/apple-touch-icon.png

I don’t have an iPod Touch or iPhone at my disposal - please tell me if I need to make my text a bit smaller to avoid the name being cut off at the edges.