How to Add a Favicon in Google Sites & Blogger
Published November 29, 2025 · Updated June 9, 2026
Both have a built-in favicon setting: Blogger uses Settings → Favicon, new Google Sites uses the Settings gear → Brand images. Upload one square image.
Both Google Sites and Blogger have a built-in favicon setting, so you don’t touch any code. In Blogger, go to Settings → Favicon and upload a square image (ideally 512×512 or larger, under about 100KB). In new Google Sites, click the Settings gear in the editor, open the Brand images section, and upload your Favicon. Each platform accepts one square image, downscales it, and serves it as your tab icon. Then publish or republish and wait — Google caches favicons, so the change isn’t instant.
In one line: upload one square image in the built-in setting, publish, then wait for Google’s cache to catch up.
The catch with both products is that they’re closed: you upload a single image and that’s the whole favicon. You can’t add custom <link> tags, an Apple touch icon, or a PWA manifest the way you would on a self-hosted site. Below are the exact steps for each platform, the size rules, and how to fix the new icon when it stubbornly won’t show.
Prepare one square source image
Both platforms take a single image and crop it square, so start with a square source. Use a 512×512 PNG (or larger) and keep the file under about 100KB to avoid upload errors. A square image matters: rectangular logos get cropped aggressively, and anything off-centre ends up clipped.
You don’t need to hand-export a multi-size favicon.ico or a dozen separate PNGs here — neither platform lets you upload them, and Google downscales your one image to the small tab size for you. (That older “export ten sizes” advice is outdated anyway.) You just need one clean, sharp square.
If you don’t have a square version of your logo, FaviconBuilder makes one from a single upload — drop in an SVG (preferred) or a PNG/JPG at 512×512 or larger and download a square 512×512 PNG to use here. It’s free, there’s no account, and the image never leaves your browser. (How to create a favicon from a logo →)
How to add a favicon in Blogger
Blogger has a dedicated favicon control in its settings:
- Sign in to Blogger and select your blog.
- In the left menu, click Settings.
- Scroll to the Basic group and click Favicon.
- Click Choose File, pick your square image (PNG, ideally 512×512, under ~100KB), and confirm.
- Save. The favicon updates for the live blog automatically — there’s no separate “publish” step.
Blogger serves the icon from your blog root (the path browsers auto-request). If you later move the blog to a custom domain, the favicon follows.
Editing Blogger theme HTML (advanced, optional)
Blogger does give advanced users access to the theme, so if you genuinely need extra icon tags you have a route that new Google Sites doesn’t offer. Go to Theme → Customise → Edit HTML and you can edit the template’s <head> directly.
Two cautions. First, make sure the theme includes <b:include data='blog' name='all-head-content'/> inside <head> — that’s the tag Blogger uses to inject its own favicon markup, and removing it breaks the built-in setting. Second, check for stale <link rel="icon"> tags left by an old theme; a leftover tag can override the favicon you just uploaded. Edit the theme HTML only if you’re comfortable with it — a bad edit can break the layout. For correct tag syntax, see the favicon HTML reference.
How to add a favicon in new Google Sites
The new Google Sites (the current sites.google.com editor) puts the favicon in site settings:
- Open your site in Google Sites.
- Click the Settings gear icon in the top toolbar.
- Open the Brand images section.
- Find Favicon and upload your square image. Google Sites crops it to fit.
- Click Publish (or Republish) — the favicon only goes live after you publish.
That’s the whole feature. New Google Sites does not let you edit the page <head>, so there is no way to add <link> tags, an Apple touch icon, or a web app manifest. The single favicon upload is all the control you get. If you need a full multi-format icon set with custom HTML, that’s a sign you’ve outgrown Google Sites and should look at a platform that exposes the markup — see adding a favicon in WordPress or in Shopify and other website builders.
Classic vs new Sites: these steps are for the current Google Sites. The retired “classic” Sites used a different favicon process, but Google has migrated those sites, so almost everyone is on the new editor today.
Why the new favicon takes time to appear
Google caches favicons heavily across its products and in the browser, so a freshly uploaded icon rarely shows up immediately. This is normal — it isn’t a sign your upload failed. Expect it to take anywhere from a few minutes to up to 24 hours, and longer in search results, where Google recrawls on its own schedule.
The cache is the single most common reason people think the favicon “didn’t work.” Before changing anything, give it time.
Troubleshooting: favicon not showing
Work through these in order before assuming the upload is broken:
- Confirm the basics. Was the image square? Was it under ~100KB? On Google Sites, did you click Publish after uploading? An unpublished change never goes live.
- Bypass the browser cache. Open the site in a private/incognito window, or hard-refresh. Your own browser caches the old icon longest.
- Clear cached images. In Chrome: Settings → Privacy and security → Clear browsing data → Cached images and files.
- Test in a second browser. If a fresh browser or another device shows the new icon, the file is live and you’re only seeing your local cache.
- Wait it out. If everything’s correct, the remaining delay is Google’s cache. Up to 24 hours is normal.
For a full diagnostic walkthrough that applies to any platform, see favicon not showing? how to check and fix it.
Keep the icon consistent with your brand
Because Google Sites and Blogger only take one image, the quality of that single square is everything. Use the same logo, colours, and shapes as your main site so the tab icon reads as you — and design it to survive being shrunk to a 16-pixel tab. One bold shape and strong contrast beat a detailed logo that turns to mush at small sizes. (Favicon design best practices →)
Summary
Both platforms have a built-in favicon setting and neither needs code:
- Blogger: Settings → Favicon → upload a square image (ideally 512×512, under ~100KB) → save.
- New Google Sites: Settings gear → Brand images → Favicon → upload a square image → Publish.
- One image only. Both crop and downscale a single square upload; you can’t add
<link>tags or a manifest. - Blogger can go further. Advanced users can edit the theme HTML for extra icon tags; new Google Sites cannot edit the
<head>at all. - Expect a delay. Google caches favicons, so allow up to 24 hours and test in an incognito window.
Continue reading:
Frequently asked questions
How do I change the favicon in Blogger?
Sign in to Blogger, open your blog, and go to Settings → Favicon. Click it, upload a square image (ideally 512×512 or larger, under ~100KB), and save. The icon can take a while to appear because Google caches favicons — check in an incognito window.
Where is the favicon setting in new Google Sites?
In the new Google Sites editor, click the Settings gear in the top toolbar and open the Brand images section, which contains the Favicon upload. Add a square image, then publish or republish the site to push it live.
What size should a Google Sites or Blogger favicon be?
Upload a square source image, ideally 512×512 pixels or larger, and keep it under about 100KB. Both platforms downscale and crop one image to the sizes they serve, so a large square source keeps the small tab icon sharp.
Why isn't my new favicon showing in Google Sites or Blogger?
Google caches favicons aggressively, so a new icon can take hours to appear. Confirm you uploaded a square image and republished, then check in a private/incognito window or after clearing cached images. Give it up to 24 hours before assuming something is wrong.
Can I add custom favicon HTML or PWA icons in Google Sites or Blogger?
Not in new Google Sites — it gives you one favicon upload and no access to the page <head>, so you cannot add <link> tags, Apple touch icons, or a manifest. Blogger is different: advanced users can edit the theme HTML (Theme → Edit HTML) to add extra icon tags.