SUBSCRIBE TO RSS FEEDShow to create and add a favicon in WordPress using Photoshop
As described in the relevant wikipedia article, a favicon (short for favorite icon, sometimes understood as favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16 pixel square icon associated with a particular website. The browsers that provide favicon support typically display a page’s favicon in the browser’s Address bar and next to the page’s title on a tab.
We’re going to create our favicon example, using Photoshop CS3. The favicon needs to be in .ico format and since Photoshop doesn’t have a build-in way of saving an image in .ico format, you have to download this freeware plugin from Telegraphics (supports all versions of Photoshop). After downloading the plugin, you need to place the .8bi file in Photoshop’s plugins folder and restart Photoshop (if already open).
In Photoshop, create a new 16×16 RGB 8-bit image. There is the option to resize an existing image or to create a new one pixel by pixel. As an example, i created pixel by pixel an “E” character using the pencil tool.
When you’re done, save the file as favicon.ico and upload it to your root WordPress folder. If you are not using WordPress, upload it wherever you want.
To use it, insert the following code in the head tag of every page that you want to display the favicon. If you are not using WordPress, make sure that the path to the image corresponds to the uploaded directory.
The most common way is
<head> [...] <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> [...] </head>
while the W3C way is
<head> [...] <link rel="icon" type="image/png" href="favicon.ico" /> [...] <head>
As far as i know, both ways work correct in every browser that displays favicons. Here’s an example of how the example favicon looks on a firefox tab:
Enjoy!
