What Is a Favicon in SEO?

What a favicon is

A favicon is the small icon that identifies a website. Browsers show it in tabs, bookmarks and history lists, and search engines can show it beside a site's name in results. The name comes from "favorites icon," after the bookmark lists where it first appeared.

In vector logo design, the favicon is the smallest place a brand mark has to work. It is usually not the full lockup, meaning the combined arrangement of symbol and wordmark. It is typically the symbol alone, a monogram or a single letter, redrawn so it stays recognizable at a tiny size.

Where SEO comes in

In SEO, the favicon matters because Google can display it next to a site's name in search results. Google reads the icon declared on the site's homepage. Its documentation sets basic conditions: the file must be crawlable, the image should be square, and it should visually represent the brand. The exact size recommendations and rules can change, so check Google Search Central's current favicon guidance before exporting final files.

Google has not documented the favicon as a ranking factor. Its role is presentation. It helps searchers recognize a site among other results. Whether a particular favicon changes click-through rates for a given site cannot be established in general. That would need measurement against the site's own search data.

Google may show a generic default icon if it cannot fetch the declared file, or if it judges the icon unsuitable, for example because it is inappropriate or does not represent the site.

Vector geometry, raster pixels and file containers

Favicon discussions often blur three separate ideas. Vector geometry describes shapes as mathematical paths that can scale without loss. Raster content is a fixed grid of pixels. A file container is the format that packages one or the other. Every favicon ends up as pixels on screen. The difference is whether those pixels are drawn in advance or rendered by the browser from paths.

Format | What it contains | Main strength | Main limitation

ICO | One or more raster images at different pixel sizes, bundled in one container | Long-standing browser support; can hold several hand-tuned sizes | Raster only; each size must be prepared separately

PNG | A single raster image | Simple to export and widely accepted | Fixed resolution; needs separate files for separate sizes

SVG | Vector paths, plus optional embedded styles | Scales to any size; can switch colors for dark mode | Browser support for SVG favicons varies; tiny sizes cannot be pixel-tuned by hand

How favicon size affects the logo

Shrinking a logo to favicon size changes how its geometry reads. A stroke thinner than one screen pixel cannot be drawn cleanly. It is antialiased, meaning blended into its background, and shows up as a faint gray line. Counters, the enclosed spaces inside letters such as "o" or "e," can fill in. Small text becomes unreadable.

For example, a wordmark with hairline serifs that looks refined on a business card may shrink to a gray smudge in a browser tab. A bold single-letter monogram drawn from the same brand usually survives. Screen density changes the outcome. High-density displays give the icon more physical pixels, so fine detail holds up better than on standard-density screens. Both still show the icon at a small display size, so the simplified version is usually needed.

• Use the symbol or a monogram instead of the full lockup.
• Thicken strokes and widen gaps so they stay distinct at small sizes.
• Remove details that cannot be resolved in the available pixels.
• When exporting raster sizes, align key straight edges to the pixel grid to reduce blur.
• Check the result at actual display size, not zoomed in.

Dark mode variants

Browser tabs, bookmarks and search results may appear on light or dark backgrounds, depending on the user's theme. A dark mark on a transparent background can disappear against a dark tab bar. A light mark can disappear in light mode. A dark mode variant addresses this mismatch.

There are two main approaches. The first is a single design with built-in contrast, such as a mark placed on a solid tile or given an outline, so it reads on both backgrounds without switching. The second is an SVG favicon that contains an embedded media query. The media query changes the fill color when the browser reports a dark color scheme, so the vector paths stay the same and only their styling switches.

<!-- In the page head: raster fallback plus SVG version -->
<link rel="icon" href="[path to ICO file]" sizes="any">
<link rel="icon" href="[path to SVG file]" type="image/svg+xml">

<!-- Inside the SVG file -->
<style>
  .mark { fill: #1a1a1a; }
  @media (prefers-color-scheme: dark) {
    .mark { fill: #f2f2f2; }
  }
</style>
<path class="mark" d="..." />

Several caveats apply. Not every browser supports SVG favicons, so keep a raster fallback in ICO or PNG format. The media query responds to the browser's or operating system's color setting, which may not match the color of the surface where the icon appears. It is also not confirmed that Google Search honors an SVG's internal media query when it shows the icon in results. Google may display only one rendered version. For that reason, the most dependable choice for search display is a design that stays legible on both light and dark backgrounds without relying on color switching.

Preparing favicon artwork

• Start from the vector master logo and create a dedicated small-size version instead of scaling down the full artwork.
• Convert any type to outlines, meaning turn letters into vector paths, so the SVG does not depend on installed fonts.
• Clean the paths: remove hidden objects, stray points and unused styles before exporting the SVG.
• Export raster sizes from the small-size version and check each one at actual pixel dimensions.
• Declare the icons on the homepage and confirm the files load without being blocked from crawling.
• Preview the icon on light and dark browser themes, then check search results after the site has been recrawled.