How to add a favicon

Prepare the icon

Use a simple, high-contrast square design that remains recognizable at small sizes. Common choices are SVG, PNG, and ICO.

Link it from the head

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Use reliable paths

A root-relative path works across pages at different folder depths. Make sure the server returns the correct file and MIME type; a missing favicon often appears as a 404 in developer tools.

Test updates

Favicons are cached aggressively. Confirm markup and network responses first, then hard-refresh or use a private window. Do not use a detailed photograph—small icons need bold shapes and adequate contrast.