Favicon link tags generator
Set the icon folder, site name and color to get ready head tags and a manifest.webmanifest file.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter icon folder, site name, theme color (hex), include an svg icon and include a web manifest.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
A lean modern set: favicon.ico at 32×32, an SVG icon, apple-touch-icon at 180×180, a manifest pointing to 192×192 and 512×512 PNGs, and a theme-color meta tag.
Example
Inputs: Icon folder = /, Site name = My Site, Theme color (HEX) = #0f766e, Include an SVG icon = yes, Include a web manifest = yes. Result: Head tags: <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#0f766e">.
/
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#0f766e">
Limits and caveats
- It writes the tags only; you still need to create the image files at the listed sizes.
- The manifest background color defaults to white, so change it if your design is dark.
Questions about this tool
Why sizes="32x32" on the ico file?
Some Chrome versions pick the ico over the SVG when it says sizes="any"; declaring 32x32 lets the SVG win.
Do I need dozens of sizes?
No. These five files cover modern browsers, Apple devices and Android.
Where do the tags go?
Inside the head of every page. It also helps to keep a favicon.ico at the site root.