Have a Website? It’s Time to Add a WebClip Icon

February 5, 2008 | Posted in General Web Design |

WebClip Icons are strictly for iPhone & iPod Touch users, but since they are quite the popular little devices, website owners might want to think about adding a WebClip icon soon. A WebClip icon is the icon that the iPhone/iPod Touch uses if a user adds your site to their (now customizable) homescreen/s. I would expect that most people who would bookmark BittBox on the iPhone would just read the RSS feed, but as a site owner, I don’t want to leave anything to chance. I want my icon to look the way I want it to look, and not rely on the iPhone to do it for me. Think of it as a really big favicon.

Have a Website? It's Time to Add a Web Clip Icon

All you have to do to create your icon is make a 57 x 57px png icon, name it “apple-touch-icon.png” and place it in the root directory of your site. You don’t even need to worry about adding the glossy highlight or round corners, the iPhone does all that for you. Safari on the iPhone will now recognize your icon when a user adds your site to their homescreen. The image below is the icon in my root directory. Notice that it’s completely square, and has no reflection, compared to what you actually see on the phone (above).
Have a Website? It's Time to Add a Web Clip Icon

If you want to read more about WebClip icons, TUAW has a great post with some links to websites where you can make/submit your icons.


Related Posts:

  1. CssMenuMaker.com Giving Away an iPhone for Best User-Submitted Menu Design!
  2. Found Freebie: Function Icon Set
  3. Vectorstock Launches Re-Design, Adds “Free Vectors” Section
  4. BittBox iPhone Winner Announcement!
  5. Freelance Switch Calling Card Design Competition: $350 Worth of Vectors Up For Grabs
  6. Geek Freebie: iPhone-Inspired Photoshop Buttons

This entry was posted on Tuesday, February 5th, 2008 at 5:49 pm and is filed under General Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Stumble It
Add to Del.icio.us

Did you like this post?

Digging and sharing is a great way to say thanks!

