Make your site 52.676% more cool

Chances are that you have an iPhone or an iPod touch. If you don’t, you’ve at least seen someone using one. When someone adds your website to their home screen, you can designate an image to show up, instead of just having a thumbnail of your website. Little details like this can make all the difference. The iPhone has been around long enough for it’s users to have that little moment of disappointment when they don’t see one appear.

When you try to add the website to the home screen and they don’t have an icon set up already, this is what you’ll see:

Instead of seeing an icon, you get a screenshot of the website. iPhone users can zoom in on the logo on the site then add it to the home screen, but that looks unprofessional and it’s asking the user to take an extra step they shouldn’t have to take. Instead, take 10 minutes to create an icon that shows your visitors that you care about the little details in life.

Just a quick note, I’m going to refer to the iPhone and iPod touch as the iPhone. It came out first, and it’s easier to type. iPod touch people, please don’t be offended. I have an iPod touch, I’m one of you.

Here’s what you do:

Step 1: Create a new Photoshop document

Open Photoshop and create a new document. Make the document size 65X65. This is bigger than the icon appears on the iPhone, but if you don’t make it a little bigger, it'll show up a little fuzzy.

Step 2: Select an image you’d like to use

Now that you have your new document, what do you want your icon to look like? Choose the image you’d like to use and open it in Photoshop.

If you want to create a background for your icon, create a new shape in Photoshop and fill in a flat color or a gradient. Here's the best part, the iPhone will automatically round the corners for you and add that rounded sheen you see on icons already, so you don't have to worry about making that yourself.

In this case the icon is going to have a transparent background. Bring the image you want to use into your new document and size it.

Step 3: Save your new icon

Now all you have to do is save your icon as a png and make sure you name it properly. The file name has to be apple-touch-icon.png

Step 4: Upload your image

Uploading the image to the right place is just as important as naming it correctly. Make sure you upload your new icon to the root directory of your site.

Step 5: Test it out, if you're cool enough to own an iPhone

The final step is to test out your new icon. Visit your website on an iPhone and add it to your home screen.

Now you have a nice iPhone icon for your website.

That’s all there is too it. Now you can avoid the small cringe iPhone users have when they have to settle with a screenshot of your website, instead of a personally crafted icon. Trust me, there are people out there that think less of a site because these small details aren't taken into consideration.