Favicon Best Practices: Choosing a Symbol That Survives at Tiny Sizes
Favicon best practices for picking the right logo element, simplifying vector artwork for small sizes, and preparing SVG and raster files that display reliably.
Contents
A favicon is the small icon browsers show in tabs, bookmarks, history lists and, on mobile devices, home-screen shortcuts. The most important best practice is to avoid shrinking your full logo. Instead, choose the single most recognizable element of the brand mark, simplify it for very small pixel grids, and export it in the formats browsers and devices expect. The sections below cover symbol selection, how vector source artwork supports that work, and what to check before delivery.
The short answer
Build the favicon from one bold, simple shape: a monogram, an initial, a distinctive symbol from the logo, or a cropped part of the mark. Use strong contrast and a limited palette, and remove fine detail. Keep a clean vector master as the source file. From that master, produce an SVG favicon for browsers that support it, plus raster PNG or ICO versions as fallbacks and for platform-specific icons.
Why a full logo rarely works as a favicon
The smallest common favicon sizes are only a few dozen pixels across, and the smallest is 16 by 16. At that scale, wordmarks become unreadable and thin strokes break apart or blur into the background. Taglines, small counters inside letters, gradients and closely spaced shapes also lose definition. A horizontal lockup has the added problem of being squeezed into a square, which leaves the important part of the logo very small. A favicon works best as a reduced identity mark that the full logo supports.
How to select the symbol
- Start from an existing symbol if the logo has one. A standalone icon or emblem is usually the strongest candidate because it was designed to be recognized without text.
- Use an initial or monogram if the logo is text-only. A single letter drawn in the brand typeface, or redrawn for clarity, is a common and legible choice.
- Crop to a distinctive detail when neither option fits. A memorable part of the mark, such as a particular curve, cut or shape, can stand in for the whole.
- Prefer a shape that reads within a square. Square or round symbols fill the icon area well, while very wide or tall shapes end up small.
- Test recognition, not just accuracy. The right choice is the one people associate with the brand at a glance, even if it drops detail from the original.
Simplifying the artwork for small sizes
- Thicken strokes and enlarge gaps so they survive reduction to a handful of pixels.
- Remove secondary details, shadows, textures and gradients, or replace gradients with flat color.
- Limit the palette to one or two strong colors with clear contrast against both light and dark browser interfaces.
- Align key edges to the pixel grid for the smallest raster exports so they render crisply instead of blurring.
- Consider a separate, more simplified drawing for the smallest sizes. Larger icons, such as home-screen icons, can carry slightly more detail than a tab icon.
- Check the icon against light and dark tab backgrounds. A transparent background can disappear if the mark is a similar tone to the browser interface.
Vector master versus delivered files
A vector master, usually in AI, EPS, PDF or SVG format, lets the favicon be resized and adjusted without quality loss. However, a file extension does not guarantee editable vector paths. An SVG or PDF can contain an embedded raster image, and a vector-looking file may only be a raster preview. Before you build a favicon from supplied artwork, open the file in a vector editor and confirm that the shapes are actual paths. If the source turns out to be raster, the mark may need to be redrawn to produce clean small-size versions.
The delivered favicon files are usually a mix of vector and raster formats. The vector master is for editing and future exports, while the PNG and ICO files are fixed-resolution outputs made for specific uses.
| File | Type | Typical purpose |
| SVG favicon | Vector | Scalable tab icon in browsers that support SVG favicons; can include a color change for dark mode through a media query inside the file |
| ICO | Raster container | Legacy fallback that can bundle several small sizes, commonly 16 and 32 pixels, in one file |
| PNG at small sizes | Raster | Standard browser favicons where SVG is not used |
| Apple touch icon (PNG, commonly 180 by 180) | Raster | Icon shown when an iOS user saves the site to the home screen |
| Web app manifest icons (PNG, commonly 192 by 192 and 512 by 512) | Raster | Icons for installed web apps and Android home screens |
| Vector master (AI, EPS, PDF or SVG) | Vector | Editable source for future adjustments and exports |
Browser and platform support for each format changes over time, particularly for SVG favicons and dark-mode behavior. Confirm current requirements against up-to-date browser and platform documentation instead of relying on a fixed checklist. Including a raster fallback alongside an SVG favicon remains the cautious approach.
Implementation checks before delivery
- Reference each favicon file in the page head with the correct type and size attributes, and include a web app manifest if the site is meant to be installable.
- Preview the icon at actual size in real browser tabs, bookmarks and mobile home screens. Zoomed-in artboard views do not show how it will really look.
- Check rendering in both light and dark browser themes.
- Give home-screen icons a solid background and enough padding. Some platforms crop or mask icons into rounded or circular shapes, which can clip marks that run to the edge.
- Keep naming and folder structure consistent so later updates replace every size together.
Rights and permissions
When the favicon comes from your own brand's logo, the main question is whether the supplied artwork and any fonts are licensed for modification and web use. When the logo belongs to someone else, being able to download it does not grant permission to alter it, crop it into an icon, or use it to represent a site. Trademark rights and font licenses apply separately from file access. Confirm usage rights with the owner before you adapt a third-party mark.
Gaps in this guidance
No subject-specific evidence was supplied for this article, such as testing data, browser support tables or recognition studies. The recommendations here rely on widely documented favicon conventions and general design principles, and they reflect editorial judgment, not measured results. The pixel sizes named above are common conventions. Verify exact size lists, format support and platform masking behavior against current official documentation before finalizing a delivery.