helio.tools

Favicon Generator

Every icon a site still needs, and none of the ones it stopped needing

What the icon is

    How it will look

    32px, actual size
    48px
    180px, the home screen one
    Cropped to a circle, as a launcher might

    Site details

    The files

      What to put in the head

      Five tags, and no more. Everything else people put in a head for this stopped being read years ago, and every one of them is another file to keep in step.
      site.webmanifest
      Drop in an image, or just type a letter or two and pick some colours. You get the ICO, the PNG sizes that something still reads, an SVG, the manifest and the head tags, as one download. Nothing is uploaded, including your logo before it is public.
      Five tags is the whole list
      <link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a0b0d">

Five tags. Not forty.
      There was a period around 2014 when a complete favicon set meant forty files and thirty tags. Almost all of it targeted Windows 8 tiles and older iOS versions that scaled badly, and almost none of it is read by anything now.
      What is left: an ICO for the address bar and for anything old, an SVG because a modern browser prefers one and it stays sharp, a 180 pixel PNG for iOS, and the manifest, which is where Android and installable web apps look. The theme colour tints the browser chrome on a phone.
      What you can stop pasting
      Things people still paste in that nothing reads:

  msapplication-TileImage      Windows 8 tiles
  msapplication-TileColor      the same
  rel="shortcut icon"          never was a thing
  apple-touch-icon-76x76       iOS scales now
  browserconfig.xml            Windows 8 again
  mstile-310x310.png           yes, Windows 8

Every one is another file to keep in step with
the others, for a device nobody has.
      If any of those are in your head already, they are doing nothing except giving you files to forget about when the logo changes. Taking them out is safe.
      Design for the small one
      Your logo at 512 pixels:  fine
The same logo at 16:      a grey smudge

16 by 16 is 256 pixels in total. A word does not
fit. A monogram does. A distinctive shape does.

Draw for the small one and let it scale up.
      A favicon spends most of its life at sixteen pixels square, in a browser tab, next to fifteen other tabs. That is 256 pixels in total, which is roughly the amount of detail in a single character of this sentence.
      Full logos with text almost never survive it. A single letter, a monogram, or one distinctive shape does. The preview at the top shows the actual sixteen pixel version in a fake tab, which is the honest test.
      Each size is drawn from the source at that size, not shrunk down from one big one, which is the difference between type that is readable at sixteen pixels and type that is a smudge.
      The maskable one
      Android crops your icon into whatever shape the
launcher fancies: a circle, a squircle, a rounded
square, a teardrop.

The safe area is a circle covering 80% of the
width. Anything outside it may be cut off.

That is why one of the icons is padded.
      Android launchers apply their own shape to an installed app's icon, and if yours fills the whole square, the corners get cut off. The maskable icon is the same artwork with a margin around it, declared separately in the manifest so the launcher knows it can crop freely.
      The circular preview above shows the worst case. If anything important disappears in it, add padding.
      The formats
      The ICO is a container from 1985 holding three PNGs, one each at 16, 32 and 48. Since Windows Vista an ICO may hold PNGs instead of its own bitmap format, which is smaller and is what every browser expects now.
      The zip is written here as well, with everything stored and nothing compressed. PNGs are already compressed and deflating them again would save nothing, so there is no point shipping a compressor to do it. Any unzipper opens it.
      Where to put them
      The root of the site is the simplest place, because a browser looking for/favicon.ico will find one there without being told. Put them somewhere else and set the path field, which rewrites the manifest and the tags to match.
      One warning about caching. Browsers hold on to favicons harder than almost anything else, sometimes for weeks. If you change one and nothing seems to happen, that is why, and a hard refresh usually will not do it. Renaming the file will.