Gera Tools

Favicon & App Icon HTML Tag Builder

Generate all favicon and Apple touch icon link tags for any site

Outputs the complete set of favicon link tags for all sizes (16, 32, 48, 96, 180, 192, 512px) plus Apple touch icon, Safari pinned tab, theme color, and web manifest reference, generated from your icon path and brand color.

Which favicon sizes do I actually need?

A 16 and 32 pixel ICO or PNG covers browser tabs, a 180 pixel apple-touch-icon covers iOS home screens, and 192 and 512 pixel PNGs referenced from a web manifest cover Android. The full set in this tool covers every common surface.

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.ico directly, so a root .ico is 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.