Add a Favicon

How to Add a Favicon to My Website

A Favicon is a tiny icon that appears beside a website's name in the title tab (above the address bar in your browser). Having a Favicon gives your site the look and feel of a professional website. Let's add a favicon to your site.

Outlined in green in the image below is the favicon for Produce Your First Website.


So, how do I add a Favicon to my site, you ask? You begin by creating a tiny 16x16 (pixels) graphic that represents your website and save it as a .GIF or a .PNG file on your computer. Once you have it saved you will have to convert it to an .ICO file. There are several Favicon generators online that you can use to convert your .GIF or .PNG file to an .ICO file.

DynamicDrive is a Favicon Generator that you can use to convert your image. You just upload your image and DynamicDrive will convert it for you.

When your image is finished being converted, upload it to your server in the root of your domain. You can check to make sure the image is there by typing your domain name into your browser followed by a / forward slash and facicon.ico (

Next you will need to add a bit of code to the <head> </head> section of your webpages. It is really only necessary to place this code on the main (index) page of your site, but you can place it on all of your most important pages if you want to make sure your Favicon is present on these pages.


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


And that is it. Now you know how to add a Favicon to your website.

If you found this helpful please share.

Follow Me on Pinterest Facebook