Where is the favicon setting in Blogger?

In Layout. Click the edit icon on the Favicon gadget at the top of the Layout page, upload a square image under 100KB, and save. Blogger handles the resizing and markup.

What size and file limit does a Blogger favicon have?

Upload a square image - 512x512px downscales cleanly - and keep the file under Blogger's 100KB limit. Blogger resizes it to the browser-tab icon automatically.

Can I add an Apple touch icon in Blogger?

The Favicon gadget only sets the browser icon. For an Apple touch icon or PWA icons you edit the theme HTML (Theme, then Edit HTML) and add the extra link tags in the head.

Why is my Blogger favicon not showing?

Confirm the image is square and under 100KB, that you saved the gadget, then hard-refresh or open a private window. Browsers cache favicons, so the old one can linger for a while.

All platforms

Favicon for Blogger

How to add a favicon in Blogger

To add a favicon in Blogger, open your blog dashboard, go to Layout, click the edit (pencil) icon on the Favicon gadget at the top, and upload a square image under 100KB. Blogger resizes it to the browser-tab icon and serves it across your blog automatically.

What you need

A square image, ideally 512x512px, kept under Blogger's 100KB favicon upload limit.
Blogger generates the tab icon and adds the markup for you.
Theme HTML edits if you want Apple touch or PWA icons the gadget does not set.

Step-by-step: add a favicon in Blogger

Open Layout. From the Blogger dashboard, select your blog, then click Layout in the left menu.
Edit the Favicon gadget. At the top of the Layout, find the Favicon gadget and click the edit (pencil) icon.
Upload and save. Choose a square image under 100KB, upload it, and click Save. Blogger applies the favicon across your blog after a refresh.

Common mistakes to avoid

Uploading a file larger than 100KB, which Blogger rejects - compress or resize first.
Using a non-square or detailed logo that turns to mush at 16x16; use a simple square mark.
Expecting Apple touch and PWA icons from the gadget; it only sets the browser favicon.
Not hard-refreshing after saving, so the cached old icon still appears.

Free forever, no sign-up

Generate a complete icon set for Blogger

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for Blogger. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where is the favicon setting in Blogger?: In Layout. Click the edit icon on the Favicon gadget at the top of the Layout page, upload a square image under 100KB, and save. Blogger handles the resizing and markup.
What size and file limit does a Blogger favicon have?: Upload a square image - 512x512px downscales cleanly - and keep the file under Blogger's 100KB limit. Blogger resizes it to the browser-tab icon automatically.
Can I add an Apple touch icon in Blogger?: The Favicon gadget only sets the browser icon. For an Apple touch icon or PWA icons you edit the theme HTML (Theme, then Edit HTML) and add the extra link tags in the head.
Why is my Blogger favicon not showing?: Confirm the image is square and under 100KB, that you saved the gadget, then hard-refresh or open a private window. Browsers cache favicons, so the old one can linger for a while.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.