Tooltrusty

Favicon & Meta Tag Bundle Generator

One form, and out comes the whole <head> block — icons, manifest, social tags and all.

Head block

site.webmanifest

This generates the markup. To produce the actual icon files at every size, use the Favicon Generator, which renders them from one image in your browser.

Runs in your browser. Everything you type or load here is processed locally by JavaScript on this page. Nothing is uploaded to Tooltrusty or to any third party.

What the favicon & Meta Tag Bundle Generator does

The head of a modern page carries a lot of small, easily forgotten declarations. Miss the viewport tag and the page renders at desktop width on a phone. Miss the apple-touch-icon and a site saved to an iPhone home screen gets a blurry screenshot instead of your logo. Miss og:image and every shared link looks like a bare URL. None of these break anything visibly, which is exactly why they get skipped.

This generator produces the complete block from one short form: character encoding and viewport, title and description, a self-referencing canonical, theme colour, the four icon links that cover browsers and both mobile platforms, a manifest link, and the full set of Open Graph and Twitter Card tags. It also outputs a matching site.webmanifest, the small JSON file that tells Android and progressive web apps what icons and colours to use when your site is installed to a home screen.

A few choices in the output are deliberate. The icon set is deliberately short — the sprawling twenty-tag favicon blocks you still see date from an era of browsers that no longer exist, and four links cover everything in current use. theme-color tints the browser chrome on Android and in some desktop browsers, a small touch that makes a site feel considered. The canonical is built from your own URL and path so it self-references correctly rather than being left as a placeholder.

This tool writes the markup; it does not generate the image files. Produce those from a single source image with the Favicon Generator, which renders every size in your browser.

How to use it

  1. Fill in your site name, URL, page title, description and path.
  2. Set a theme colour and language.
  3. Copy the head block into your page, and the manifest JSON into a file called site.webmanifest at your site root.
  4. Generate the actual icon files with the Favicon Generator and put them in your site root.

A worked example

The generated block for an article page starts like this:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Best Running Shoes for Flat Feet in 2026 | Stride Lab</title>
<meta name="description" content="We tested 24 stability running shoes…">
<link rel="canonical" href="https://example.com/guides/running-shoes-flat-feet">
<meta name="theme-color" content="#0e1116">

<!-- Icons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Two details worth copying into your own templates. The canonical is absolute and built from the real page URL, not a placeholder — a template that ships with href="https://example.com" on every page is worse than no canonical at all. And og:locale uses an underscore (en_GB) while the lang attribute uses a hyphen (en-GB); the two specifications genuinely differ, and this generator handles the conversion.

Frequently asked questions

Do I still need sixteen different favicon sizes?

No. That advice is a decade old and was aimed at browsers nobody uses now. Four links — 32px and 16px PNGs, a 180px apple-touch-icon and an SVG — cover everything in current use, with the manifest handling Android and PWA installs.

What does theme-color actually do?

It tints the browser interface around your page: the address bar area on Android Chrome, the tab strip in some desktop browsers, and the status bar for an installed web app. Purely cosmetic, but it makes a site feel finished.

Where do the icon files themselves come from?

This tool generates only the markup. Use the Favicon Generator to produce all seven PNG sizes from one square image, entirely in your browser, then place them in your site root.

Should the manifest go in the root?

Yes, at /site.webmanifest, which is where the generated link points. It can live elsewhere as long as the link matches, but the root is the convention and avoids scope surprises for progressive web apps.