How to Choose a Favicon Design and Color for Your Brand

The short answer

A good brand favicon is one simplified mark from your logo, usually the symbol, a monogram or a single letter, in a color that stays visible on both light and dark browser interfaces. To get that, either place the mark on a solid background shape in your brand color, or supply a separate dark mode variant whose colors change when the user's system is set to dark mode. Build the mark as clean vector artwork first. Then export the formats your target browsers and platforms request.

Some terms used in this guide. A favicon is the small icon a browser shows in tabs, bookmarks and history lists. Vector artwork describes shapes as mathematical paths rather than pixels, so it can be scaled without losing sharpness. A mark is the part of a logo that can stand on its own without the full name. A container, also called a tile, is a filled background shape behind the mark, such as a square, rounded square or circle. A dark mode variant is an alternative version of the icon with colors adjusted for dark interfaces.

Why color is the hardest decision

You don't control the background behind your favicon. Browser tabs, bookmark bars and address bars can be light, dark or tinted, depending on the browser, the operating system theme and the user's settings. A dark navy mark that looks sharp on a white tab can disappear on a dark gray one. A white mark has the reverse problem. Because the icon is tiny, the edge between the mark and its background has to do most of the work of making it recognizable. Brand accuracy alone is not enough.

Choosing the design: what to take from the logo

• Start from the most distinctive standalone element of the logo, such as a symbol, monogram or initial. Do not shrink the full wordmark.
• Remove detail that won't survive at small sizes: thin strokes, small counters (the enclosed spaces inside letters), fine gaps, taglines, gradients, shadows and textures.
• Favor bold, simple silhouettes. If the mark is still recognizable as a solid single-color shape, it is likely to hold up as a favicon.
• If the logo has no usable symbol, consider a single letter from the brand typeface. You may need to redraw it so its weight holds up at small sizes.
• Keep the result recognizably connected to the main logo, so the favicon reads as the same brand rather than a new identity.

Choosing the color: three workable approaches

Each approach below handles the unknown background differently. The container approach is usually the simplest and most predictable. Use a dark mode variant when the brand needs the mark to appear without a background shape.

Approach | How it works | Strengths | Trade-offs

Container (tile) | Mark in a contrasting color on a solid brand-colored shape | Controls its own contrast, so it reads on any tab color, and needs only one version | Adds a shape that isn't part of the original logo and takes space from the mark

Dark mode variant | Separate color sets for light and dark interfaces, switched automatically | Mark can appear without a background and stays on brand in both modes | More artwork to maintain, and the automatic switch is not supported everywhere

Single mid-tone color | One brand color chosen to contrast with both light and dark backgrounds | One file and no container | Only works if the brand palette has a suitable mid-tone, and contrast may still be weak on some tab colors

Whichever approach you choose, check contrast between the mark and every background it will appear on, not just the brand's usual background. If the brand has several colors, the favicon usually works best with one or two. Extra colors rarely survive at tab size.

Preparing the vector artwork

• Convert any text to outlines so the favicon does not depend on installed fonts.
• Expand strokes into filled shapes and merge overlapping shapes, so the mark is made of clean, closed paths.
• Remove hidden objects, empty groups, clipping masks you don't need and unused swatches. These add file weight and can render unpredictably.
• Avoid effects that depend on the design application, such as live filters, blend modes and raster textures.
• Build the mark on a square artboard and leave consistent padding on all sides, so it doesn't look cramped or off-center in the tab.
• Check the shapes at small preview sizes and nudge key edges so they fall cleanly on the pixel grid where possible. This keeps edges crisp instead of blurry.
• For a dark mode variant, keep the paths identical and change only the fill colors. Then both versions stay in sync.

Delivering light and dark variants

An SVG favicon can contain an embedded style rule with a prefers-color-scheme media query. This rule changes the fill colors when the user's system is set to dark mode, so one file can serve both appearances. Browser support for SVG favicons, and for media queries inside them, is not universal. Treat this as an enhancement and also provide a raster fallback, such as PNG or ICO, in colors that work on both light and dark backgrounds. The container approach is a good choice for that fallback because it doesn't rely on switching.

Some platforms ask for their own icon files, such as home screen or app-style icons, and may not follow the browser's color scheme. Check the current documentation for each platform you target. Note which sizes and formats are documented requirements and which are only recommendations, because guidance changes over time.

When you receive favicon artwork from someone else, a file extension proves very little. An SVG or EPS file can contain embedded raster images instead of true paths. It can also be hard to edit, or the logo inside it may not be cleared for reuse. Open the file and inspect the paths. Confirm that you have the right to use the mark before building on it.

Verifying the result

• View the favicon in real browser tabs with the system set to light mode and then to dark mode.
• Test every browser and platform your audience uses, and confirm whether each one shows the SVG variant or the fallback.
• Check the icon in the bookmark bar, history list and pinned tabs, since these may use different backgrounds than the active tab.
• Open several other sites in nearby tabs and confirm your icon is still distinguishable at a glance.
• Zoom out or view on a standard-density screen to make sure fine details haven't blurred together.
• Confirm that the light and dark versions still read as the same brand mark.

Gaps in this guide

No source material specific to this topic was supplied for this guide. It therefore gives no exact pixel sizes, contrast ratios, file size limits or browser-by-browser support details. Its recommendations are general design and file-preparation principles. Confirm the technical specifics against current browser and platform documentation, and check your brand guidelines for approved colors and any rules for using the logo mark on its own.