Have you noticed those cool little icons popping-up the URL bar of the brower and in the browser’s tabbed windows? Those are called “favicon”. Although you can use a GIF and PNG file, those files will not be supported in all browsers (namely IE). The only truly cross-browser favicon format is an ICO.
What You Need:
Now, you don’t need a new program to create it. If you are using a Windows version of Photoshop (version 5 through CS3), you can download the free plugin from Sibcode here (with additional info here). Just unzip the file called “ICO.8bi” and copy it to your Photoshop Plug-Ins folder. This will add the format “ICO (Windows Icon)(*.ICO)” to your “Save As” function. If you are using a Mac with CS2 or CS3, you can download the plugin from Telegraphics here.
Creating Your Favicon
The final size of the Favicon must be 16 x 16 pixels. Very tiny! It is much easier to create a file much larger (like 160 x 160 pixels) and resize it when ready to finish.
Simply resize the image to 16 x 16 pixels and “save as” an ICO file called “favicon.ico”. Yes, the file name is important.
Adding the Favicon to your website.
Now that you have you favicon, follow these steps:
- FTP the favicon.ico file to the root directory of your website. Do not put it in the images folder; it should just “float” in the main directory for your site. Some browsers will automatically pull the favicon.ico file if it is available in the root folder.
- Add this line between the <HEAD></HEAD> tags of your website’s index page, customized with your domain.com:
<link REL=”SHORTCUT ICON” HREF=”http://www.domain.com/favicon.ico”>
Adding the Favicon to your WordPress blog.
The favicon in your WordPress blog is controlled by the settings in your Theme. For example, one of the settings in my Atahualpa Theme is actually called “Favicon”. Once you have the file created, just upload the file to your theme’s folder and define it in the settings.
Testing your Favicon.
This can be a little frustrating. Realize that the Favicon for a website really sticks in your brower’s cache/internet files. Reloading the page will probably not work. You will need to clear your browser’s cache/internet files, close ALL open brower windows/tabs and then open a clean session and load the page. If everything is set correctly, it should pop in place. If not, try clearing your cache/internet files again and then check the LINK in your index page.
It’s probably unnecessary, but when dealing with small icons where pixel placement matters, I like to resize to 16×16 from another power of 2, like 128×128 or 256×256
I am curious if that would make the icon sharper…I will have to try it. Thanks!