Custom Icons for the iPhone

One of the really cool things about the iPhone and iPod touch is that you can create custom icons for the home screen. Whenever a person adds a bookmark to your website to their home screen, the iPhone or iPod touch will look for an icon. Since most sites don’t have the code needed to tell the iPhone where to look for this icon, a default icon is created. 

If you create a feedr we have made it really simple for you to create your own custom icon. By default you will get the blue feedr logo as your icon, but if you want to personalize the icon follow these steps.

1. Create your icon. The icon’s actual size is 57×57 pixels, but you can make it a little bigger and Phone Feedr will size it for you automatically. I found that creating an icon at 150×150 pixels worked well. Save your icon as a jpg.

2. Log in to your Phone Feedr account

3. Click on “Users” in the upper right of the page. Then click on “your profile.”

4. At the bottom of this page you will see a section that says “Profile Picture.” Click “Choose File” and then find the icon you created in step 1. Click “Update Profile” and your icon will be uploaded and saved.

5. You are done. From your iPhone or iPod touch, navigate to your feedr and hit the “+” at the bottom of your screen. Touch “Add to Home Screen” and then your icon should appear next to the title of the page. 

Pretty simple, right? For the code monkeys out there, you might be interested in the actual code that makes this work. We got you covered. This is made possible by a javascript that looks like this:

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="apple-touch-icon" href="http://path_to_your_icon.png" />

This entry was posted on Friday, October 24th, 2008 at 10:47 pm and is filed under blog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.