What is Favicon and How to Get it for Your Blog

Share and Like

You might have heard about Favicon‘s, which is a small icon browser shows on tabs, URL bar or elsewhere to distinguish your blog. It is one of the good ways to promote and brand your blog.

It is usually a 16×16 icon which will be used by most of the browsers. It will make the tabs more visible from your blog, readers can recognize it from the browser tab. It is a .ico file which will be stored in root of your blog.

Favicon on the Browser Tab

Favicon on the Browser Tab

Favicon will brand your pages and readers can open it without worrying about where they are going. You can consider it one of the factors of trust generation, showing your readers that they can trust the pages.

If you want to get a favicon for your blog, there are many sites which can help you. You need to generate a 16×16 icon which can act as a favicon and upload it to your website.

Get a 16×16 icon for your Favicon

To get an favicon icon you need to decide on a square image which you want to use as a favicon. Do not worry about the pixel size, just try to get an image which you want to use.

Below are the services which can generate the favicon icon from a square image, which can be used directly on your blog.

1. Favicon.cc

This is one of the preferred Favicon generator. You can just upload any image and it will use it to generate the favicon. It can scale the images while uploading so you do not have to worry about square image.

You will have a grid view, where you can adjust your image to look the way you want. Once you are fine with the preview, you can download the favicon or publish it under an open licence.

2. Favicon Generator

This is another good tool which can take an image and can convert it to favicon. This tool does not scale the images, so you need to provide an square image.

You can give square image of any size and it will convert it to 16×16 ico file. You can right click the created image and save it on your local desktop and rename it to favicon.ico.

3. Favicon Geneator

This is another good favicon generator which can create a 16×16 ico file for you. It also have a option to not resize the image to a 16×16 and maintain image dimensions.

This will also show your favicon to a public gallery of recently created favicons.

4. Faviconer

This is a great service which allows you to either draw or create it from your image. It does give you an ico file to download once you decide on it.

The good thing about this service is that allow you to draw your image, so if you do not have an image ready you can go ahead and draw it.

How to load Favicon on your blog

Once you have the ico file, next step is to upload it to your blog and tell browser that it is your favicon. Below are the few ways you can add this to blog.

1. With the FTP client

To show the favicon on your blog, you need to upload it to your blog. You can upload it to below mention two places on your blog.

  • Root of your current theme.
  • Root of your WordPress Installation.

Once you have the files there, you need to update header.php file to include the new favicon. Below is the line which you need to add in your head of your blog.

<link rel=”shortcut icon” href=”<?php bloginfo(‘stylesheet_directory’); ?>/favicon.ico” />

You can do that from your WordPress Administration Panel > Design > Theme Editor. Select the file called Header or header.php to edit the file.

Once this line is there, browsers will start using your icon image as a favicon.

2. With Thesis Theme

Thesis Theme has an inbuild option, where you can just upload the image and it will do the rest for you. You can upload the icon at Thesis Options > favicon uploader.

Once you upload the icon from that option, thesis theme will add it automatically to your header section.

If you plan to use this option I still prefer uploading it to root of your blog because some service try to read it directly from there.

It is not required to have a ico image for your favicon, you can have a png or gif images if you want. You just need to change the code to point to that image.

Though you can use other type of images for favicon, ico is a preferred format as it is compatible with all browsers and can be shown correctly everywhere.

About Sanjeev Mohindra

Welcome to MakeWebWorld! I am Sanjeev, a blogger and Technical Consultant in Software Industry. This blog will provide help and tutorials for creating your web space, Wordpress tutorials, social media management, video marketing or SEO tips. You can connect with me or subscribe to MakeWebWorld free tips.

Comments

  1. says

    Favicon creates an added aesthetic appeal to a website. It is easy to creator but you need to choose the right favicon generator that suits your taste.

  2. says

    These days I have been hearing a lot about favicon, but never got the time to study in length about this topic. This post cleared all my queries about this subject. Thanks for the share,

  3. says

    A Favicon not only helps to decorate the website but it serves many purpose. One of it being able to find the desired website when lots of tabs are open in a browser. Thanks for showing about how to place one. However I have seen it varying from theme to theme. But can be easily figured out by searching for the default .ico file in the cpanel. Its a nice post. Thanks for sharing the knowledge!

    ~Anubhab

  4. says

    Hi Sanjeev,
    Many bloggers have problems changing favicon. I used one of the tools you mention above to get mine changed last week.

    I’m sure this post will help many out. Thanks for the tut

    • says

      Thanks Enstine for liking it, I agree many people do struggle while changing the favicon and many blog doesn’t have it. It is really easy once we decide to add it to our blog.

  5. Marnie Byod says

    Before I knew about Favicon.cc. I was once having trouble in creating favicon for my blog and that’s kinda irritating to edit the size that fits.

    • says

      Ya, its hard to edit the sizes and getting the looks if you not comfortable with photo editing tools, there services does that work automatically and make is really easy..