How to add a Favicon to your WordPress Powered Website

in WordPress Tutorials

Favicons are those little 16×16 icons which you see at the top of your browser. They also appear in other places such as bookmarks and RSS readers.

You don’t need to have a favicon for your website, though I think it’s important part of branding and promoting your site. Also, it only takes 2 minutes to add one to your site so I you really have no excuse!!

Creating your Favicon

16 by 16 pixels isn’t a lot of space to play around with, therefore most people use their websites icon as their favicon (FavIcon is short for Favourites Icon after all!).

The first thing you need to do is crop your websites logo or icon in a graphics program such as the widely used commercial program Photoshop or the popular open source script Gimp. You can also use these programs to create an icon from scratch if it isn’t suitable to crop your logo.

You can save your cropped image as a gif, jpg or png file. I would encourage you to use png as it allows transparency. For example, saving the file as a jpg image will add in a white background too, which isn’t usually what you want (though is sometimes used to highlight the top layer of graphic or text).

It’s important to make sure your cropped image has square dimensions. I also think it’s very important to save the favicon in a larger resolution as you can always reduce the image size later, but you cannot increase it. 64×64 pixels should be sufficient but the higher the better in my opinion (as you will see).

The favicon has a file extension of ico, which is what windows uses for icons. The favicon.ico is usually uploaded to the root of a website and this is where many browsers look for it.

Quick way of creating a Favicon

The quickest and easiest way to create a favicon is to upload an image to Dynamic Drives fantastic favicon generator. You can upload an image in gif, jpg, png or bmp. The image can be up to 150kb in size; any higher and you will need to reduce the image size yourself using your graphics program. Of course, if you search for ‘Favicon Generator’ online you will find lots of programs like this (e.g. the FavIcon from Pics service by Chami), though I have always found the one from Dynamic Drive to be the easiest to use and the most reliable.

An example of Dynamic Drives Favicon Generator

Although this great tool lets you create 48×48 and 32×32 desktop icons for Windows, it only allows favicon icons which are 16×16 pixels in size. This is perfect for most users, though if you want a higher resolution you may need to create it yourself.

Creating the Favicon manually

What many webmasters don’t know is that it is possible to save favicons in larger sizes than 16×16 pixels. Favicons which are 16 by 16 pixels look fine in browsers but when the site is saved as a favourite on a desktop it will look really poor.

Thankfully, you can save the favicon as a larger file. 32×32, 48×48 and 64×64 are becoming more common; I’ve heard some people saying that they prefer to save the favicon as a 128×128 pixel image. Obviously, the larger the image file, the longer it will take to load up in someones browser, so bear this in mind when creating your favicon. That being said, I think it’s worth saving your favicon in a larger format so that it looks better small and large.

To create a favicon manually you need to simply save your cropped favicon source image as an ico file. If you are using Photoshop you will need to download the ICO Plugin from Telegraphics in order to do this. This plugin is free and is available for both Mac and PC.

Gimp users will be pleased to know that the default version of the script can save ico files already.

Adding your Favicon to your blog

The first thing you need to do is upload your new favicon.ico file to the root directory of your website. Some browsers will look for the favicon there and will display it in browsers automatically, though many don’t so you need to tell them exactly where it is.

You need to enter the code below in the head section of your website design (i.e. between the <head> and </head> tags):

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

Sometimes your favicon will not display right away because of browser cache issues. If this occurs, simply visit directly and refresh the page. You should see your new favicon. Then go back to your website and it will be now showing in the browser tab.

Comments (1)

  • Comment by Make Money Online: Roadmap of a Dot Com Mogul - Kevin Muldoon
    Make Money Online: Roadmap of a Dot Com Mogul - Kevin Muldoon

    […] recommends that users create a 16×16 pixel favicon. Though as I noted last month, it is better to use a much larger image for your favicon.ico file as it is frequently being used […]