30 Responses to “Have a Website? It’s Time to Add a WebClip Icon”

  1. Travis Feb 5, 08 at 6:40 pm

    Awesome, us Microshaft users would have never known. Thanks

  2. FuMan Feb 5, 08 at 8:13 pm

    The icon itself gets cropped a bit when the iPhone adds the glossy effect to your icon. So, you’ll want logos and text to fall within 47×47 pixels within the 57 pixels. Also scaling the icon a few pixels larger than 57×57 will increase its resolution a bit when the iPhone scales it back down.

    The ideal example to follow is Apple’s iPhone icon:

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

  3. Felix Feb 5, 08 at 9:37 pm

    Icanhascheeseburger.com…….possibly the funniest site out now….keep up the good work homey.

    Felix

  4. Boomstein - Absinthian Designer Feb 6, 08 at 12:33 am

    Thanks for the heads up! And thank you FuMan for the extra info concerning cropping. I always like to be prepared for new stuff :)

  5. Simone Magurno Feb 6, 08 at 1:31 am

    Interesting, i recently bought an iPhone, but never thought about optimizing my portfolio for mobile devices. Will add one soon!

  6. chad Feb 6, 08 at 8:03 am

    thats really cool. Things are getting so integrated into mobile now.

  7. JIRA: Sakai Feb 6, 08 at 8:12 am

    [SAK-12920] Add iPhone web clip icon to build…

    http://www.bittbox.com/general-web-design/have-a-website-its-time-to-add-a-webclip-icon/
    http://www.tuaw.com/2008/01/22/wheres-the-webclip-icon/
    null…

  8. Kristopher Feb 6, 08 at 8:38 am

    Awesome! I’m all over it!

  9. Jennifer Feb 6, 08 at 8:50 am

    That’s very cool. I’m creating a site for a client who’s bananas about social media so I might make her one of those for extra brownie points. Thank you.

  10. Richie Feb 6, 08 at 12:19 pm

    Very cool! I just tried it for my site to be albinotees.com and it worked! Now i think I will put a little notice on the site to notify iPhone users that they can bookmark it with the icon on their phone too.
    Got to love Apple.

  11. daddydoodaa Feb 6, 08 at 3:06 pm

    Thanks for the tip! I always enjoy Bittbox.

    It’s been added to my iPhone Homescreen.

  12. Boris Feb 6, 08 at 4:23 pm

    very interesting, thanks for a useful tip, i will add this to my web site. ^_^

  13. stefan.waidele.info » Webclip Icons für meine Apple-Freunde Feb 6, 08 at 5:41 pm

    [...] Apple umarmt und erweitert das Favicon-Konzept und führt das Apple-Touch Icon ein. Diese PNG-Datei sollte im Basisverzwichniss jeder Website unter dem Namen “/apple-touch-icon.png” erreichbar sein, und wird von Apple genutzte, wenn ein Icon für eine Webseite benötigt wird, so zum Beispiel im Web-Clip des iPhones. [...]

  14. Jason Feb 6, 08 at 7:19 pm

    Rock and Roll man. That’s awesome. Thanks.

  15. Russ L Feb 7, 08 at 2:12 pm

    Those that have an iPod touch, have you been pretty happy with it? Is the wi-fi email and internet pretty reliable? I’m looking to get one soon but wanted to see what you all thought, and if there is anything that I should keep in mind.

  16. Katie Feb 7, 08 at 3:15 pm

    That’s a great tip. I hadn’t even considered needing a fav icon for iPhones. Awesome and thanks.

  17. Guiwood Feb 11, 08 at 12:51 pm

    This is pretty sweet. Thanks for the heads up. I’ve already added it to my site!

  18. zack Feb 12, 08 at 11:43 am

    this is greatness… thanks for the tip! (how do you find this stuff?)

  19. Cristiano on Tech/Life » My Bookmarks For February 9th - February 14th Feb 15, 08 at 7:00 am

    [...] Have a Website? It?s Time to Add a WebClip Icon - Short tutorial on how to make a nice webclip icon for the iPhone/iPod touch [...]

  20. caner cancho Feb 24, 08 at 4:05 pm

    best pharma on-line
    darkmist.tut.su

  21. ::m Feb 26, 08 at 9:21 am

    That’s great - thanks!

  22. Kanal Açma Araçlari Mar 5, 08 at 7:07 am

    thanks for all things

  23. FirstName Mar 6, 08 at 5:51 am

    Best Pharma online

  24. Adolf Mar 6, 08 at 6:08 am

    Best Pharma online

  25. Kendrick Gates Mar 25, 08 at 3:28 pm

    cryptocarpous negrolike whewellite detacher stableward abaxile anthecology semisuburban
    Ampleo
    http://www.topix.com/city/fortson-ga

  26. Roger Bennett Apr 19, 08 at 10:48 am

    cryptocarpous negrolike whewellite detacher stableward abaxile anthecology semisuburban
    Usablity Glossary
    http://www.riveroaks.com/

  27. Windsor Exports Sep 4, 08 at 2:16 am

    Banjo Bolt, Nut Banjo Bolt, Check Nut, Auto Bolts, U Bolt, Auto Parts, Banjo Bolt Supplier, Exporter, Manufacturer, Traders, Banjo Bolt, Maker Banjo Bolt,Fasteners, Banjo Bolt India, Windsor Banjo Bolt

  28. Windsor Exports Sep 5, 08 at 2:23 am

    Manufacturer and Exporter of Hydraulic, Hydraulic tube, Hydraulic cover, Hydraulic systems, Hydraulic components.We are supplier of Nut bolt, screws, electric, Fasteners, Cylinder Hydraulic,Hydraulic piston.

  29. Windsor Exports Sep 9, 08 at 9:59 pm

    Manufacturer and Exporter of Linchpin, lynchpin, spring pin, split pin, dowel pin, bent arm pin, wire lock pin, double loop pin, cotter pin, s hook, table lock pin, washer, circlips, rivets, keys, steelballs, nut bolts, grease nipples from India.

  30. Micheal Sep 22, 08 at 5:22 am

    This is really cool. I’ll try to incorporate this webclip icon onto my websites today

    Regards
    forexfreedownload.com
    forextradingsysytemfree.info
    tanningbed-free.info

LEAVE A COMMENT




Message: