You have 14 tabs open. Every one of them shows a small logo except yours, which shows a blank page or a gray globe. Or you search for your business on your phone and see competitors' logos beside their results, while yours has a generic placeholder.

A favicon is the smallest piece of your brand, but it appears almost everywhere your site does. It's also an area full of outdated advice. Many size lists online still recommend a dozen Apple, Windows and Opera icons that modern devices no longer use.

This guide explains why your site needs a favicon, which favicon sizes and formats actually matter in 2026, Google Search's favicon rules, the HTML to use, how to create the files with a favicon generator or a short script, and how to test the result.

Disclosure: Jay Barker writes for SEO Site Checker, whose free favicon generator is mentioned below. Everything else in this guide works with any tool.

Why Your Site Needs a Favicon

Favicons appear in more places than most people realize:

  • Browser tabs, bookmarks and history, where they help people find your site among dozens of others
  • Home screen shortcuts on iPhones, iPads and Android devices
  • Installed web apps and progressive web apps
  • Google's search results, where a small icon appears beside your site name, most visibly on mobile

They also signal that a site is finished and cared for. As Evil Martians' guide to the minimal favicon set puts it, "Users expect your website to have a favicon."

There's a technical reason too. Browsers often request /favicon.ico automatically, even if you never link to it. Without one, your server logs fill with 404 errors.

A favicon isn't a direct ranking factor. But a clear, recognizable icon can help your result stand out in a crowded search page and makes your brand easier to spot in a row of open tabs.

The Favicon Sizes You Actually Need in 2026

The Minimal Modern Set

Evil Martians' widely referenced guide, last updated in January 2026, recommends a small set of files that covers almost every case:

  • favicon.ico (32×32) in your site's root folder, for older browsers and tools that request it automatically
  • icon.svg, a scalable vector icon for modern browsers, which can also switch colors in dark mode
  • apple-touch-icon.png (180×180) for iPhone and iPad home screen shortcuts
  • icon-192.png and icon-512.png, referenced in a web app manifest for Android and installable web apps
  • icon-mask.png (512×512, optional), a "maskable" icon for Android's adaptive icon shapes, with the logo kept inside a central 409×409 safe zone

That's five or six files in total, each with a specific job.

Sizes You Can Skip

Older guides often list icons that modern browsers and devices no longer need:

  • Multiple Apple sizes such as 57, 72, 114 and 152 pixels. One 180×180 icon is enough
  • Windows tile images and msapplication meta tags
  • Safari pinned tab mask icons
  • Opera Coast's 228×228 icon

According to Evil Martians, Windows tiles, Safari mask icons and Opera Coast icons are no longer necessary.

What About 16, 48 and Other PNG Sizes?

Many favicon generators also output 16×16, 32×32 and 48×48 PNGs. They're harmless, and they can help older browsers, but they're optional in a modern setup. Browsers can scale down larger images, and Evil Martians notes that "Browsers download favicons in the background, so a bigger favicon image does not affect website performance."

For Google Search specifically, larger is better. Google's favicon guidelines for Search recommend "a favicon that's larger than 48x48px so that it looks good on various surfaces." An ICO file that includes a 48×48 image works, but a larger PNG gives Google more to work with.

Formats: ICO vs PNG vs SVG

ICO is a container format that can hold several image sizes in one file. It's the best fallback for older browsers and for anything that requests /favicon.ico directly.

PNG is a simple, widely supported image format. Use it for the Apple touch icon and the manifest icons.

SVG is a vector format, so it stays sharp at any size. It also supports CSS, which means one file can switch colors for dark mode. According to Can I Use, SVG favicons are now supported in current versions of Chrome, Edge and Firefox, and in Safari from version 26 on both desktop and iOS. Earlier Safari versions don't support them, which is one reason to keep an ICO fallback.

There's one more reason not to rely on SVG alone. Google Search lists its supported favicon formats as "BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF," and SVG isn't on that list. Keep an ICO or PNG favicon declared alongside your SVG.

