How to Create a Custom Icon for iPhone and iPod Touch


I recently upgraded my mobile theme to WP Touch Pro which gives you a custom iPhone view when you visit it from your iPhone, iPad or iPod Touch.  You’ll see a fully customized, easily readable layout with some very cool baked in features. Users also have the option to switch to “normal view” (located at the bottom) which will render the page in regular html.

There are a ton of features that let you customize virtually every aspect of the mobile theme including fonts, colors, icons, custom icons even logos.

Here’s a screencap of what the site looks like in iPhone View:

Now that I had a sweet, custom iPhone theme, I wanted to be able to add my site to my home screen and have it represented by a cool little icon, not some generic tub of blah.  Whether or not you have a custom look for your site on the iPhone you definitely want to have a custom icon that is unique and reflects your site’s brand.  Think favicon for the iPhone.

Trust me, I’m getting to the icon part.  When people choose the option to “Add to Home Screen” it saves a shortcut to your site on the home screen of their iPhone or iPod Touch.  If you don’t have a custom icon it just takes a tiny screenshot of your homepage which is often times hard to see and doesn’t have much personality to it.

Creating an icon is actually pretty simple.  You don’t even have to add any of the gradients or reflections, the iPhone does that for you.

  1. Create a 60×60 image that you want to use for an icon.  Here’s the one I made.
  2. Save the image in a png format with the name “apple-touch-icon.png”
  3. Upload the file to your root directory.
  4. That’s it!  The iPhone or iPod touch will automatically find that file, do it’s magic, and you’ll end up with a kick ass looking icon and some serious iPhone street cred.

Check it out and see what you think. From the feedback I’ve gotten people accessing the site via iOS really dig the theme and say that it makes navigating and finding posts extremely easy.

Advertisements

2 thoughts on “How to Create a Custom Icon for iPhone and iPod Touch

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s