How to Add a Favicon to Your Website or Blog

As you browse around the internet on your favorite website or blog, you may notice that a little icon rests next to the URL, whether in the navigation tool bar or the tabs in your browser. It caught your attention, which makes it a great addition to that website. That icon is known as a favorites icon, which is exceptionally effective in giving a website or blog the novelty it needs to grab the attention of visitors.

Favorites icons, or commonly known as “favicons” are those little images that give your site or blog that unique flavor. These 16×16 or 32×32-sized icons with a color depth of 8 or 24 bits give identity to your website or blog, especially as they appear both in your browser and in your bookmarks list.

With this in mind, your favicon allows visitors to identify your website through your icon, which allows for more effective traffic stability, which every website or blog owner strives for. Moreover, today’s browsers now automatically determine a favicon for each website (in a .ico file for Windows), so the lack of one can actually cause 404 errors in your server log files. This can amount to wasted bandwidth because of the lack of linking involved. But if you implement your favicon, this can be prevented. And as a result, this unique branding tool can bring convenience to your visitors and you enhance your website’s traffic, as well as maintaining your bandwidth consumption.

How To Create A Favicon

You can create a favicon using two popular methods: by Adobe Photoshop or any other popular graphics design program, or using a generator available around the web.

In Adobe Photoshop

First things first, you should have the Windows icon (.ICO) file format activated for your Photoshop. You can conveniently do this by downloading the plugin located at:

You need this plugin to be able to save favicon files through Photoshop. After you’ve downloaded and installed the plugin, make sure that your canvas is 16×16 pixels or if that’s too small for you, use 64×64. This will then be scaled down to fit the size requirement of your browser.

For Generators

If you’re not familiar with using Adobe Photoshop or you don’t own the program, here is a list of generators that can give you a professional looking icon in no time: – The simplistic graphic tool on their website allows you to draw the icon you desire for free! After that, you can conveniently save your file in an .ico format to readily use for your website.

FavIcon from Pics – This website allows you to upload an image that you want to use as a favicon, whether animated or not, and conveniently creates an .ico version for your website.

DynamicDrive FavIcon Generator – For a quick favicon solution, you can use this website to upload an image, which will then be automatically resized and saved as a .ico file.

How To Implement A Favicon On Your Website

With your .ico file ready, here’s what to do to implement it in your website for all your visitors to see.

1. If you have access to your main directory (root), add this piece of code to your index file or any web page you want your favicon to appear in:

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

Make sure to change “favicon.ico” to the file name of your favicon!

2. If you own a WordPress blog, then you can conveniently download and implement a free WordPress plugin called Shockingly Simple Favicon.

Final Notes

  • Delete all your bookmarks leading to your website.
  • Clear your browser’s history, cache and your computer’s recycle bin.
  • If necessary, restart your computer.
  • Then, re-bookmark your website or blog and enjoy your new favicon!

Once your favicon’s up, you can enjoy the comfort of your website’s novelty, along with the server log issues settled conveniently. Favicons are important in maintaining a website or blog’s identity. It allows visitors to remember your website more effectively to help maintain traffic. If you have a website or blog, it is important to devise your favicon in the soonest time possible, because it’s a a very simple to implement marketing strategy that’s very rewarding in the end.

Click to rate this post!
[Total: 0 Average: 0]

Madalin Tudose

A web developer with a crush on SEO. Having my skin in the game of website development and digital marketing for more than 10 years already, you might consider me an expert. At least this is what people call me. Honestly, I HATE that term. I prefer to describe myself as a person who takes action and risks. I test every hypothesis, document every step of the process, and implement what works.