How to Change the Favicon in Blogger

A favicon is the small icon that represents your website in browser tabs, bookmarks and other places where your Blogger site is displayed.

Blogger uses its default orange Blogger icon when you have not uploaded your own favicon. Replacing it with your logo or brand icon helps your website look more professional and recognizable.

This guide explains how to change the favicon in Blogger, what image size to use, why an old favicon may continue showing and what to do if Google Search has not updated your site icon yet.

What Is a Favicon?

A favicon is a small image associated with your website.

You commonly see it beside the page title in a browser tab:

[Icon] BloggerTheme9 Blog

A favicon can also appear in:

• Browser tabs
• Bookmarks
• Browser history
• Mobile browser interfaces
• Google Search results

It should normally be a simple version of your website logo or another recognizable brand symbol.

How to Change the Favicon in Blogger

Sign in to Blogger and select the blog you want to edit.

Then go to:

Blogger → Settings → Basic → Favicon

Follow these steps:

1. Open Settings.
2. Find the Basic section.
3. Click Favicon.
4. Choose or set your icon file.
5. Upload the favicon image.
6. Save the changes.

Refresh your published website afterward and check the browser tab.

What Size Should a Blogger Favicon Be?

Your Blogger favicon should be a square image.

A practical choice is:

48 × 48 px
96 × 96 px
192 × 192 px

The image should remain clear when displayed at a very small size.

Blogger's favicon uploader expects the file to remain below:

100 KB

Do not upload a large photograph and expect it to work well as a tiny site icon.

Recommended Favicon Design

A favicon has very little visual space, so keep the design simple.

Good favicon ideas include:

• Your brand symbol
• Your first letter or initials
• A simplified logo mark
• A recognizable icon associated with your brand

Avoid placing a complete business name inside the favicon because the text will usually become unreadable at browser-tab size.

For example, instead of putting:

BloggerTheme9

inside a tiny square, a simple:

B9

or distinctive brand icon can work better.

Should the Favicon Have a Transparent Background?

A transparent background can work well when your logo mark is designed for it.

However, test the favicon against both light and dark browser interfaces.

If your icon is entirely white or extremely light, it may become difficult to see against a light background.

Choose enough contrast to keep the favicon recognizable in different environments.

Why Is Blogger Still Showing the Old Favicon?

Favicons are frequently cached by browsers.

This means Blogger may have successfully changed the icon while your browser continues displaying the previous version.

First try a hard refresh.

On Windows, you can use:

Ctrl + F5

You can also test the site in:

• An incognito/private browser window
• Another browser
• Another device

If the new icon appears there, the favicon itself is probably working and your normal browser still has the older file cached.

Clear the Favicon Cache in Chrome

If the old favicon continues appearing, you can clear cached site data for your domain.

You do not necessarily need to clear your entire browsing history.

After clearing the site's stored data, reload the website and check the browser tab again.

Favicons can sometimes take longer to refresh than normal page content because browsers cache them aggressively.

Why Is the Blogger Orange Icon Still Showing?

If you still see Blogger's orange B icon, check:

• The favicon was actually saved.
• The uploaded image is square.
• The file is below Blogger's upload limit.
• Your browser cache has been refreshed.
• Your custom Blogger template is not overriding the favicon.

Also test the website in another browser before changing your template code.

Does a Custom Blogger Template Affect the Favicon?

Usually, changing the favicon through:

Settings → Basic → Favicon

is the correct method.

However, some custom templates may contain their own favicon-related HTML inside the document head.

For example, a custom theme might contain:

<link rel='icon' href='...' />

If an old hard-coded favicon overrides the Blogger setting, inspect the theme before adding additional favicon tags.

For safe template editing, see our Blogger HTML and CSS editing guide.

Do Not Add Multiple Favicon Tags Unnecessarily

If Blogger's normal favicon setting works, you usually do not need to add several additional favicon tags manually.

For example, avoid filling the theme with duplicate entries such as:

<link rel="icon" href="..." />
<link rel="shortcut icon" href="..." />
<link rel="icon" href="another-icon..." />

Multiple conflicting favicon declarations can make troubleshooting more difficult.

Start with Blogger's built-in setting and only modify the template when there is a specific reason.

Why Has Google Search Not Updated My Favicon?

The favicon displayed in your browser and the favicon shown in Google Search do not necessarily update at the same time.

Google must recrawl your homepage and process the updated favicon information.

This can take time even when the favicon already appears correctly in your browser.

If you use Google Search Console, inspect your homepage and request indexing after confirming that the new favicon works correctly.

For setup instructions, see our Blogger Google Search Console guide.

Google Favicon Requirements

If you want your favicon to be eligible to appear in Google Search, use a square image.

Google currently requires a favicon with a:

1:1 aspect ratio

and recommends using an image larger than:

48 × 48 px

for good appearance across different surfaces.

Your favicon should also visually represent your website and remain crawlable by Google.

Can a Custom Domain Have a Blogger Favicon?

Yes.

Using a custom domain such as:

https://www.example.com/

does not prevent you from using Blogger's favicon feature.

Use the same:

Blogger → Settings → Basic → Favicon

option to upload the site icon.

You do not normally need to change your domain DNS settings merely to update a favicon.

Favicon vs Website Logo

A favicon and your main website logo serve different purposes.

Element	Purpose
Logo	Main branding displayed prominently inside the website
Favicon	Small brand icon used in browser tabs and similar interfaces

Your favicon can use the symbol from your main logo without including the complete logo design.

Blogger Favicon Checklist

1. Create a simple square brand icon.
2. Keep the Blogger upload file below 100 KB.
3. Open Blogger → Settings.
4. Find Basic → Favicon.
5. Upload the icon.
6. Save the change.
7. Refresh your website.
8. Use Ctrl + F5 if the old favicon remains cached.
9. Check another browser or device.
10. Inspect custom theme favicon tags if necessary.
11. Allow Google time to recrawl the site.
12. Request homepage indexing in Search Console if appropriate.

Questions About Blogger Favicons

How do I change the favicon in Blogger?

Open Blogger → Settings → Basic → Favicon, upload your custom square icon and save the change.

What size should a Blogger favicon be?

Use a square icon that remains clear at small sizes. A 48 × 48 pixel or larger square favicon is a practical choice, while Blogger's uploaded file should remain below 100 KB.

Why is my Blogger favicon not changing?

The old favicon may still be cached by your browser. Try Ctrl + F5, an incognito window, another browser or clearing the stored site data for your domain.

Why is Blogger still showing the orange B icon?

Check that your favicon was successfully uploaded and saved, then clear your browser cache. If you use a custom theme, also check whether it contains a hard-coded favicon.

Can I change the favicon when using a custom domain on Blogger?

Yes. Custom-domain Blogger sites can use Blogger's normal Settings → Basic → Favicon option. Changing the favicon does not normally require DNS changes.

Why hasn't Google Search updated my favicon?

Google needs to recrawl and process your homepage and favicon. The browser favicon may update before the icon displayed in Google Search results.

Final Recommendation

Use Blogger's built-in favicon option instead of manually modifying the theme unless your custom template specifically requires it.

Choose a simple square version of your logo that remains recognizable at very small sizes and keep the uploaded file below Blogger's size limit.

If the old favicon remains visible, test another browser before making additional changes because browser caching is often the cause.

A favicon is a small detail, but using a consistent brand icon makes your Blogger website easier to recognize across browser tabs, bookmarks and search results.