BYTETOOLS

Favicon HTML Tag Generator

Generate the complete modern favicon head block — ICO, SVG and PNG icons, apple-touch-icon, web manifest and theme-color — from a base path and colour.

Tags to include

Favicon head tags

Files you need to create and upload

  • favicon.ico (32×32, multi-size .ico)
  • favicon.svg (any size, scalable)
  • favicon-32x32.png
  • favicon-16x16.png
  • apple-touch-icon.png (180×180, opaque background)
  • site.webmanifest (+ android-chrome-192x192.png and android-chrome-512x512.png)

This tool generates the markup only — export the image files from your design tool, or convert a PNG with our Convert to ICO tool.

What is the Favicon HTML Tag Generator?

The Favicon HTML Tag Generator writes the full, modern set of favicon link tags for your site's head: the classic favicon.

  • Complete modern favicon head block in one click
  • ICO, SVG and PNG icon link tags with correct sizes attributes
  • apple-touch-icon, web manifest and theme-color included
  • Optional legacy Safari mask-icon with colour
  • Checklist of the exact image files you need to upload
  • Markup only, generated fully in your browser

How to use the Favicon HTML Tag Generator

  1. 1

    Set the base path where your icon files will live, e.g. / or /icons/.

  2. 2

    Pick your theme colour for mobile browser chrome.

  3. 3

    Toggle the tags you want — modern sites usually need ICO, SVG, PNG, apple-touch-icon and manifest.

  4. 4

    Copy the generated head block into your HTML template.

  5. 5

    Create and upload the image files from the checklist.

About the Favicon HTML Tag Generator

The Favicon HTML Tag Generator writes the full, modern set of favicon link tags for your site's head: the classic favicon.ico fallback, a scalable SVG icon, 32 and 16 pixel PNGs, the 180 pixel apple-touch-icon, a web app manifest link and the theme-color meta tag.

Tell it where your icon files live and pick your colours, and toggle each tag on or off — including the legacy Safari pinned-tab mask icon most sites no longer need. Alongside the markup you get a checklist of exactly which image files to create and upload.

This tool generates markup only — it does not process images, and it runs 100% locally in your browser. If you still need the icon files themselves, our Convert to ICO tool turns a PNG into a favicon.ico.

Frequently asked questions

Which favicon sizes do I actually need in 2026?

A practical modern set is: favicon.ico at 32×32 for legacy browsers, one SVG icon that scales everywhere, 32×32 and 16×16 PNGs, a 180×180 apple-touch-icon for iOS, and 192×192 plus 512×512 PNGs referenced from your web manifest for Android and PWA installs.

Do I still need favicon.ico?

Keep it. Many crawlers, older browsers and tools still request /favicon.ico by convention, and it costs nothing. Serve it from the site root even if your link tags point elsewhere.

What is the advantage of an SVG favicon?

One file stays sharp at every size, and SVG favicons can include a CSS media query to switch colours in dark mode. Modern Chromium and Firefox support them; the ICO and PNG tags in the block cover everything that does not.

What is the apple-touch-icon for?

iOS uses it when someone adds your site to their home screen, and other platforms borrow it as a high-resolution icon. Make it 180×180 with an opaque background, because iOS fills transparency with black.

Does a favicon affect SEO?

Google shows your favicon next to results on mobile and desktop, so a clear icon improves recognition and click-through even though it is not a ranking factor. Google requires the icon to be a multiple of 48px or scalable — the SVG and manifest icons in this block satisfy that.

Do I need the mask-icon tag?

Almost never any more. It was for Safari's pinned tabs, and current Safari versions use your normal icons instead. The generator leaves it off by default; enable it only if you must support old Safari releases.

Related tools