Line of Site Web Design Articles

How to create a transparent favicon in Photoshop

Favicons are the small images you see on the left of the url in the address bar when browsing a website.

If you are using Photoshop then there is a useful free plugin which you can install from http://www.telegraphics.com

Create a new document in Adobe Photoshop. Make it 16 by 16 pixels and set the background to transparent.

Click the zoom tool several times until you have a magnification of 1600% which will allow you to use the brush tool at a setting of 1px for detailed design.

When you have finished creating your favicon, choose Save As from the File menu and if the plugin has been installed correctly you will have a .ICO filetype listed. Save it as favicon.ico and you're done!

To add the favicon to your website simply upload the file to the root of your website.

If you want to use another name for your favicon then it will be necessary to add some code to each of your pages.

Open your index file in a text editor (If you're using Macromedia Dreamweaver, switch to code view) and somewhere between the head tags insert:

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

Replace myfavicon.ico with the name you chose for your file and repeat the process for all your web pages.

Upload the page(s) and your favicon to your server and check the results. If you have a previous favicon, you may need to clear your browser cache to see your new favicon.