How to change the favicon in Blogger

The favicon is the small image on the browser tab, in the bookmark list, and beside your result in mobile search. A blog that has never set one keeps the orange Blogger B, which makes the site look unfinished. This guide covers everything from preparing the file to fixing an icon that refuses to update.

Updated 26 July 2026   About an 8 minute read   Level: Beginner

What a favicon is, and why a blog needs one

A favicon is the icon a browser shows to stand in for your whole site. The tab is where people notice it most, followed by the bookmark list, browsing history, and the icon that appears when someone saves your site to a phone home screen.

The place most people overlook is mobile search results. Google shows a site icon next to the title in results. When someone scans a dozen results, a site with a clear icon stands out against one still showing a default. That is not a ranking factor, but it does affect whether people click.

Credibility matters just as much. A reader with several tabs open recognises your site by its icon. If that icon is still the Blogger default, your site reads as newly made and unattended, however good the writing inside it is.

Get the file right first, and you will only upload once

Blogger and Google have slightly different requirements. Satisfy both from the start and you will not have to redo it.

• It must be square. Equal width and height. A tall or wide image gets squashed, and Google may decline to show it in search at all.
• The file must be under 100KB. That is a Blogger limit. Anything larger will not upload.
• Use 96 or 144 pixels a side. Google states that an icon used in search should be a multiple of 48 pixels. Err large: an image can be scaled down cleanly, never up.
• PNG is fine, .ico is not required. Google supports ICO, PNG, SVG, GIF and JPEG. PNG is easiest and supports transparency.

On the design itself, one constraint outweighs everything else: the icon will be shrunk to roughly 16 pixels on a tab. Small lettering turns to mud at that size. Use a single symbol, a single letter, or a simple shape with strong contrast against its background. Do not shrink a full logo with your site name in it.

Uploading the favicon in Blogger, step by step

1. Prepare the file. Make the square image to the spec above and save it as a PNG under 100KB.
2. Open the settings. Go to blogger.com, select the blog, and click Layout in the left menu.
3. Edit the Favicon box. It sits at the top left of the layout grid. Click the pencil icon, choose your file, and save.
4. Confirm the upload. Open a new tab and enter your blog URL followed by /favicon.ico. Seeing the new image there means it worked.

If saving throws an error, check two things before anything else: the file is over 100KB, or the image is not square. Those two account for nearly every failed upload.

Using the URL in a theme built with BlogKub

The BlogKub theme builder has a field for the favicon URL so the theme can declare the icon directly in the page. To find the URL:

• On a blogspot address: https://yourblog.blogspot.com/favicon.ico
• On a custom domain: use that domain, for example https://yourdomain.com/favicon.ico

Paste the URL into the Favicon field, export the XML, and upload it to Blogger under Theme → three-dot menu → Backup/Restore. The theme will then declare the icon to the browser from the first page load.

One warning: do not use an image URL you do not control, such as a link from a free image host or a chat attachment. The day that link dies, your icon disappears sitewide. Always use a URL on your own domain.

What Google needs before it shows your icon in search

Google showing your icon beside your results is not automatic. A few conditions apply.

• The file must be reachable. If robots.txt blocks the icon, Google cannot crawl it and will not show it.
• Keep the URL stable. Changing the icon URL repeatedly forces Google to recrawl each time.
• The icon should represent the brand. Google states the icon should stand for the site, not be unrelated or misleading imagery.
• Expect a wait. The icon appears in results only after Googlebot recrawls your home page, which can take days or weeks. There is no way to force it.

The icon changed but I still see the old one

This is the most common complaint, and it is nearly always not a settings problem. Browsers cache favicons far longer than other files because they assume icons rarely change.

Work through it in this order.

1. Check the source first. Open yourblog/favicon.ico directly. If the new image is there, the upload worked and the problem is purely display.
2. Try a private window. Seeing the new icon there confirms it is the normal browser cache.
3. Clear the cache, or simply wait a day or two and look again. It will refresh on its own.
4. Check the phone separately. Mobile caches are independent of desktop and may lag behind.

Only if /favicon.ico genuinely still shows the old image should you go back and check that you saved in Layout, and that the file met the 100KB and square requirements.

Other problems that come up

The tab icon updated but Google search still shows the old one

Normal, and it is a matter of waiting. Google crawls the icon separately from page content and refreshes on its own schedule. There is no tool to refresh only the icon. What you can do is keep the file easy to reach and stop changing its URL.

The icon looks blurry or pixelated

Usually the source image was too small and got scaled up. Rebuild it from something larger, such as 144 pixels a side, and let the system scale down instead.

The transparent background turned white or black

Some places that display the icon fill the background themselves. If you want certainty, give the icon a solid brand-coloured background rather than relying on transparency.

The icon disappeared after moving to a custom domain

Go back and update the URL in the BlogKub Favicon field to point at the new domain, then export the theme again.

Best practices

• Use one symbol or one letter. Do not shrink a full logo containing your site name.
• Pick colours that hold up against both white and dark backgrounds, because tabs come in light and dark themes.
• Keep a large master file in case you need other icon sizes later.
• Set it up when the blog is new, so you are not waiting on a recrawl once the site has traffic.
• Check the result on desktop and mobile separately, since the caches are independent.

Summary

A favicon is a ten-minute job you do once, and it shapes how your blog reads every time someone opens a tab or sees you in search. Three things are worth remembering: the image must be square, the file must be under 100KB, and the URL is always /favicon.ico. As for the icon that will not update, that is nearly always caching rather than a mistake, so check the source before drawing any conclusions.

With the icon sorted, the next thing worth doing is creating the basic pages such as About and Contact, which both readers and AdSense look for.

FAQ

Part of the BlogKub guide series. Content and schema (HowTo + FAQPage) ready to publish on blogkub.com.