aside
some favorite linksread the blog
posted on 01/15/08
iPhone Favicons
This is a quick follow up to my Textpattern iPhone post. If you’d like to create an icon that will appear on the iPhone homescreen, should someone make a webclip of your iPhone friendly site, the process is very simple. Much like creating a favicon, but for iPhones.
First you’ll want to create a 57×57 PNG. Then save it as apple-touch-icon.png. Go ahead and upload it to the root folder of your website. You can see mine at pixelspread.com/apple-touch-icon.png. Much like a favicon, you can override it with a simple line of code in your head tag.
<link rel="apple-touch-icon" href="/customIcon.png"/>
Don’t worry about trying to make the icon glossy. The iPhone will take care of that for you. If you want to see what I mean, try making a web clip of pixelspread.com/iphone. For more on this, head over to dev.apple.com/iphone
Matt
posted on Jan 15, 08:45 PM
@David give it a second to load the web clip icon. i’m trying it right on my phone, and it’s working. I asked a few friends to try it, and they say it’s working too.
David K
posted on Jan 15, 08:56 PM
Let me double-check the instructions. Navigate to pixelspread.com/iphone. Create the webclip. Wait? I’ll try it again.
Peter Zich
posted on Jan 17, 08:38 PM
Hey guys, I wrote a javascript bookmark to choose your own custom icon on the 15th, have fun: http://pz2.ucls.uchicago.edu/webclipIcons.js
Chuck Peterson
posted on Jan 18, 10:40 AM
I found that 120 × 120 looks great with a rounded border.
Need to use specific borders to get it to work right.
Check out iPhone icon template for rounded borders.
kannan
posted on Jan 24, 05:04 AM
its great, working for me… and a new idea for short-cuts.
adamyonk
posted on Apr 18, 04:38 PM
nice… may have to modify .htaccess if you’re using mod-rewrite. that had me stumped for a while ;P
What?
Pixelspread is the webblog and portfolio of Matt McInerney. If you'd like to learn a little more, check out the about section.
©2008 pixelspread - powered by txp
XHTML CSShistory
- Summer Jun 02
- A Brief Update Apr 30
- The Freebies Section Apr 16
- Serifs on the Web Apr 15
- More Alphabets Apr 04
- New Alphabet Apr 02
- FontStruct Apr 02
David K
posted on Jan 15, 08:41 PMHey dude. It didn’t work for me. The webclip for pixelspread.com/iphone still looked like a tiny website on my homescreen. Boo! I want the real Facebook/Twitter/RSS icons for my homescreen.