Whatever the format, design for tiny sizes. A detailed logo with fine text often becomes a smudge at 16 pixels. Most brands use a simplified mark, an initial or a single shape.

The HTML

Add these four lines to the <head> of every page, or at least your home page and templates:

<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest">

The sizes="32x32" attribute on the ICO line matters. Evil Martians recommends it to avoid a Chrome bug where the browser chooses the ICO over the SVG.

Avoid rel="shortcut icon", which still appears in many tutorials. Evil Martians notes that shortcut was never a valid link relation, and rel="icon" is the correct form.

The manifest file lists the larger icons for Android and installable web apps:

{ "name": "Example Site", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" } ] }

MDN's web app manifest icons reference explains that a maskable icon is "designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away."

And here's a simple SVG favicon that switches colors in dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <style> rect { fill: #1f6feb; } @media (prefers-color-scheme: dark) { rect { fill: #79c0ff; } } </style> <rect width="32" height="32" rx="6"/> </svg>

Save that as icon.svg in your site's root folder, and replace the shape with your own simplified logo.

Generating the Files

With an Online Favicon Generator

The quickest route is a favicon generator. SEO Site Checker's free favicon generator takes one square image and returns a ZIP containing a multi-size favicon.ico (16, 32 and 48 pixels), PNG icons, a 180×180 Apple touch icon, 192×192 and 512×512 Android icons, a web manifest and a ready-to-paste HTML snippet. It doesn't produce an SVG, so add your own icon.svg if you want dark mode support. Its step-by-step favicon install guide covers installing the files on common platforms.

A few tips for the source image:

  • Make it square, ideally 512×512 pixels or larger
  • Keep it simple, so it still reads at tiny sizes
  • Use a solid or transparent background that works on both light and dark browser themes
  • Keep the file light. An image compressor can shrink a heavy source PNG before you upload it

With a Short Script

If you prefer to build icons in your own workflow, this Node script uses sharp to create the PNG set, including a maskable icon with the logo inside the 409×409 safe zone:

// make-icons.mjs: build a modern favicon set from one square source image // Usage: npm install sharp && node make-icons.mjs logo.png import sharp from 'sharp'; import { mkdirSync } from 'node:fs'; const src = process.argv[2] || 'logo.png'; const out = 'public'; mkdirSync(out, { recursive: true }); const { width, height } = await sharp(src).metadata(); if (width !== height) throw new Error(`Source must be square (got ${width}x${height})`); if (width < 512) console.warn(`Warning: source is ${width}px; 512px or larger gives sharper icons`); const png = (size, file) => sharp(src).resize(size, size).png().toFile(`${out}/${file}`); await png(32, 'favicon-32.png'); // input for favicon.ico await png(180, 'apple-touch-icon.png'); // iOS home screen await png(192, 'icon-192.png'); // manifest await png(512, 'icon-512.png'); // manifest // Maskable: logo shrunk into the central 409x409 safe zone on a solid background const inner = await sharp(src).resize(409, 409).png().toBuffer(); await sharp({ create: { width: 512, height: 512, channels: 4, background: '#ffffff' } }) .composite([{ input: inner, gravity: 'center' }]) .png() .toFile(`${out}/icon-mask.png`); console.log('Done: favicon-32.png, apple-touch-icon.png, icon-192.png, icon-512.png, icon-mask.png');

Then create the ICO with ImageMagick. This version packs three sizes into one file:

convert logo.png -define icon:auto-resize=48,32,16 public/favicon.ico

Tested on a 1024×1024 source, the script produces all five PNGs at the right sizes, and the ImageMagick command creates an ICO containing 48, 32 and 16 pixel images. The script also stops with a clear error if the source image isn't square. Change the maskable background color to match your brand.

On Popular Platforms

Most platforms handle part of this for you. WordPress has a Site Icon setting in the Customizer, Shopify themes include a favicon upload in theme settings, and frameworks such as Next.js support icon files placed in specific folders. Check what your platform generates before adding your own tags, so you don't end up with duplicates.

Google Search Favicon Rules

To appear beside your result in Google Search, your favicon has to meet Google's guidelines:

  • Shape and size: "Your favicon must be a square (1:1 aspect ratio) that's at least 8x8px," with larger than 48×48 recommended
  • Format: one of Google's supported formats, such as ICO or PNG
  • Crawlable: "Googlebot-Image must be able to crawl the favicon file," and it must not be blocked by robots.txt
  • Stable: "The favicon URL must be stable (don't change the URL frequently)"
  • One per site: Google supports one favicon per hostname, declared on the home page
  • Appropriate: it should represent your brand. Google substitutes a default icon for inappropriate imagery

Changes take time. Google says recrawling "can take several days to several weeks," and you can request indexing of your home page with the URL Inspection tool to speed things up. Even then, "A favicon isn't guaranteed to appear in Google Search results, even if all guidelines are met."

Testing and Caching

After adding your favicon:

  1. Open /favicon.ico directly in your browser to confirm it loads
  2. Check the Network tab in developer tools for 404 errors on icon files
  3. Test in a private window, because browsers cache favicons aggressively
  4. Add the site to a phone's home screen to check the Apple touch icon and manifest icons

If you replace an icon and the old one keeps appearing, browser caching is usually the reason. A new filename forces browsers to fetch the new icon, but Google prefers a stable favicon URL, so change it only when you genuinely update the design.

Common Mistakes

  • A non-square source image, which gets stretched or rejected
  • Using rel="shortcut icon" instead of rel="icon"
  • Blocking icon files in robots.txt, which stops Google from using them
  • Changing the favicon URL often, which slows Google's updates
  • Adding the favicon only to some pages, but not the home page
  • A detailed logo that turns into a blur at 16 pixels
  • Skipping the Apple touch icon, so iOS uses a screenshot or a generic icon instead
  • Duplicate tags from both a theme and a plugin, with different files

FAQs

What size should a favicon be?

A modern setup uses a 32×32 favicon.ico, a scalable SVG, a 180×180 Apple touch icon and 192×192 and 512×512 PNGs for Android and web apps. For Google Search, the favicon must be square and at least 8×8 pixels, and Google recommends larger than 48×48.

What is the best format for a favicon?

Use a combination. An SVG gives sharp icons and dark mode support in modern browsers, an ICO provides a fallback for older browsers and automatic requests, and PNGs serve Apple and Android home screens. Google Search doesn't list SVG as supported, so always keep an ICO or PNG favicon declared too.

Do I still need a favicon.ico file?

Yes, for compatibility. Browsers and tools often request /favicon.ico automatically, and older browsers don't support SVG favicons. A single 32×32 ICO in your site's root folder, declared with sizes="32x32", covers these cases without much effort.

Why isn't my favicon showing in Google search results?

Common causes include a non-square image, an unsupported format, a favicon blocked by robots.txt, a frequently changing URL, or a favicon declared only on inner pages. Google can also take several days to several weeks to recrawl, and it doesn't guarantee a favicon will appear even when guidelines are met.

How do I make a favicon for free?

Upload a square logo to a free favicon generator, which creates the ICO, PNG sizes, Apple touch icon, manifest and HTML for you. Developers can also generate icons with free tools such as sharp and ImageMagick. Either way, start with a simple, square image of at least 512×512 pixels.

Does a favicon affect SEO?

Not directly. A favicon isn't a ranking factor, but Google shows favicons beside search results, so a clear, recognizable icon can make your result easier to spot and may help clicks. It also improves brand recognition in tabs, bookmarks and home screens.

Wrapping Up

You don't need a dozen favicon sizes anymore. A 32×32 ICO, an SVG with dark mode, a 180×180 Apple touch icon and 192 and 512 pixel PNGs in a web manifest cover almost every browser and device. Follow Google's square, crawlable and stable rules, use rel="icon" and test in a private window.

The fastest way to get the core files is SEO Site Checker's free favicon generator. Add your own SVG for dark mode, paste the HTML and you're done.