Creating a Transparent Favicon

This tutorial will teach you how to make a transparent favicon for your website. It will require the use of Photoshop as we’ll be using a Photoshop plugin to create the favicon.

1. Download this plugin for Photoshop, download according to the version of Photoshop you’re using. Download the ICO (Windows Icon) Format one.

2. After the download has been completed, go to your Photoshop plugins folder. It should be in your Program Files folder under My Computer, C Drive if you are using Windows.

3. Once you’ve found your Photoshop folder go to Plugins > File Formats and paste the icoformat.8bi file that you’ve just downloaded into the File Formats folder.

4. Now open up Photoshop. If you already have Photoshop open, you have to close it and open it again in order for the plugin to work. Make your favicon - it must be 16×16 in size. Make sure you have a transparent background, the best way to this is to select ‘Transparent’ as the background contents when creating a new document. After that, save your favicon in .ICO format.



Call it favicon.ico. Upload it to your root directory.
Now open up your index or your header.php if you’re using includes. Paste this code at the top of your document: