Favicons — Tomatico UI Style Guide

The files

All of these live in docs/assets/favicon/ and are bundled in the favicon kit on the Downloads page.

favicon-32x32.pngBrowser tabs on standard displays.

favicon-16x16.pngThe smallest size. Bookmark bars, older browsers.

apple-touch-icon.png180×180. iOS home screen.

android-chrome-192x192.pngAndroid home screen, referenced by the manifest.

android-chrome-512x512.pngSplash screens and app store listings.

favicon.icoMulti-size ICO, for the root of the domain and for Windows.

Markup

Six lines in <head> cover every browser and platform Tomatico supports.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/assets/favicon/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/assets/favicon/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/assets/favicon/apple-touch-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<meta name="theme-color" content="#020106">

Head markup

Keep favicon.ico at the domain root as well. Browsers request it there whether or not you link to it, and a 404 on every page load is avoidable noise in the log.

The web app manifest

The manifest controls how the product looks when someone installs it to a home screen. The file generated by an icon tool is not usable as shipped — it has an empty name and a white theme colour.

{
  "name": "Tomatico",
  "short_name": "Tomatico",
  "description": "Smart living, made simple.",
  "icons": [
    { "src": "android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#020106",
  "background_color": "#020106",
  "display": "standalone",
  "start_url": "/"
}

site.webmanifest

Field	Why it is set this way
`name`, `short_name`	The generated file leaves these empty, which shows the URL as the app's name on the home screen.
`theme_color`	Tomatico black — it tints the Android status bar to match the masthead. The default white does not.
`background_color`	Painted during launch, before the app renders. Black avoids a white flash into a dark interface.
`icons[].src`	Relative to the manifest, so the app still installs correctly when it is served from a subpath rather than a domain root.
`start_url`	Where the installed app opens. Set it to the product's real entry point.

Why the icon is drawn, not scaled

At 16px the Tomatico mark's interior — the T, the filament lines, the tomato's leaves — collapses into a smudge if you simply resize the full icon. The favicon files are purpose-built for their sizes, with the detail simplified so the silhouette still reads.

Do not generate a favicon by scaling icon-black.png down.
Do use the white-on-black roundel for the app icons. It is the highest contrast option and it reads on both light and dark home screens.
Test at actual size, in a real browser tab, next to other tabs. An icon that looks fine at 128px in a design tool can be unrecognisable at 16px.

Regenerating these means going back to the master artwork and simplifying for the small sizes — not re-running an automatic converter over the full-detail icon. See Logo → Minimum size.

Dark mode tabs

Browser tab strips can be light or dark, and a favicon has to work on both. The Tomatico favicon is a white mark on a black disc, so it holds its own shape on either — a transparent black mark would vanish on a dark tab strip.

An SVG favicon can respond to the browser's colour scheme with a media query inside the file. That is worth doing once a vector master exists; see About.