Here’s how to create custom web page bookmark icons for your iPhone’s home screen.
1. Make your custom icon by creating a 114 x 114 pixel graphic image at 72 pixels/inch. Just make it a simple square — the iOS will round the corners and add a nice reflection effect.
2. Save the graphic in PNG format with the name: iphone-touch-icon.png
3. Upload this image to the root directory of your web site.
4. Now on your iPhone, open the web page you want to bookmark in Safari. Touch the middle button at the bottom of the screen, then touch Add to Home Screen.
5. Give it a name then touch the Add button.
6. That’s it! Your custom icon will now appear on your iPhone home screen.
Great info. Thanks!
Not really sure where or how to get to the root directory of my website, can you elaborate a bit more. Thank You
The “root” directory is where the home page to your website is located. (your home page is usually named index.htm, index.html, or index.php)
Dear Mike, I wonder if you can help me out. I am interested in creating an icon, which i want to later make it an app for iPhone and android phones, can you please tell how i can start? I have very little experience with computers, should i hire someone to do it? Cause i need graphics? I just want something simple and clean to the point. I thank you very much for you attention and help.
Peter, You can install Apple’s Developer Tools, which includes and application called Icon Composer. Here’s the link: http://developer.apple.com/tools/ Once installed, look for the application in /Developer/Applications/Utilities. Of course, you’ll need to create the graphic image(s) — I use Adobe Photoshop — or find a suitable image public domain online. Hope this helps get you started.
I am an Adult Leader for BSA Troop 245 and have been designing and maintaining the Troop Website. I came across your article and wanted to be able to create a custom icon to place it on my iPod touch. since i do not have an iPhone i can not test it to see if it works.
Any help would be appreciated.
It’s a simple process. Just do the steps in my blog post and it’ll work! 🙂