January 15, 2008
The new Favicons: Making Webclip icons for iPhone
As is usual on any day when Apple has a MacWorld keynote speech, everybody's been focused on the new hardware and software that's launched. But there's another new little detail for web developers to keep track of, too -- webclip icons.
Webclip icons are a lot like favicons, but instead of showing up in your browser's address bar or bookmarks, they show up as custom icons on the homepage of an iPhone or iPod touch when someone adds your site to their device's homepage.
The good news, is, long-time MT community member Dan Dickinson has done the homework of how to make these new icons. The basic steps are pretty easy:
* Create a 45x45 PNG. * Name it "apple-touch-icon.png" * Throw it in the root folder of your website. (Not the root of your server, the root of your web documents.)Dan then goes into more details on how to use a
link tag for more customization, as well as details about the optimal image sizes to use. There's also a hat tip to ProNet member Neil Epstein, tech director for the formidable MT-powered publishing efforts at Gothamist, for chipping in with more info on how to get your webclip icons perfected.
13 Comments
Apple says the PNGs should be 57x57. 158x158 seems to produce a better result, however.
Yeah, Dan's post actually says 57x57, too, but there are conflicting reports about what sizes scale best in actual production without clipping. So perhaps the best answer is trial and error.
So the big question is how can I get my webclip icon to work with my typepad blog? I've tried getting an answer via Typepad's ticket system but they don't seem to really know.
I'd like to know exactly where to put the icon in my typepad file structure. I uploaded it in my main directory but that didn't work. I added a link tag within my index file head element as suggested by Typepad's tech support ( but that didn't help either.
Thx.
PS I've created a number of these clips for various sites and 158x158 px seems to work very well.
from a graphics angle, it appears that Apple crops off 1 pixel on the left and right and 3 pixels at the bottom of the 57x57 PNG graphic. i made a PSD template with an overlay you can download if it helps:
http://www.iphoneminds.com
Monkey thanks for sharing with link to iphoneminds theres a lot of helpful stuff. Regards
i think you are very cool and careful ;)
Thank you, its god for my sites ;)
www.placestravel.com
www.buyukoturak.com
www.selmankara.com
iphone, youpay ;)
I have been looking forward to usigg these ever since i got my iPhone last month. Thanks for teh passing along the know how.
Probably one of the best things yet for the iphone this year that I have found, thanks!
I am loving the favicon for the iPhones, it truly enhances the whole PDA type experience. Sometime I wish there were more options like my sign is cancer I think it would be awesome to have a favicon such as this.
Thank you, its god for my sites ;)
http://devuelosbaratos.es
Brilliant stuff.This would be of great use to my Iphone.
dr suzanne gudakunst || Porsche Jobs