Friday, 19 August 2011

Create a Transparent Favicon

There's nothing worse, after spending many days getting a strong designed site ready to go live, to discover an ugly white box around the favicon in the url bar. You can get rid of this box relatively easily using Photoshop, following these instructions.

1. Create your favicon image (in Illustrator or Photoshop) at 16x16px and Save For Web as a jpeg.
2. Open the jpeg in Photoshop and save as a .psd file
3. Use the Background Eraser to take out your background
4. Select MODE > INDEXED COLOUR
5. Use these options:
    PALETTE: exact
    FORCED: web
    TRANSPARENCY: ticked
    OPTIONS SECTION: all 'none'
6. Save as .ico file. (Or save as jpeg then manually change the file end to .ico)
7. Load this file to your website's root making sure a correct link is applied in the <HEAD> section. ie:

<link rel="shortcut icon" href="myfilename.ico" type="image/x-icon" />


And that's it. Your favicon is no longer surrounded by that cheap white box.


http://www.weboptions.ie 

No comments:

Post a Comment