Favicon design examples for websites

A favicon is the small image a browser shows next to a page title in tabs, bookmarks, history lists and some search interfaces. The most useful examples are not full logos shrunk down. They are reduced versions of a brand mark, such as a single letter, a standalone symbol or a cropped part of the logo, redrawn so their edges and strokes land cleanly on a very small pixel grid. This article describes those common patterns, explains why pixel grid refinement matters, and shows how a vector logo becomes the set of files a website delivers.

Evidence gap: no verified examples of specific brands' favicons, measurements or test results were supplied for this article. The examples below are general design patterns, not reviews of particular websites.

What a favicon image actually is

At the browser tab, a favicon is usually shown at roughly 16 by 16 pixels, and at 32 by 32 or larger on high-density screens and in some interface areas. Whatever the source format, the image is ultimately displayed as pixels at that size. This is why a favicon logo needs a different approach from a logo printed on a sign or shown in a website header: there are very few pixels available, and every shape has to be readable within them.

A website icon also appears in other contexts, such as home-screen shortcuts on phones and installed web apps. Those uses typically call for larger square images, so one brand can need a tiny tab icon and several larger app-style icons drawn from the same artwork.

Common favicon design patterns

Most website favicons fall into a handful of recognizable patterns. The right choice depends on what the existing logo contains and how much of it survives reduction.

Pattern | What it looks like | Works best when | Pixel grid risk

Lettermark | A single initial from the brand name | The brand name starts with a distinctive letter or the logo already uses a custom letterform | Thin or curved strokes can blur; counters such as the inside of an a or e can fill in

Monogram | Two or three combined initials | Initials are already a recognized part of the identity | Too many letters crowd the grid and become illegible at 16 pixels

Standalone symbol | The logo's icon without the wordmark | The logo has a simple, bold symbol | Fine internal details and thin outlines disappear

Cropped mark | A recognizable portion of a larger emblem or illustration | The full mark is too complex but has a distinctive element | The crop may lose the shape that makes it recognizable

Simplified mascot or character | A reduced face or silhouette | The character is central to the brand | Facial features and small details need heavy redrawing

Shape container | A letter or symbol placed inside a solid circle, square or rounded square | The mark needs contrast against both light and dark browser themes | The container eats into the limited space, shrinking the mark inside it

Full wordmarks, taglines and multi-line lockups rarely work as a tab icon. Text that is legible in a header becomes an unreadable smudge when reduced to a few pixels in height.

Vector artwork describes shapes mathematically, so it can be scaled to any size without losing smoothness. A screen, however, displays a fixed grid of square pixels. When a vector shape is converted to pixels at a small size, any edge that falls between two pixel boundaries is rendered as partially filled, grey-toned pixels through anti-aliasing. At large sizes this looks smooth. At 16 pixels it makes the icon look soft or blurry, because a large share of the image ends up being those in-between pixels.

Pixel grid refinement, sometimes called pixel fitting or hinting, means adjusting the artwork so that important edges sit exactly on pixel boundaries at the target size. The result is crisper horizontal and vertical lines, consistent stroke weights and clearer separation between shapes. Because the grid is different at each size, a design fitted for 16 pixels is often not perfectly fitted for 32, which is why careful favicon work treats the smallest sizes individually rather than relying on automatic scaling.

Refining a vector logo for a small grid

Start from the vector master, not from a screenshot or exported image, so shapes can be adjusted precisely.
Choose the element to keep: a letter, a symbol or a crop. Remove wordmarks, taglines and decorative details.
Set up an artboard matching the target size, for example 16 by 16 and 32 by 32, with the pixel grid visible and snapping enabled.
Align straight edges and the outer bounds of shapes to whole-pixel positions.
Use stroke and gap widths that equal whole pixels at the target size, so a line is one or two full pixels wide rather than one and a half.
Open up small enclosed spaces, such as the counters of letters, so they do not fill in.
Simplify curves and reduce the number of distinct colors; small areas of subtle color difference are not perceptible at this size.
Decide how much padding to leave around the mark; filling more of the square improves visibility but can make the icon feel cramped.
Preview the result at actual size against both light and dark tab backgrounds, and adjust contrast or add a container shape if the mark disappears on one of them.
Repeat the fitting step for each small size instead of assuming the 32-pixel version scales down cleanly to 16.

These steps describe general practice. How much redrawing a particular logo needs is an editorial judgment that depends on its shapes; a bold geometric mark may need little change, while a detailed emblem may need a substantially new small-size drawing.

Vector source files and delivered favicon files

A favicon project usually involves two kinds of files: an editable vector source kept by the designer or brand owner, and the delivery files the website actually references. They serve different purposes and should not be confused.

File type | Vector or raster | Typical role

Editable vector source (for example AI, EPS, PDF or SVG with live paths) | Vector, if it contains real paths | Master artwork used to produce and later revise every size

SVG favicon | Vector format; may also contain embedded raster images | Scalable browser icon supported by many modern browsers; can include styling that adapts to light or dark themes

ICO | Raster container | Legacy-compatible browser icon that can hold several pixel sizes, such as 16 and 32, in one file

PNG icons | Raster | Fixed-size icons for browsers, phone home screens and web app manifests, commonly at larger square sizes

Browser support and the exact set of required sizes change over time, so the current documentation for the browsers and platforms a site targets is the reliable reference. The general principle holds regardless: keep one well-structured vector master, and export hand-checked raster sizes from it for the smallest uses.

Checking whether a favicon file is really vector

A file extension alone does not prove that a favicon contains editable vector paths. An SVG can simply wrap an embedded raster image, and a PDF or EPS can contain a placed bitmap rather than drawn shapes. Opening the file in a vector editor and inspecting it is the way to confirm: genuine vector artwork shows selectable paths and anchor points, while an embedded image appears as a single rectangular object that pixelates when enlarged. ICO and PNG files are raster by nature and cannot be turned back into clean, editable vectors without redrawing or tracing.

Using other websites' favicons as examples

Looking at how established sites reduce their logos is a reasonable way to study favicon design patterns. Being able to view or download another site's favicon, however, does not grant permission to copy, modify or reuse its artwork. Logos and icons are typically protected as trademarks and may also be protected by copyright, and any custom lettering or typeface in them may carry its own license terms. For your own favicon, work from artwork you own or are licensed to adapt, and confirm that the license covers modification and use as a website icon.

What this overview does not establish

No specific brand examples, browser test results, rendering measurements or file-size figures were available for this article, so it does not rank particular favicons or claim that any single pattern performs best. Choosing among the patterns above, and judging how much grid refinement a logo needs, requires previewing the actual artwork at actual size in the browsers and devices that matter for the site.