Add a Favicon to Your Website

You may have noticed that most decent, modern browsers have support for favicons. Favicons are the little images you can see next to items in your Bookmarks/Favourites drop-down — that is, if the site owner has made one. Some browsers also display them next to the site title in its tabs. Here I’ll show you how to create one for your site.

First, you need to design your icon. The icon needs to be exactly 16 pixels wide by 16 pixels high and can contain whatever you like. It must be saved with only 256 colours e.g. a gif, or optimised png, but, once saved it needs to be renamed to favicon.ico (where .ico is the extention that was gif or png). You may need to enable common file extensions if you cannot change the extension — if this is the case, it’ll be easier to upload the file and then rename it.

So, upload the file to the root folder of your website: where all of your files (index/etc) are. Once you’ve done this you need to link it from the header of your document on every page (in your header.php file if you’re using includes) like so:

<link rel="shortcut icon" href="favicon.ico" />

It’s as easy as that.

Speak Your Mind