Add a favicon.ico to your website

First of all you need to create a very small image for your favicon. There a different ways that you can do this

You can load your full size logo or image that you wish to use into Photoshop or Illustrator.  Format it so that the content area is square (equal height and width). Save it for web and devices - but change the size to 16px by 16px and save it in a .jpg, .gif or .png format OR you can try to draw your own little image into a little 16px by 16px box (good luck) OR you can create the favicon at one of the multitude of favicon generators online OR you can upload your full size image to the favicon generator site and let them do the resizing.

To be able to be used by all browsers - I have found that it is best to have it in a .ico format. Some people will tell you that it can be in a .gif format.  Some people say that you can just reanme you .gif to .ico.  I haven't had much luck in all browsers with the .gif route.  I just take the steps to change it to and official .ico format.

Go to a favicon generator site on-line.  I use www.favicon.cc. You can draw an image there or you upload your image, the site will change it to an .ico format, download it to your own computer.  Then upload it to your web site host server, place it right on the root or in your images folder, path to it correctly as in the following example. Put this code into the head section of your webpages. It may take a few refreshes of the browser - and maybe a clearing of the cache - or maybe relaunching your browser - or maybe just wait a bit - before it shows up on the browser next to your url in the address bar.

<link type="image/vnd.microsoft.icon" rel="shortcut icon" href="favicon.ico">

There are several different fomats for linking to the favicon on your site. There is a good article at Wikipedia (Click Here) that gives several examples (halfway down on the page).

How to add Apple Touch Icons to your site

For Apple devices, you need to add a link for an "apple-touch-icon".  Apparently, you can use a png format with Apple - and you can have a larger image. For Apple iPhone - use a 57x57 pixel image.  For iPads use a 72x72 pixel image. For iPad and iPhone retina displays, go larger with 114x114 or 144x144 pixel icons.  Use the following links in your <head> section.  See the article at developer.apple.com "Configuring Web Applications" for more information.

<link rel="apple-touch-icon" href="/appleicon57x57.png" />

<link rel="apple-touch-icon" sizes="72x72" href="/appleicon72x72.png" />

<link rel="apple-touch-icon" sizes="114x114" href="/appleicon-retina114x114.png" />

<link rel="apple-touch-icon" sizes="144x144" href="/appleicon-retina144x144.png" />

Note: Apple will automatically put the rounded corners and the top shine on your icon - so you don't need to add those elements.  Keep in mind that the corners will be gone on your icon - so design around that fact.

How to add a website shortcut to your iPad or iPhone Home Screen

The apple-touch-icon is for users that want to add your site as an icon on their homescreen. To add a icon to you iPad or iPhone screen, launch Safari. At the bottom of the screen on iPhones or the top of the screen on an iPad, you will see an icon that is a box with an arrow pointing out of it applecreatebookmarkicon. Click on that and you get a menu of options.  One of these options is to Add to Home Screen.  If the site has a apple-touch-icon, it will use that for the icon on the home screen.  If it doesn't, it will make a small image of the website.