Blogging My Life...Yesterday, I showed you how to add bookmark icons on your iPhone's home screen. Today, I am going to show you how I added support for custom icons on Search Engine Roundtable and RustyBrick.
As per the iPhone Developer Center, it is very simple.
Step 1: Create custom icons that are 57x57 and save them as PNG files. They can be larger, but Apple will scale them for you.
Step 2: Rename the file to apple-touch-icon.png
Step 3: Upload them to your root directory on your server.
STOP - what if you don't have access to your root directory? Well, you can add a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.
Then you go to your site and follow my directions on how to add bookmark icons on your iPhone.
Here are the three I added:
Here is what it looks like on my iPhone:
Pretty slick, don't you think?
OK, I am obsessed this week with the iPhone - sorry.
Tweet This!
Comments
Nice find Barry, when I got my update I was wondering the same thing. I am an iPhone addict myself, and I made a dozen or so bookmark icons for some key industry bloggers. It was a fun little project!
http://www.seowrench.com/seoize-your-iphone/
Posted by: SEO Wrench | January 24, 2008 3:01 AM
> Step 2:
> Rename the file to apple-touch-icon.png
You can name them to anything you want.
You do NOT have to name them this.
Posted by: Betty | August 1, 2008 8:56 PM
hey you you are so professional about that ha , you tell to everyone to follow your step by step ha, you are so do a good job ha ,, ok why don't you tell everyone living in a round country go to hell it better,,,,,, look what you been toll them Upload them to your root directory on your server. do you thinks they're know that too?!! like me... what server what root directory what links ha ? what about if i tell you to go on freeway and get off the next 5th exit ..do you thinks you know how to get there too ha?! come on wakeup would you! thanks milloin times to toll to everyone like me ok... thinking about that ?please next time if you're so do a very good job just tell to everyone to understand to ok ....here make sure tell to everyone use the prog name too ok. not just go to server , root directory, link
Posted by: gilfd | August 18, 2008 10:47 PM
it's very pretty, i'll try it, thanks
Posted by: Yang | August 21, 2008 9:01 AM
Hi there, thank you for the step by step tips, the icons look great by the way.
Posted by: Mark | April 13, 2009 6:17 PM
I've been able to change the icons but the sites that have a default icon replace mine. I like mine better. How can I keep my icon over the website's?
Posted by: Jon | May 29, 2009 11:26 AM
Perfect. Thanks!
Posted by: Eric | November 4, 2009 10:58 AM