A favicon will be 16×16 pixels big once in place on a browser. I am going to design mine in Photoshop at 64×64 pixels at 72dpi. I have tried using the first letter of my name from my logo, but this doesn’t work as a favicon as the logo font I have used on my website is very slim and there fore unreadable when viewed at 16×16, it looked like this:
But as it is unreadable when viewed at 100%, I have chosen to use the font that I used for the rest of my website as part of the branding, which is much clearer to read when viewed small, it looks like this:I have made it a transparancy and then go to File>Save for web>PNG 24, with as highest resolution possible, then ‘save’.
Now that I have my image saved as a .png I go to the website http://tools.dynamicdrive.com/favicon and upload my favicon, this website will then generate it and I then download it as the file name favicon.ico and this will save it into my website folder, but NOT the ‘image’ folder, just save it loose.
Now I go to Dreamweaver into my ‘index’ page and go to code, then in the code I put in a link at the end of the ‘head’ (there are two, one is the beginning of the head, and the second is the end of the head), add this code to below the end of the head:
<link rel=”icon” href=”http://www.yourwebsite.co.uk/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”http://www.yourwebsite.co.uk/favicon.ico” type=”image/x-icon” />
So it works!