Website Favicon Setup Guide: Formats, Sizes, and Export Checklist

Overview

Favicons appear in browser tabs, bookmarks, history, shortcuts, search interfaces, and installed web-app contexts. A single tiny image may work for a simple site, but a complete favicon setup usually combines several files because browsers and platforms request icons in different ways.

Start with a simple brand mark rather than a detailed logo. At small sizes, thin strokes, long wordmarks, subtle gradients, and tightly spaced lettering can disappear. A strong favicon often uses one recognizable symbol, a high-contrast shape, or a simplified monogram. Design it at a large working size, then inspect it at the actual sizes users will see.

The recommendations below are practical defaults, not a substitute for testing. Browser behavior, manifest conventions, and platform requirements can change, so review the setup when you launch a new domain, complete a rebrand, or change your web application configuration.

Favicon format and size comparison

These files serve different contexts, so do not assume that a 32×32 favicon can replace every asset. An ICO file is a useful compatibility fallback, SVG is efficient for supported browsers, and larger PNG files are important for touch icons and installable web experiences.

Checklist by scenario

For a basic content website

• Design one simplified, square mark.
• Export favicon.ico with multiple small sizes, or provide a 32×32 PNG.
• Add an SVG version if your browser support requirements allow it.
• Place the files at stable, root-relative URLs and add the relevant link elements in the document head.

For a brand or marketing site

• Prepare the basic browser icon plus a 180×180 Apple touch icon.
• Check the mark against both light and dark browser chrome.
• Use the brand palette only when it preserves recognition at small size; a simpler contrast treatment is often clearer.
• Keep filenames and paths consistent across staging and production.

For a progressive web app or installable site

• Create a web manifest containing square icon entries for the intended installation contexts.
• Include both regular and, where appropriate, maskable artwork. Keep important details away from the edges of a maskable icon.
• Provide high-resolution PNG exports and verify that the manifest URL is reachable.
• Test the installed shortcut, splash or launch context, and app icon rather than checking only the browser tab.

Step-by-step export workflow

1. Simplify the mark. Remove fine details that cannot survive at 16×16. Make the silhouette recognizable without relying on tiny text.
2. Build on a square canvas. Use consistent padding and keep the visual center balanced. Export a version with transparency and another with a deliberate background if the brand requires it.
3. Export source files. Generate SVG for scalable use, PNG files for raster contexts, and an ICO file when broad fallback coverage is needed.
4. Generate platform assets. Create the Apple touch icon and manifest PNGs from the approved master, not from a previously compressed file.
5. Add references. Place the HTML links in the head and connect the manifest. Use correct MIME types, dimensions, and root-relative paths.
6. Test, then clear caches. Check a fresh browser session, private window, and a direct URL to each asset. Favicons can remain cached after a file is replaced, so changing the filename or adding a version query can help during controlled testing.

What to double-check

• File integrity: Open every exported file directly and confirm it is not an HTML error page saved with an image extension.
• Dimensions: Confirm the pixel dimensions and that raster files are genuinely square. Do not rely only on a filename such as “large.”
• Transparency: Inspect transparent edges against white, gray, and dark backgrounds. Halos can appear when an image was exported against the wrong matte color.
• Contrast: A favicon is not a replacement for a full logo, but it still needs enough contrast to remain identifiable in light and dark browser contexts.
• Manifest paths: Check that icon URLs resolve relative to the manifest location and that the declared dimensions match the actual files.
• SVG safety and cleanliness: Remove unnecessary editor metadata and confirm the viewBox, fill colors, and dimensions behave as intended. For broader SVG optimization guidance, see How to Optimize SVG Files for Faster, More Accessible Websites.
• Brand consistency: Compare the favicon with your wider identity system. The mark should feel related to your logo, UI icon set, and other creative assets without trying to reproduce a full lockup.

Common mistakes

Using the full wordmark. Text becomes unreadable quickly. Use a symbol, initial, or simplified shape instead.

Exporting one file for every context. A browser tab, phone home screen, manifest, and pinned tab have different constraints. Prepare the smallest useful set for the project rather than forcing one asset to do every job.

Ignoring dark backgrounds. A black icon with transparent edges may vanish in dark browser chrome. Test both appearance modes and add a suitable background when needed.

Forgetting the HTML or manifest reference. Files in the public folder are not automatically used in every context. Confirm the document head and manifest explicitly point to the intended assets.

Testing only in one browser. Compare at least a Chromium-based browser, Safari-oriented context where relevant, and a mobile or installed experience when those platforms matter. Treat this as a practical compatibility check, not a claim that every environment behaves identically.

Replacing a file without accounting for caching. A successful upload does not guarantee an immediate visual update. Use a controlled versioning approach and verify the final production URL.

When to revisit

Review this favicon setup before every new domain or major launch, after a rebrand, when adding an installable web app experience, and whenever the site’s browser or platform targets change. It is also worth checking before seasonal campaign updates if the favicon is temporarily adapted for a promotion.

As a maintenance habit, revisit browser support, manifest conventions, platform icon requirements, and favicon generator recommendations about every six months or after a major browser update. Re-export assets when the master logo changes, and repeat the light-mode, dark-mode, mobile, and installed-app checks after deployment.

Final launch checklist: approved square mark; ICO or PNG fallback; SVG where suitable; Apple touch icon when relevant; manifest icons for installable experiences; pinned-tab SVG where relevant; correct HTML references; valid paths and dimensions; light and dark testing; mobile and desktop verification; cache-aware production retest.