The launch-readiness audit

Favicon: the small mark that says 'finished'

The default browser icon reads as unfinished — in a tab row, a bookmark list, or a search result, you're anonymous. Learn what Actuant checks and how to add a favicon.

Last updated 2026-07-19

A small weight-3 check with an outsized effect on how finished your app feels: does it have a favicon?

What Actuant checks

  • A <link rel="icon"> in the head → pass.
  • Or a /favicon.ico that responds → pass.
  • Neither → fail ("the browser-tab default screams unfinished").

The identity group adds Apple touch icon (weight 1) and Web app manifest (weight 1) for how your app looks when someone saves it to a home screen.

Why it matters

The generic globe or blank-page icon is a tell. In a row of tabs, a bookmark list, or a search result, an app without a favicon is anonymous and reads as a prototype — even when the product is great.

How to fix it

  1. 1

    Make a simple mark

    A single letter or symbol on a solid background reads best at 16px. Avoid detail that vanishes when shrunk.

  2. 2

    Add favicon.ico and a 512px icon

    Drop favicon.ico at the root and link a larger PNG for high-DPI and PWA use.

add to <head>html
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" href="/icon-512.png" sizes="512x512" />