How Do I Make Custom iPhone Icons for My Websites?
With a growing list of apps and web bookmarks on the home screen of your iPhone, you may want to “pretty up” some of those web bookmarks and turn them into custom icons rather than settle for a screenshot of the website. You can do this – but only for websites you control.
Keep in mind, the iPhone home screen icon is a different file than the favicon.ico file that creates an image in the bookmarks or on the tabs of a web browser.
iPhone Custom Icon How-To
To make a custom icon, create 60×60 png graphic in an image editing program such as Adobe Photoshop. You may find that 57×57 is what Apple recommends, but we found 60×60 to work great and it’s easier to remember. When you make the graphic, consider whether you want to put your logo on a white or black background and how that will work when you finally see it on your Apple iPhone.
With our icon for MyNewIphoneWorld.com, we chose a white background with our trademark logo:
Take this 60×60 image and upload to the top-level of your web directory. Make sure the filename reads “apple-touch-icon.png”.
Now, in the HTML of your site and within the HEAD tag, place the following tag:
<link rel=”apple-touch-icon” href=”/apple-touch-icon.png”/>
Next, go to your iPhone and navigate to your website using your Safari browser. Click the plus “+” sign at the bottom of the browser once your website loads, and then select “Add to Home Screen.”
At this point, your icon will load and you will be able to customize the name of your home screen bookmark (a.k.a. web clips). We recommend abbreviating to 13 or 14 characters or less so that the name doesn’t get “greeked” (for example, a greeked label could look like “MyNew…. .com”).
It may sound like a long process, but if you have a little patience – it should only take 3 or 4 minutes to complete the iPhone “iconification” of your website. Not only will it look good on your iPhone, but anyone who bookmarks your site on their iPhone will have the same icon – and they’ll be more likely to keep it on their home screen if it looks nice.
Have fun!
September 15, 2008 – 9:15 am