The Favicon & App Icon HTML Tag Builder generates the full, correct set of <link> and <meta> tags that make your site icon render everywhere — browser tabs, iOS home screens, Android, and Safari pinned tabs. The icon landscape is fragmented and easy to get wrong; this tool emits the modern, deduplicated set from a single icon path and brand color.
How it works
You provide the path where your icon files live (for example /icons) and a brand color. The builder writes link tags that point at conventionally named files at each size: a classic favicon.ico, an SVG favicon.svg, PNG <link rel="icon"> tags at 16, 32, 48, and 96 pixels, an apple-touch-icon at 180 pixels for iOS home screens, a Safari mask-icon (pinned tab) tinted with your color, a <link rel="manifest"> reference for the Android 192/512 icons, and a theme-color meta tag. Each optional block is included only when you toggle it on, and the color value is inserted into the mask-icon and theme-color tags. The tool does not generate the image files — it produces the markup that references them at the standard names.
Tips and example
- Export the files at the names the tags expect. The tags reference
favicon-32x32.png,apple-touch-icon.png, and so on — your exported files must match those paths exactly. - Reference Android icons from the manifest, not the head. The 192 and 512 pixel icons belong in
site.webmanifest; the head just needs the single<link rel="manifest">. - Keep an .ico at the root. Some clients fetch
/favicon.icodirectly, so a root.icois a cheap, reliable fallback even with modern link tags present.
Example: with an icon path of /icons and a brand color of #0a84ff, the builder outputs <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> and <meta name="theme-color" content="#0a84ff"> among the full set.
Why favicon support is still fragmented
Despite decades of standardization effort, different browsers and platforms still request icons in different ways. Chrome on Android picks up icons from the web manifest. iOS Safari looks for apple-touch-icon in the <head> or at a specific default path on the domain root, ignoring the manifest’s icons entirely. Older versions of Internet Explorer requested favicon.ico from the root without reading any link tags. Desktop browsers vary in which PNG sizes they display in tabs vs bookmarks vs OS task switchers. Rather than learning all these edge cases, the builder emits the complete modern set that covers all scenarios with minimal duplication.
What the generated tags cover
| Tag | Purpose | Surface |
|---|---|---|
<link rel="icon" type="image/ico"> | Legacy browser tabs and bookmarks | All browsers, fallback |
<link rel="icon" type="image/svg+xml"> | Modern SVG favicon (scales to any size) | Chrome, Firefox, Edge |
<link rel="icon" sizes="16x16"> | Small browser tab | All browsers |
<link rel="icon" sizes="32x32"> | Standard browser tab, Windows task bar | All browsers |
<link rel="icon" sizes="48x48"> | Windows site icon | Windows |
<link rel="icon" sizes="96x96"> | Google TV and high-res contexts | Various |
<link rel="apple-touch-icon"> | iOS home screen icon | Safari on iOS |
<link rel="mask-icon"> | Safari pinned tab in sidebar | Safari on macOS |
<link rel="manifest"> | Points to web manifest for Android icons | Chrome on Android |
<meta name="theme-color"> | Browser UI tinting | Chrome on Android, Edge |
Preparing the image files
The builder generates the HTML tags but not the image files. You will need to export PNG files at each size from your master icon. A standard workflow is to start with a high-resolution SVG or PNG (at least 512 × 512 pixels) and export at each required size using an image editor or a CLI tool like sharp or imagemagick. Name the files to match the href values in the generated tags — by default, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, and so on in the directory you specified.