FortySeven Media

Kick Awesome Web Design, Graphic Design & Media Creation

Custom Webclip Icons for your iPhone or iPod Touch Home Screen

Wednesday, January 16, 2008 ~ 5:07 pm

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!

  • Social Web
  • E-mail

Your Email:*  

Your Name:*

               To:*

Submit the word you see below*

Posted by in Tutorials ~ (7) Comments ~ (0) Trackbacks

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

Beautiful template!

Great tip! Thanks for sharing!

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

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

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.

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

Leave Your Thoughts Behind

Name*

Email*

Website

Smileys

  Remember my personal information

  Notify me of follow-up comments?

Submit the word you see below*

Live Preview

 
Separator
Stuff we Love

CSS Tricks has a nice, plain english version of major CSS bugs in IE 6.

Number six in my article on Top 10 Tips for Web Design was to make awesome icons. PSDTUTS has a great article on how to design them effectively.

At first I thought the CSS framework generator was great...just pop in your XHTML and you get a nicely defined CSS file to start with. But it seems to add a lot of bloat, which we try to keep down on right? Well, go check it out at least.

I’m loving these limited edition Jawbone Bluetooth Headsets.

Cameron Moll is starting what looks to be an awesome series.

Finally, I can stop iPhoto from opening when I plug in my iPhone.

Inspiring article from Shawn Blanc.

archives

Recommended

ExpressionEngine

Basecamp