Northwinds

Create your own custom iPhone icon for your website

Posted on 16. Sep, 2009 by Beth in Web Ready

If you own an iPhone you may have noticed that you can bookmark websites and add them to your home screen. I am sure you are thinking how cool it would be for your site to have one of those hot icons right on your phone. It is actually a very simple thing to do if you have an image editor and access to your web site directories. You don’t even need to know HTML, however it wouldn’t hurt.

First create your icon or grab your website logo. In TrueNorth’s case I used the same logo as I used for TrueNorth’s favicon which is a stylized tN on blue. The size you need to make your button is 129 x 129 pixels. You may notice this looks bigger than the icons on your phone. We just have to do as Apple wants us to do. Anything smaller than this may appear blurry as the iPhone will upscale the image. Make sure the icon is square otherwise the iPhone will crop the image. Don’t worry about the icon glass effect or rounded corners, the iPhone takes care of that for you. The format that the iPhone does screenshots in is the PNG format and they will generally look better if done correctly, but they will be slightly larger in file size than a JPG. If you don’t have an image editor that saves out to PNG format, you can use a JPG image. So far they have seemed to work but there is no guarantee that this won’t change.

Here is an example of what TrueNorth’s icon looks like before it shows up in an iPhone.

This is incredibly important! You must name your image this “apple-touch-icon.png“. If you don’t, it won’t work. The exception of course is if you are trying it with a JPG image then it would be this “apple-touch-icon.jpg”.

Now that you have your icon, you have to save it to the root directory of your website. This is where your “index.html” or “default.asp” file is located. If you don’t know where this is or don’t have access to the directory to upload it, talk to your web person. They will know where it needs

Alternately, if you do not have access to the root or want multiple icons you can link to your icon in the head of your HTML.

Now all you have left to do is add the web site bookmark to your iphone and you are all set.

Tags: customicon, iPhone, logo, website