How To Replace Blogger Favicon To Custom Favicon – Animated/Image Format

Home » Blogger » How To Replace Blogger Favicon To Custom Favicon – Animated/Image Format
How To Replace Blogger Favicon To Custom Favicon – Animated/Image Format

February 13, 2015 by Mohammad Sazid 0 Comments
What Is Favicon?


Basically Favicon (Favourite Icon) is a Small Picture with Different Size (Recommended Size = “16px X 16px”). You see the Favicon in Above your Browser’s Address Bar along with Title & Also Beside with Where your Website Address Starts. It is the way to attract users to your website with Graphical Favicon.

Why Need to Replace Blogger Hosted Website/Blog’s Favicon

When you create blogger Hosted Blog/website it comes with Blogger’s official favicon. You can replace this favicon with Two Types of Custom Favicon.

1. Normal Image Custom Made Favicon.
2. Graphic Image Custom Made Favicon.

How To Add Custom Made Favicon to Blogger Website/Blog

Step 1 :  Go to Blogger Dashboard with Login with your Gmail ID. Then Go to Layout Section >> You Will your Website/Blog’s Complete Layout.
Step 2 : Now Click On “Edit” Link On Favicon Gadget, Which is Usually Placed in Above Fold of Layout Section.
Step 3 : After Clicking on “Edit Link” You will Prompt to Pop-up Page, Where you see A “Browse” Button, Click on It & Choose Favicon Image from your Computer, Then Click Save.

Note: The Image Size of Your Custom Favicon Shouldn’t Be More Than 10KB.

Step 4 : After Completing the “Step 3” Come To Layout Page & Click on “Save Arrangement” Button.

Note: Now you’re Done with This Process. It Take Some time to Reflect the Result in Your Browser’s Window.

If your want to Give a Dashing Look to Your Blog/Website with Animated Favicon, Then Follow the Steps Below.

How to Add an Animated/Graphic Custom Made Favicon to Blogger website/Blog

Before Diving into this Process, You need to do some Exercise.

Step 1 : Create your desired Favicon in GIF Format from Here & Download the Favicon to Your Computer or If you already Have then it’s an Icing on the cake.

Step 2 : Go to Blogger Dashboard >> Click on “Pages” Create “New Page” & Upload your Favicon Image to That Page. After Uploading The Image Right Click on It & Copy Image Link Location & Noted Down That Link to Simple “.txt File“. After That Click on “Save” Tab to “Draft” That Page. Don’t Click on “Publish” Tab, Now you have your Favicon Source link Hosted on your Own Website/Blog.

Let’s Do the Real Exercise with Some Hard Code.

Step 1: Go Back to Blogger DashBoard >> Click On “Template” The “Edit HTML“.
Step 2: Expend All The Code if Needed. In Blogger Latest Version (2014) You Don’t Need to Do That. Search (CTRL+F) Below Code.

<b:skin>

Step 3: After Finding Code, Place Below Code “Just Above/Before” the Above Code.

<link href="your-favicon-links-goes-here" rel="icon" type="image/gif"/>

Step 4: Replace “your-favicon-links-goes-here” Tag with Your Favicon URL, What you’ve Noted Down to Txt File Before.
Step 5: Now Click on “Save Template” Button. You’re Done With This Trick.

If you find the Above Tutorial is Beneficial for you & Want to Subscribe Us. Please Like us on Facebook & Follow Us on Twitter.