Skip to content
TextArray1.87.0
100% local

Favicon HTML generator

Generate the <head> tags a site needs for its favicon, touch icon and theme colors.

Output
Related tools
Meta tag generatorDeveloper tools
Web app manifest generatorDeveloper tools
Humans.txt generatorDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
Favicon HTML generator
A favicon is more than one file: a browser tab wants an .ico, a phone home screen wants a 180x180 apple-touch-icon, Safari's pinned tab wants a single-color SVG mask, and a PWA install prompt reads the icons listed in the manifest. This tool writes the exact <link> and <meta> tags for all of them from a base path and a set of icon sizes, so you copy one block into <head> instead of assembling it from five different specs.
Set the base path to wherever the icon files will live — the root, or a subfolder like /icons/ — and every href is built against it. Toggle ICO, PNG and SVG independently: PNG also adds the apple-touch-icon at the fixed 180x180 size Apple expects, and SVG adds a mask-icon whose color comes from your light theme-color (or dark, if that's the only one set). A light and dark theme-color each become a separate <meta name="theme-color"> tag with a prefers-color-scheme query, so browser chrome matches the page in either mode. A separate switch adds the older msapplication tags some Windows tile scenarios still read.
The sizes field takes a comma- or line-separated list — "16x16, 32x32, 192x192" — and a bare number like "48" is shorthand for a square icon; unrecognized entries are dropped rather than rejected. Turn on the file checklist and the output ends with a comment listing every referenced path, in order, which is the list to actually upload.
Everything runs in your browser: nothing you type is sent anywhere. Copy the result into your page's <head>, download it as a .txt file, or send it to another tool's input to keep adjusting it.
FAQ
Does this tool create the actual icon image files?
No. It only generates the HTML that references them — you still need to export favicon.ico, the PNGs, favicon.svg and safari-pinned-tab.svg at the sizes you list, using an image editor or a dedicated icon exporter.
Why is apple-touch-icon always 180x180?
That's the size Apple's own guidance specifies for the largest modern iPhone home-screen icon; iOS scales it down for older devices, so one file covers the range.
What color does the mask-icon use?
Your light theme-color, or the dark one if you left light blank. Safari's pinned-tab icon is rendered in a single flat color you choose, not the artwork's own colors.
Do I need the Windows tile tags?
Only if you still target older Windows/Edge tile pinning. Most sites can leave this off — modern Windows uses the same manifest and PNG icons as everything else.
Is anything I type uploaded anywhere?
No. The HTML is generated entirely in your browser from the options you set — nothing is sent to a server.