FortySeven Media

Jonathan Longnecker

Jonathan Longnecker

January 16, 2008

Tutorials

Custom Webclip Icons for your iPhone or iPod Touch Home Screen

iPhone with 47m WebclipSo some of you may have heard about the iPhone, iPod Touch update yesterday that lets you add shortcuts on your home screen to webpages. My iPhone does a nice job of taking a screenshot of the page I’m on and making a pretty little icon that looks like my other icons on the home screen. But wait! I want my logo and not a tiny version of the whole page! Turns out it’s super simple to have your custom icon show up.

Ready? Make an icon that’s 158x158. Save it as “apple-touch-icon.png,” and put it in the root folder of your website. Wow that was easy.

But what if you need a different icon for a different directory on your server? Cameron Hunt has our quick fix. Put this line of code in your head tag:

<head>
  <link rel="apple-touch-icon" href="iphone.png"/>
</head>

Put the “iphone.png” file wherever you want and link to it!

Do keep in mind that the iPhone or iPod touch will automatically round the corners and give it the glassy overlay, and keep a few spare pixels around the edge as it seems to clip them. Also, the 158x158 size is because of the high resolution displays that Apple uses. When it gets scaled down, it looks nice and crisp like the factory set.

Thanks to Dan Dickinson and Playground Blues for their work.

Enjoy!

Share the Love

Branding, Attention and the Power of Video
We made 50% more last year

Want to know how? We'll show you in this series – packed with tons of entertaining videos, practical tips, useful worksheets and transcriptions.

Check it out!

Comments

  1. 1

    Mike Keen

    Jan 19, 2008

    We have built a simple service that makes it easy to customize your homescreen bookmark icons. http://hsicon.com/

    Quote Reply

  2. 2

    .(JavaScript must be enabled to view this email address)

    Jan 20, 2008

    Beautiful template!

    Quote Reply

  3. 3

    John

    Feb 08, 2008

    Great tip! Thanks for sharing!

    Quote Reply

  4. 4

    Berry Tree

    Mar 08, 2008

    Nice tip, I’ll definitly try it. Can you post some links where I can get icons for iphone?

    Quote Reply

  5. 5

    .(JavaScript must be enabled to view this email address)

    Apr 01, 2008

    Thanks for sharing. Nice tip on making a custom icon.

    Quote Reply

  6. 6

    .(JavaScript must be enabled to view this email address)

    May 08, 2008

    well…this is a nice tips.
    I can now brag to my friends about my funny and unusual icons.

    I’ll definite going to try this.

    Quote Reply

  7. 7

    .(JavaScript must be enabled to view this email address)

    May 14, 2008

    This comment was smacked down by the Iron Fisted Spam Punisher here at FortySeven Media. He delights in keeping this blog spam free!

    Please enjoy this haiku instead:

    With an Iron Fist
    All Spam Is Thusly Smitten
    Word To Your Mother

    Quote Reply

  8. 8

    Adam

    May 20, 2008

    Thanks for the great tip.  I use my iPhone to check on my website all the time.  Now it’s one button access and the icon looks great on my iPhone.

    Quote Reply

  9. 9

    iphone downloads

    Jun 04, 2008

    thanks for this tip! im going to make an icon for my iphonesite. maybe a rat will be cool! anyway, i dont think anyguy will place the icon on their iphones.

    Quote Reply

  10. 10

    az bookkeeping

    Aug 11, 2008

    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.

    Quote Reply

  11. 11

    .(JavaScript must be enabled to view this email address)

    Aug 14, 2008

    Nice.  It’s a nice idea to add to our website.  I’ve emailed this page to our designers.  Thanks!

    Quote Reply

  12. 12

    .(JavaScript must be enabled to view this email address)

    Feb 17, 2009

    Well that makes my iPhone world a little bit easier now! I just searching on how to do this.

    Quote Reply

  13. 13

    Oyun Oyna

    Sep 02, 2009

    Thanks for sharing. Nice tip on making a custom icon

    Quote Reply

  14. 14

    Bands

    Sep 22, 2009

    I was looking for few custom webclip thanks for to help.

    Quote Reply

  15. 15

    .(JavaScript must be enabled to view this email address)

    Oct 30, 2009

    Great tips. Now I have my own custom icon for my web. Thanks dude.

    Quote Reply

  16. 16

    .(JavaScript must be enabled to view this email address)

    Sep 20, 2011

    Anyone know of a way to suppress the sheen overlay and the rounding or are we stuck with this?

    Quote Reply

  17. {screen_name}

    .(JavaScript must be enabled to view this email address)

    Sep 20, 2011

    @Slimboy - this will remove the sheen. Can’t get rid of the rounded corners, though.

    <link rel=“apple-touch-icon-precomposed” href=”/apple-touch-icon.png”>

    Quote Reply

  18. 18

    .(JavaScript must be enabled to view this email address)

    Oct 01, 2012

    Normally I don’t browse blogs, but eytvrehing posted here is amazing! thanks for this link, I don’t think I would have found it otherwise. It’s great for a non-graphic designer trying to play around.

    Quote Reply

  19. 19

    .(JavaScript must be enabled to view this email address)

    Oct 28, 2012

      If you experience any of the following symptoms, you should contact a doctor immediately, and depending on the severity of the side effects, you should contact emergency services. http://www.ambienbestsales.com/ - buy zolpidem online If you experience any of the following symptoms, you should contact a doctor immediately, and depending on the severity of the side effects, you should contact emergency services.  Ambien cost.

    Quote Reply

Leave Your Thoughts Behind

Remember my personal information