Welcome to Bytes Vibe. In this post I will teach you guys how to add a custom favicon in blogger website. After adding a custom domain in blogger site, the first thing we need to do is to add a favicon in our blogger website.
Table of Contents
What is a Favicon in blogger?
Before we learn how to change favicon in blogger, let’s briefly discuss what a favicon is. A favicon is a small image, typically favicon size for blogger is 16×16 pixels. A blogger favicon represents your website. It appears in browser tabs, bookmarks, and other places where your site’s identity is displayed. Having a custom favicon not only makes your site look professional but also helps in building your brand identity.
How to create favicon for blogger
Before we start, we will need a favicon image. The blogger favicon size is 16×16 pixels or 32×32 pixels. You can use a free online tool like Favicon.io to create your favicon for blogger. Or You can use tools like Canva, Adobe Spark, or any online blogger favicon generator to create your image. Here’s how you can create a favicon with favicon.io :
- Design Your Icon: Use the “Text” or “Emoji” option if you don’t have a custom image. For those with a logo, you can upload it and adjust the design.
- Choose the Size: Typically, a 32×32 pixels size is recommended for a favicon.
- Download the Favicon: Once you’re satisfied with your design, download favicon for blogger in .ico format.
You can check this video for favicon.io –
How to add custom favicon on blogger
Now after download favicon for blogger we need to change blogger favicon. We will use two methods to change blogger favicon. Follow the steps below:
Method 1: Using the Blogger Dashboard (Recommended)
- Log in to your Blogger dashboard: Access your Blogger account and select the blog you want to modify.
- Navigate to Settings: In the left-hand menu, click on “Settings.”
- Locate the Favicon section: Under the “Basic” tab, you will see a section labeled “Favicon.”
- Upload your favicon: Click on Favicon and “Choose File” button and select your .ico file from your computer. You can also use jpg, png images.
- Save changes: Click “Save” to apply the changes.
Your blogger favicon will now be displayed on your blog. It might take a few minutes to appear in your browser, so don’t worry if you don’t see it immediately.
Method 2: Using the HTML Template (Advanced)
If you prefer more control or if the above method doesn’t work for you, you can manually add the favicon to your Blogger template’s HTML code.
- Access the HTML template: In the Blogger dashboard, go to “Theme” and click “Edit HTML.”
- Find the head section: Locate the
<head>section of your blogger template’s code. - Insert the favicon code: Paste the following code within the
<head>section, replacing “your_favicon.ico” with the actual name of your favicon file:
<link rel="shortcut icon" type="image/x-icon" href="https://yourblogaddress.com/your_favicon.ico">Code language: HTML, XML (xml)Now save your theme. After uploading your favicon, it’s important to check that it’s working properly. If you blogger favicon not working than here’s what you should do:
- Clear Browser Cache: Sometimes, your browser might still show the old favicon. Clear your browser’s cache to see the updated version.
- Check Different Browsers: Open your site in different browsers like Chrome, Firefox, and Safari to ensure the favicon displays correctly.
- Check Mobile View: Make sure your favicon is visible on mobile devices as well.
By following these steps, you should successfully add a custom favicon to your Blogger blog. If still your blogger favicon not changing than contact us.
