Favicon Design Guide: Sizes, File Formats, and Tools for Modern Websites

Overview

A favicon can appear in browser tabs, bookmarks, browser history, mobile home-screen shortcuts, and other interface locations. These contexts do not always use the same dimensions or file type, so treating the favicon as one exported image can lead to soft edges, unexpected cropping, or an icon that works in one place but not another.

The most reliable approach is to create one carefully designed master icon, then export a small set of purpose-specific files. For many websites, that set includes a square PNG, an SVG for interfaces that support it, and an ICO file for broad legacy compatibility. A web manifest may also reference larger PNG artwork when visitors add a site to a device home screen. Requirements can vary by browser, operating system, framework, and implementation, so use this guide as a practical baseline and confirm the behavior in the environments that matter to your audience.

Keep the source artwork in an editable format such as SVG, Illustrator, Figma, or another layered design file. Save the exported files separately and record their dimensions, color mode, transparency, and intended use. This makes future rebranding and troubleshooting much easier. The same habit is useful for broader branding asset checklists and organized design libraries.

Favicon sizes and formats reference

These dimensions are workflow starting points, not a promise that every platform will use each file. When a project has a defined technical stack, review its icon configuration and test the generated HTML, manifest, and asset paths together.

Checklist by scenario

For a standard marketing website

• Draw a square master icon with a clear foreground and background.
• Export a 32 × 32 PNG for general browser use and a 16 × 16 version if your implementation requests it.
• Prepare an ICO file containing the small sizes your setup expects, if broad compatibility is a priority.
• Consider an SVG version when your browser and deployment setup support it reliably.
• Place the files at predictable URLs and verify that the document references the intended versions.

For a mobile shortcut or installable web experience

• Prepare larger square PNG files in addition to the browser-tab icon.
• Check the web manifest or platform configuration for required icon paths and purpose settings.
• Preview the icon on both light and dark backgrounds where possible.
• Allow for platform masking or rounded corners; do not place critical details against the edge.
• Test the result after installation, not only in the source file or browser inspector.

For a brand refresh

• Start with the new logo mark, but simplify it if the full logo becomes illegible at 16 pixels.
• Define a favicon-specific color and contrast treatment rather than shrinking the entire identity lockup.
• Export old and new versions into clearly named folders so cached files are easier to distinguish.
• Update browser icons, manifests, pinned shortcuts, documentation, and any design-system references together.
• Record the final file names and dimensions in your design asset library.

For a fast prototype

• Use a favicon generator online only after preparing clean source artwork.
• Inspect the generator's output before uploading it; confirm file names, dimensions, transparency, and included code.
• Keep the original vector or high-resolution raster file so the prototype can be refined later.
• Replace placeholder symbols before launch and test the final icon in a private or staging environment.

What to double-check

Artwork and legibility

View the icon at its smallest intended size, not only at 400 percent zoom. A distinctive silhouette, one strong focal shape, and high contrast usually outperform a detailed illustration. Remove thin outlines, tiny type, complex gradients, and decorative elements that merge when reduced. If the favicon represents a wordmark, test whether a monogram or simplified symbol communicates the brand more clearly.

Check the icon against both light and dark browser themes. Transparency can be useful, but a transparent mark may disappear on a similar interface background. A solid or subtly contrasting background often provides more dependable legibility.

File construction

• Confirm that every export is square and has the intended pixel dimensions.
• Check whether transparent pixels are genuinely transparent rather than filled with an unintended matte color.
• Use RGB-oriented web exports unless a specific production system requires another color mode.
• Inspect SVG files for unnecessary embedded data, missing viewBox information, or effects that fail in the target browser.
• Open PNG and ICO files independently before adding them to the website.

Implementation and testing

Confirm that the icon URL is correct, the file is publicly reachable, and the server returns an appropriate image response. Check for case-sensitive path errors, accidental redirects, blocked assets, and stale cache behavior. Test a fresh private window and at least one browser or device outside your main design environment. If the icon appears incorrectly, inspect the rendered page and manifest rather than assuming the export is at fault.

Keep social preview artwork separate. A favicon is designed for a tiny square context, while a social sharing image needs larger composition, readable text, and a different aspect ratio. For print-related brand files, use the more complete guidance in this artwork preparation checklist rather than adapting web exports.

Common mistakes

1. Using a full logo without simplifying it. Small type and long wordmarks often become an indistinct shape. Create a compact mark when necessary.
2. Exporting only one size. A single file may look acceptable in a tab but fail to provide enough detail for a shortcut or high-density display.
3. Relying on an online generator without reviewing the output. Generators can save time, but they cannot decide whether your artwork is legible or whether the generated code fits your setup.
4. Testing only on the design canvas. Browser chrome, operating-system themes, masking, and caching can change how the icon is perceived.
5. Overlooking licensing and ownership. If the icon uses a purchased vector, font, illustration, or texture, confirm that the license permits the intended website and brand use. The commercial-use asset licensing checklist can help organize that review.
6. Replacing the asset but not the references. A new file can be uploaded correctly while an old manifest, template, cache rule, or hard-coded path continues to serve the previous icon.

When to revisit

Review your favicon workflow whenever you launch a new website, change domains, redesign the brand, introduce a web app experience, or alter the front-end framework. It is also worth revisiting before seasonal campaign planning if the site uses campaign-specific icons, and whenever browsers, operating systems, or generator tools change their handling of website icons.

Set a simple maintenance reminder: open the live site in a fresh session, inspect the browser tab, test a bookmark or shortcut, and confirm that the current brand mark appears. Compare the deployed files with the source asset record. If a problem is reported, reproduce it on the affected device or browser before changing files.

For a repeatable launch checklist, save the following sequence with the project: simplify the artwork, export the required sizes, review formats and transparency, add the references, test desktop and mobile contexts, verify caching, and archive the final source files. This turns favicon creation from a last-minute export into a small, dependable part of your creative workflow.