Filed under: Cool tools, Odds and ends, TUAW Business, WIN Business, Developer
Where's the WebClip icon?
We've gotten a plethora of tips asking that we make a WebClip icon for iPhone & iPod touch home pages for TUAW. And we hear you. In fact, one sleep-deprived Macworld-covering TUAW blogger created a webclip icon (pre-empting all the tips -- which we're eternally grateful for nonetheless). As our server gurus get the icon fixed in place, we thought we'd share with you some handy links both for making icons for your own site, and perhaps to find one for TUAW in the meantime.
Waiting for a website to gain a WebClip icon? There's a load of sites available to either help you find an icon that's already been made -- such as WebClipMe! or the WebClip directory. clipalizer goes one better, allowing you to upload your own (correctly sized) PNG image and then use that as a webclip icon.
So how do I create my own WebClip icon? A WebClip icon is basically a 57-pixel-square PNG image called apple-touch-icon.png placed at the root of your server's web-content directory (though the Apple Developer Connection site lists a way that code-savvy users can specify a custom location for it, should they so choose). Whilst the icons appear rounded on the iPhone, you don't need to worry about creating curved corners, or even apply a button-esque mask in Photoshop: iPhone takes care of all of that -- "Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application."
Thanks to all those who sent us pleading emails!
Waiting for a website to gain a WebClip icon? There's a load of sites available to either help you find an icon that's already been made -- such as WebClipMe! or the WebClip directory. clipalizer goes one better, allowing you to upload your own (correctly sized) PNG image and then use that as a webclip icon.
So how do I create my own WebClip icon? A WebClip icon is basically a 57-pixel-square PNG image called apple-touch-icon.png placed at the root of your server's web-content directory (though the Apple Developer Connection site lists a way that code-savvy users can specify a custom location for it, should they so choose). Whilst the icons appear rounded on the iPhone, you don't need to worry about creating curved corners, or even apply a button-esque mask in Photoshop: iPhone takes care of all of that -- "Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application."
Thanks to all those who sent us pleading emails!
![TUAW [Cafepress]](http://www.blogsmithmedia.com/www.tuaw.com/media/tuaw-cafepress-promo.png)
Reader Comments (Page 1 of 1)
Peter Zich said 8:09PM on 1-22-2008
You can use my script too: http://pz2.ucls.uchicago.edu/webclipIcons.js
Reply
Mike Keen said 8:27PM on 1-22-2008
Try http://hsicon.com/
Reply
Peter Zich said 8:36PM on 1-22-2008
Beautiful site, but I still dislike all the refresh stuff, but most people seem fine with it.
ironknee said 8:51PM on 1-22-2008
can i post my site here for people to test my icon?
Reply
cualexander said 9:29PM on 1-22-2008
Easiest way to get custom icons to appear on your home screen without doing the whole refresh thing.
1.) Make an icon that is 57x57 and save as a PNG. I use Preview on Mac and its really easy for cropping existing jpgs and saving them to PNG.
2.) Get a googlepages site. Really easy, if you have a gmail address you have one. Goto www.googlepages.com and login.
3.) Upload created PNG to the googlepages and make it a short name so the address will be x.googlepages.com/bd.png. Its really easy to upload files to googlepages.
4.) Save the javascript above to a bookmark and sync to Iphone. If you click on it, you will see detailed instructions.
5.) Visit your favorite site, click on the javascript bookmark you made, and type in the address to your googlepages account.
6.) Click + Button to Add to Home Screen.
Voila. No more refresh lag. You have a custom icon that actually points to the real site.
Reply
Corey said 9:34PM on 1-22-2008
Wasn't it decided that 59x59 was a better size?
Reply
pegler said 9:41PM on 1-22-2008
the article is wrong. WebClip Directory also allows for image uploads. It even converts gif and jpg to png format and has a cropper online to crop large images down to size.
Reply
cb said 11:09PM on 1-22-2008
how do you change a file size to 57x57 once you have the picture?????
Reply
Fritz Laurel said 1:34AM on 1-23-2008
Use something like Photoshop or Pixelmator to change the image's size.
Michael Rose said 8:56AM on 1-23-2008
Or ImageWell (it's free).
Bill said 12:18AM on 1-23-2008
any idea how to get this to work on .mac pages? I tried uploading the image to the root of my idisk and then the web directory and then the site directory inside the web directory.... blah blah blah...
Has anyone been successful?
Reply
Fritz Laurel said 1:33AM on 1-23-2008
You have to add the "link ..." tag to the head of the web page.
See Apple's iPhone dev page for more:http://developer.apple.com/iphone/devcenter/designingcontent.html
Bill said 1:48AM on 1-23-2008
Replying to myself...
I found this link.
http://discussions.apple.com/thread.jspa?threadID=1350127&tstart=0
Fritz Laurel said 1:28AM on 1-23-2008
I created my own TUAW webclip icon last week (seems like 10 years ago -- geez, TUAW, you're sooooo slow) and implanted it with a modified version of Peter's script (listed above). Looks great on my iPhone.
Here's a link to the icon I made if anyone wants it:
http://www.dyspersion.com/misc/clippngs/tuaw.png
Cheers,
FL
Reply
Michael Rose said 8:57AM on 1-23-2008
Fritz, in fairness, Nik was all over this and actually created the webclip icon within hours of the keynote (all while shooting pictures and writing posts from the Macworld show floor). Since then we've been working with our infrastructure team (who have a lot of other sites to support) to get the webclip icon where it needs to be to work properly.
Patrick Melton said 9:43AM on 1-23-2008
This works much better:
http://www.nobodylikesonions.com/clipclick
It allows the use of other image types, higher resolution images, and allows you to make use of other's webclips. This should be added to the original post as it's the best tool out there!
Reply
Steven C. Chang said 11:16AM on 1-23-2008
There is a nice implementation of a webclip icon at www.paulchangdesign.com
Works perfectly!
Reply
Steven C. Chang said 11:27AM on 1-23-2008
http://www.paulchang.com
Reply
Otsego_Undead said 12:25PM on 1-23-2008
So did i miss it, or is there no way to associate the webclip icon with the RSS feed (my preferred way to view sites)?
Reply
Sam said 12:55PM on 1-23-2008
APPLE-TOUCH-ICON.com
GREAT resource for sites that have an actual icon. Seems to be updated automatically and they let you add your own site to the listing.
Reply