Favicon generatorGuide

How to add a favicon

After you generate a favicon, the zip contains the image files and an html.html snippet. Copy those into your site, then point your page at them.

1. Copy the files

Unzip the download. Keep the images folder as it is. Put the root files (favicon.svg, favicon.ico, apple-touch-icon.png, Android Chrome icons, and site.webmanifest) next to your HTML, or in a public folder your site can reach.

2. Paste the HTML tags

Open html.html from the zip and paste the <link> tags into your page <head>. A typical set looks like this:

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

If your files live in a folder such as /icons, prefix every href with that path so the browser can find them.

3. Apple Touch and the manifest

apple-touch-icon.png (180×180) is what iOS uses when someone adds your site to the home screen. site.webmanifest plus the 192 and 512 PNGs are for installable / PWA-style icons. Edit name and short_name in the manifest so they match your site.

4. Check it in the browser

Hard-refresh the tab. Favicons are cached aggressively, so a new icon may not show until you clear the cache or open a private window.

Need fewer files? Favicon sizes and formats lists the minimum set. Questions are also on the FAQ.