How to Add a Favicon in HTML

Three tags cover 99% of cases. Two more give you a full PWA-grade setup.

3 min read

The minimum tag

<link rel="icon" href="/favicon.ico"> — that's it. Every browser will fetch it.

The modern recommended set

Add SVG and apple-touch-icon for crisp rendering on every platform:

<link rel="icon" href="/favicon.ico">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

PWA install prompts

Add a manifest.json with 192×192 and 512×512 PNG entries, then link <link rel="manifest" href="/site.webmanifest">.

Try the tools

Continue reading

Explore FetchFavicon

Categories

Converters

Utilities

Guides

Tutorials