Custom Webclip Icons for your iPhone or iPod Touch Home Screen
So 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 This Entry with Your Favorite Social Networking Sites.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
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.
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.
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.
Nice. It’s a nice idea to add to our website. I’ve emailed this page to our designers. Thanks!
Well that makes my iPhone world a little bit easier now! I just searching on how to do this.
Thanks for sharing. Nice tip on making a custom icon
I was looking for few custom webclip thanks for to help.
Great tips. Now I have my own custom icon for my web. Thanks dude.
Live Preview
Blog
Categories
- Design
- Business
- Tutorials
- Design Hope
- Apple
- Kick Awesome Show
- Music
- ExpressionEngine
- Personal
- category archives
Recent Articles
- The Kick Awesome Show: Episode 4
- Tips for Freelancer Websites - Making Your Site Awesome
- The Kick Awesome Show: Episode 3
- The Kick Awesome Show: Episode 2
- Tips for Freelancer Websites - The Groundwork
- archives
Popular Articles
BestChristianDesign is helping give churches inspiration for their next project. Good call, guys.
Seth Godin reminds us to enjoy and take advantage of the uphills.
Stop announcing your new project. Just do it.
Rock and Roll people, Rock and Roll.
To all you staff designers out there, here’s a link for you. (via @ryanlascano)
Fascinating look into the music business.
Derek Sivers posts some great advice about balancing your life.
Heroes or Ghosts
Little Rooms
@ryanirelan Hate that, too. Was hoping it would grow on me but too many panes all over the place. Too much like my desktop :D
I've noticed I'm not noticing my spelling errors. I need more sleep.
ExpressionEngine
The best Content Management System for designers. Feature rich, completely customizable, and easily extendable.
Basecamp
Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.
Mike Keen
January 19, 2008
We have built a simple service that makes it easy to customize your homescreen bookmark icons. http://hsicon.com/