Main menu

Pages

What's favicon and how to change it in blogger blog


    You have created you're website using blogger , One step you might wanna do is to change your blog icon that appear beside the title in the web-browser tab. Favicon is an easy way to make your website identifiable to visitors. In this tutorial I'm gonna show you how to make a favicon and how to add that favicon to you blogger blog.

What's favicon?

    Favicon is the icon of your website that appears beside the title in the webbrowser tab. If you create your website using blogger , the default favicon is that of blogger. It's advisable to change the default blogger blog favicon to your custom one, which reflects your logo or brand.

Required size of favicon ?

  • The best size of favicon is 16×16 pixels (This is the size favicons are usually displayed). It should be square-sized.
  • Other favicon sizes


Required format of favicon image?

The preferred format of favicons is ICO , PNG or GIF file format

Are there any favicon generators ?

    Yes , there are many favicon generators , where you put an image (Preferably your website logo) and these favicon generators will generate your custom favicon out of that image

Examples


Check this article here for more favicon generators

Favicon HTML code ?

<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>


Change the link in 'RED' with the link to your favicon

How to change the default blogger blog favicon to the custom favicon you have just created ?

  • First you need to upload the favicon and get a direct link.
  • You can upload the favicon file by creating a new post draft , then upload the favicon file to that post , and change the view to HTML -> Then copy the link of the uploaded image
  • Now change the code above by adding the link to you favicon instead of the link in 'RED'
  • Go to blogger, Sign into your google account ->
  • Themes -> Edit HTML -> Then add the code after the <head> tag and save


How to solve 'Favicon not showing' problem?

There are many reasons why a favicon doesn't appear :

1- There's a problem in the code 'Syntax error' , So make sure you wrote the code well.
2- The browser you're using has cached the website without a favicon : So the solution is to delete cache , use another browser , or add /favicon.ico to the domain
3-The link to the favicon isn't correct : So make sure it's correct and working


Comments