Adding A Favicon To Your Website

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage. Wikipedia

For the rest of us who are not as technical. It is that tiny picture next to the browser URL area that might change when visiting one site to the next.

  1. To add one, it is simple. First you need to make a 16×16 pixel icon (or bigger) in your graphic editing program.
  2. Convert it to the accepted .ico (for icon) file extension. There are a few favicon generators online.
  3. Once you have saved the file to your computer, you will need to upload it to your web hosting space.
  4. In your layout’s template, before the ending head tag (</head>, put the following code:

<link rel="shortcut icon" href="http://YOURDOMAINHERE/favicon.ico" />
Make sure you replace “YOURDOMAINHERE” with your URL path where you have uploaded your favicon file.
Once you have done, bookmark your page. You might have to clear your computer’s cache and also restart your browser to see the changes.
For those who use WordPress, usually, this would go in your header.php file. Or you can use my free WordPress Favicon & Site Icon Generator, which will generate a custom plugin and add all the favicon sizes for maximum compatibility Automatically.

Published: 27/01/2014

Last modified: 03/08/2022

Tim Oxendale

Written By

Tim Oxendale

I'm an award-winning plant-powered (Vegan) freelance WordPress Developer/Web Designer. I work with great individuals, small-to-medium sized businesses and start-ups. I aim to have a great relationship with all my clients where I can add value to their business by being dependable, honest and by doing the type of work that makes a difference.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.