- What is a Favicon?
- Why Add a Favicon?
- Create a Favicon
- Favicon Formats
- Add to Your Site
- Multiple Sizes
- Dark Mode Support
- Try It
- FAQ
What is a Favicon?
A favicon (short for "favorite icon") is the small icon that appears next to your page title in the browser tab, in bookmarks, in browser history, and sometimes in Google search results. It's usually 16×16 or 32×32 pixels — tiny, but immediately recognizable.
Favicons are added via a <link> tag in your HTML <head>. Browsers also automatically look for a file named favicon.ico in your site's root directory — so placing an ICO file there gives you basic favicon support with zero HTML needed.
What a favicon looks like in a browser tab:
Appears before the page title in every browser tab, bookmark, and history entry
Why Add a Favicon?
How to Create a Favicon
Step 1 — Design your icon
Keep it simple. At 16×16 pixels, complex designs become unreadable blobs. A single bold letter, a simple geometric shape, or a clear symbol works best. Use contrasting colors so it's visible on both light and dark browser UIs. Design in Figma, Canva, or even a simple image editor.
Step 2 — Generate the files
Use a free generator: favicon.io or realfavicongenerator.net. Upload your image and they output ICO, PNG (multiple sizes), and SVG versions automatically. Download the zip, extract the files, and upload them to your site's root directory.
Step 3 — Add link tags to every page's <head>
On Blogger, edit your theme template to add the tags to the global header — they'll appear on every page automatically. See the code examples below.
Favicon Formats
Add Favicon to Your Website
<!-- Inside <head> --> <!-- SVG favicon (modern, recommended) --> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <!-- ICO fallback (legacy browsers) --> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <!-- Apple Touch Icon — 180x180 for iOS home screen --> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Multiple Sizes — Full Setup
For the best experience across all devices, provide several sizes. A favicon generator handles this automatically:
<!-- Modern browsers (SVG — scales to any size) --> <link rel="icon" type="image/svg+xml" href="/favicon.svg"/> <!-- Legacy ICO fallback --> <link rel="icon" type="image/x-icon" href="/favicon.ico"/> <!-- PNG sizes for specific browsers --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/> <!-- Apple: 180x180 for iOS home screen --> <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png"/> <!-- Android PWA: 192x192 --> <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"/>
Dark Mode Support
Some browsers support different favicons for light and dark mode. This is useful when your favicon has a dark logo that disappears on dark browser UIs — serve a light version for dark mode:
<!-- Light mode favicon --> <link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)"/> <!-- Dark mode favicon --> <link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)"/>
Questions & Answers
Common questions beginners ask about this topic:
Favicons are cached very aggressively by browsers. After adding or changing a favicon, do a hard refresh: Ctrl+Shift+R on Windows/Linux or Cmd+Shift+R on Mac. If that still doesn't work, test in an incognito/private window which starts without any cache. You can also paste the favicon URL directly into the browser address bar and confirm it actually loads — if you get a 404, the file path is wrong. On Blogger, make sure the file is publicly accessible.
The base favicon.ico should contain both 16x16 and 32x32 pixel versions (ICO files can contain multiple resolutions in one file). Modern browsers prefer 32x32. For Apple devices (iOS home screen), provide a separate 180x180 PNG as apple-touch-icon. For Android PWAs, 192x192 and 512x512 are standard. SVG format handles all modern browsers with one file at any size — it's the cleanest solution.
SVG is the best choice for modern browsers — it scales to any size perfectly, has tiny file size, and supports dark mode switching. For backward compatibility, also include an ICO fallback. ICO files are the legacy format but work everywhere including older browsers. PNG is a good middle ground — transparent background, widely supported, easy to generate. The professional approach: SVG as primary + ICO as fallback, plus a 180x180 PNG for Apple Touch Icon.
Yes — Google's reviewer checklist includes signs that a site is complete and professional. A missing favicon is a small red flag that adds up with other incompleteness signals. It won't get you approved or rejected on its own, but combined with a proper About Us page, Privacy Policy, real content, and working navigation — a favicon is part of presenting a polished, legitimate site. It's also the simplest item on the completeness checklist to fix.
Yes — it's a popular trick for personal sites and blogs. Create an SVG file with a <text> element containing your emoji. It renders at any size without pixelation and requires no image editor. The downside is emoji look slightly different across operating systems (Windows, Mac, Android), so the same emoji may look different for different users. For a professional brand, a custom icon is better. For a personal blog, an emoji favicon is perfectly reasonable.