Description: Create your own Custom Favicon for Blogger Blogs Online. Easy way to add even Animated Favicon to Blogger or Blogspot Blogs.
Favicon is a small image of size 16x16 or 32x32 px which is used on the left side in the browser's address bar and it also appears in the browser tab as you can see it in the following image. Why should we use Favicon for Blogger? Answer, generally it gives a professional look to your Blogger blogs. You already bookmarked many blogs or websites in your browser, and let you want to open any bookmarked page then you will go to the bookmarked menu page and try to find out the bookmarked page, but if the bookmarked page has its own Favicon then you would find it easily that is also an advantage to use the favicon for Blogger. You may also hide your Blogger navigation bar to make your blog more pretty. I am already using a custom Favicon for this blog, you can see it live.
Related Posts:
This post has two parts.
1.) How to create a custom Favicon for Blogger?
2.) How to add Custom Favicon on Blogger Blogs?
Therefore, first I proceed to create a custom Favicon for Blogger.
Now, click on browse, and select your custom Favicon. Finally, click on 'Save' button.
It is an officially way to add a custom Favicon to your Blogger. However, older version of some browsers might show the default Favicon. If you also want to resolve this issue, proceed further more steps.
Sign into your Blogger Dashboard -> Select your Blog ->Template -> Edit HTML, click anywhere on the Blogger code area. Now, press Ctrl + F to find ]]></b:skin> code, and just after this code paste the following code.
Don't forget to replace the image link in the above code with your Favicon direct link. Now, save the template.
I have used .png format for our Favicon so I have mentioned png in the type field in above code.
If you want animated Favicon for your blog you can skip the official way to add your Favicon although you go with this method and you can use .gif format instead of .png format. Make sure if you are using .gif format as an animated Favicon, change png -> gif under the type field in above code.
Similarly, If you want .ico format as a Favicon, replace png with x-icon under the type field in above code.
 |
| Create Custom Favicon & add it to Blogger Blogs |
Related Posts:
- Edit your Static Page URL Structure in Blogger
- SEO Friendly Post Title for Blogger
- Hiding & Showing a Widget to Different Posts on Blogger
- Make your Description unique for Each Blogger Posts
This post has two parts.
1.) How to create a custom Favicon for Blogger?
2.) How to add Custom Favicon on Blogger Blogs?
Therefore, first I proceed to create a custom Favicon for Blogger.
How to Create Favicon For Blogger/Blogs or Websites
- First, you have to choose an image that you want to make it as a custom Favicon. If you want a part of any image, you should crop that part with equal size in width and height. (Recommendation: The blog logo is always better to use it as a Favicon.)
- Now, we are going to make any image as our custom Favicon in this step. We just want to change the image size into 16x16 or 32x32 px. Absolutely, you can use your own image editor software like Photoshop.
If you don't have any image editor then you can use this online image editor, picresize.com, to create your first custom Favicon. Follow the steps.
Just follow the simple steps as mention in the above preview like abcd. Finally click on "I'm Done, Quick Resize My Picture!" and save this image to your desktop. - Now, your newly created Favicon is ready to become live on your blog. You just need to upload this Favicon on any image hosting site, and copy the direct link of your image. Don't have image hosting site? Don't worry! You are a Blogger user. You can host any file into your Blogger and easily find the direct link of that image to use it anywhere on the web. You can read this article to upload any image on Blogger for hosting & get image's direct link.
- Once you have direct link, proceed the following steps.
How to Add Custom Favicon To Blogger Blog
Sign into your Blogger Dashboard -> Select your Blog -> Layout -> Click on 'Edit' under FaviconNow, click on browse, and select your custom Favicon. Finally, click on 'Save' button.
It is an officially way to add a custom Favicon to your Blogger. However, older version of some browsers might show the default Favicon. If you also want to resolve this issue, proceed further more steps.
Sign into your Blogger Dashboard -> Select your Blog ->Template -> Edit HTML, click anywhere on the Blogger code area. Now, press Ctrl + F to find ]]></b:skin> code, and just after this code paste the following code.
<link href='http://Your-favicon-url.png' rel='icon' type='image/png'/>
Don't forget to replace the image link in the above code with your Favicon direct link. Now, save the template.
I have used .png format for our Favicon so I have mentioned png in the type field in above code.
If you want animated Favicon for your blog you can skip the official way to add your Favicon although you go with this method and you can use .gif format instead of .png format. Make sure if you are using .gif format as an animated Favicon, change png -> gif under the type field in above code.
Similarly, If you want .ico format as a Favicon, replace png with x-icon under the type field in above code.
