How to Add a Favicon to Your Blogger Blog What is Favicon :- Favicon is also known as Site Icon is the small image file that display next to the page's title on the tab in the br...
2018-07-31T07:44:56Z

How to Add a Favicon to Your Blogger Blog

What is Favicon:- Favicon is also known as Site Icon is the small image file that display next to the page's title on the tab in the browser. By default without a favicon, your blog displays the symbol of your blog platform or an even more generic paper icon. In Blogger it shows a Orange colored favicon. Blogger owner's can have their own favicon which helps your users identify your website and increases your brand recognition. Blogger allows you to change your blog's favicon without any coding but if you want to use code you can read further to know more.

How to Add a Favicon to Your Blogger Blog

Why you should Add a Favicon to Blogger:- It represent a graphical identity of your website, it also improve user experience. This tiny favicon helps user identify your website and quickly switch to the tab if users have multiple tabs open in their browser window.

How to Create a Favicon:- Many website use logo as your favicon. But you can create or convert your own favicon using any image editing software such as Photoshop, Gimp, Paint.net or Windows Paint, change file format from jpg, gif,png to ico for which stand for icon and rename it favicon.ico. Just be sure your image is square (16 x 16 pixels, 32 x 32 pixels, 64 x 64 pixels, and so on).

Alternatively, you can also use online tool to generate or convert your own icon such as (google it for more)
http://www.favicon.cc/
http://antifavicon.com/
http://converticon.com/
http://www.favicongenerator.com/
http://www.htmlkit.com/services/favicon/
http://tools.dynamicdrive.com/favicon/

How to Add Favicon to Blogger


Basically you can add favicon by uploading .ico file or adding it manually to the blogger

Simply by uploading "favicon.ico" file


Step 1: Go to your Blogger's Dashboard >> Layout >> Click on the favicon Edit link(In the Top Left Corner).
Step 2: Now click "Choose File" button.
Step 3: Browse for favicon.ico file (should be less than 100 KB) and select it.
Step 4: Blogger will automatically re-size it,and finally click the "Save" button.
Step 5: Now just refresh your blog you will see your new favicon
Note: If you can't see favicon after uploading delete browsers cookies and caches then visit your blog. If it doesn't work or doesn't show the right favicon, just do the following:
  • On the address bar, type http://yourblog.blogspot.com/favicon.ico and press Enter.(Replace yourblog.blogspot.com with your website address)
  • Refresh the page and check your blog.

Adding Manually in Blogger HTML Editor


Step 1: Go to Blogger Template >> Edit Html
Step 2: There find the title tag which looks like
<title><data:blog.pageTitle/></title>
and immediately after that add the following code after proper editing
<link rel="icon" href="URL of your .png file" type="image/png" />
<link rel="shortcut icon" href="URL of your .ico file"/>
Step 3: Replace URL of your .png and .ico file with your file's URL. Refesh your site it should start appearing in some time.
Note: We have face some trouble with favicons because Blogger wouldn't show them at all or wouldn't update first time when we uloaded it. If you have same problem don't upload file again, make sure you clear all cookies, caches and history from web browser and further check for it.
So this was our guide on How to Add a Favicon to Your Blogger Blog, I hope the methods given above helped you in adding Favicon to Your Blogger Blog.
Share it:

Blogger

Blogging

How To

Tutorial

Post A Comment:

0 comments: