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.
