What is a favicon and why does it matter for SEO?
A favicon ("favorite icon") is a small square image browsers display in tabs, bookmarks, and the address bar. Since 2022, Google also shows favicons next to organic results on mobile and desktop — meaning your favicon directly influences click-through rate from search.
Beyond SEO, favicons appear as the app icon when users "Add to Home Screen" on iOS and Android, in PWA install prompts, and in browser history and bookmark folders. A missing or generic favicon makes a site look amateur; a sharp, on-brand one builds instant recognition.
What sizes do you actually need in 2026?
- favicon.ico — 16×16, 32×32, 48×48 (multi-resolution, classic browser tab).
- favicon-16x16.png and favicon-32x32.png — modern browsers prefer PNG.
- apple-touch-icon.png — 180×180, used by iOS Safari for home-screen shortcuts.
- android-chrome-192x192.png and android-chrome-512x512.png — Android PWA icons.
- A maskable 512×512 PNG with safe-zone padding — for adaptive Android icons.
- site.webmanifest — JSON file pointing Android/Chrome to the right icons.
Step-by-step: create your favicon in your browser
- 1Open the EazyAITools Favicon Generator — no signup, no install.
- 2Upload a square source image (a logo mark, monogram, or emoji works best). PNG with transparency at 512×512 or larger gives the cleanest output.
- 3The tool auto-generates every required size — .ico, PNGs for iOS and Android, and the web manifest.
- 4Download the favicon pack as a single .zip file.
- 5Unzip it and upload all files to the root of your website (the same folder as index.html).
- 6Paste the HTML snippet (below) into the <head> of every page. Done.
The HTML snippet you need in <head>
Modern browsers look for several favicon link tags. Add these inside the <head> of your site — once, in your main layout or template:
<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" />
That's it — Chrome, Safari, Firefox, Edge, iOS, and Android will all pick the right size automatically.
Design tips for a favicon that actually reads at 16 pixels
- Use a single bold shape, monogram, or letter — full logos with text become an unreadable smear at 16×16.
- High contrast against both light and dark browser themes. Test on a dark tab background.
- Avoid thin strokes (under 2px at 32×32) — they disappear when scaled down.
- Add ~10% padding around the icon so it doesn't touch the edges.
- Use a transparent background, not white — it adapts to dark mode tabs.
- Stick to 1–2 colors. Subtle gradients survive scaling; detailed photos don't.
Why Google sometimes doesn't show your favicon in search
Google has specific requirements: the favicon must be a multiple of 48×48 (so 48, 96, 144, 192… — your apple-touch-icon at 180 doesn't count, but a 192×192 PNG does), served from a crawlable URL, and stable (don't change it weekly). Use a <link rel="icon"> tag on the homepage that points to at least a 48×48 image.
After deploying, request re-crawl in Google Search Console. It can take a few days to a few weeks for the new favicon to appear in SERPs.
Privacy: why a browser-based generator beats uploading to a stranger's server
Most online favicon generators upload your logo to their server, process it, and email you a download link. Your unreleased brand mark sits on someone else's disk indefinitely.
EazyAITools' Favicon Generator runs entirely in your browser using the Canvas API. Your source image never leaves your device — verify by going offline after the page loads: the tool still works.
FAQ
- Do I still need favicon.ico in 2026?
- Yes. Older browsers and many crawlers still request /favicon.ico by default, so keep it in your root even if you serve PNGs to modern browsers.
- Can I use an emoji as a favicon?
- Yes — render the emoji on a 512×512 canvas, export as PNG, then run it through the generator. SVG favicons with emoji also work in modern browsers.
- Why does my favicon look blurry?
- Your source image is probably too small or non-square. Always upload at least 512×512 with a 1:1 aspect ratio.
- How do I update a favicon that's already cached?
- Browsers cache favicons aggressively. Add a query string (e.g. /favicon.ico?v=2) in the <link> tag to force a refresh.
- Is SVG a good favicon format?
- Yes for modern browsers — add <link rel="icon" type="image/svg+xml" href="/favicon.svg" />. Keep PNG and ICO fallbacks for older browsers and Google.
- Is the favicon generator free?
- Yes. EazyAITools' Favicon Generator is 100% free, unlimited, with no signup, no watermark, and no upload to any server.