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.

[Total: 0    Average: 0/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.

Join the discussion

  1. Purush on March 22, 2011 at 4:44 am Reply

    Thanks for the tut! i just added favicon to my blog.

  2. aykak on April 27, 2011 at 10:54 pm Reply

    If you use any of source from above list your favicon background will look white ugly

  3. Eric on May 19, 2011 at 10:17 am Reply


    Thanx to your post

    i have a generator in French :

    Best regards

  4. […] Maria mentions that it is shockingly simple to include a favicon to your wordpress blog – […]

  5. webdevelopergeeks on November 12, 2011 at 4:52 am Reply

    I am using wordpress and i was finding easy way to build my favicon. Thanks for sharing!!

  6. bohol on January 15, 2012 at 12:20 am Reply

    Great list of resources. This is the easiest way to generate a favicon. Thanks indeed.

  7. z6 games on January 5, 2014 at 8:26 pm Reply

    I am grateful for this valid information. You have represented your points in an insightful and interesting way. I’ve read other writings on similar topics that were boring and ineffectual. Yours is easier to digest.

  8. Matt Sells on January 21, 2015 at 11:22 pm Reply

    Hi Maria, I hope you are well! I noticed since the time has past on this blog post, some of the info is insufficient for 2015. I wrote a guide on implementing a favicon and the many sizes you should roll out 20+. I hope it can be a help if anyone stumbles on this blog post. Be well 🙂

Leave a Comment

Your email address will not be published. Marked fields are required.