Skip to content
yutils
Example

Input

logo.png (512×512)

Output

favicon.ico (16 · 32 · 48) · apple-touch-icon.png (180×180) · icon-192.png · icon-512.png + HTML snippet

Note

A single `.ico` carries several resolutions, so the browser picks the right one for tabs, bookmarks, and desktop shortcuts. PWA install icons (192 · 512) and the manifest entries come out with it.

Usage / FAQ

When to use

  • Set up favicons for a new project — one image gives you .ico, apple-touch-icon and PWA icons at once
  • Make a quick favicon from an emoji or a letter, with no design tool
  • Fill in the 192 · 512 icons a Lighthouse PWA audit asks for
  • Prepare the apple-touch-icon shown when iOS users add the site to their home screen
  • Grab the `<link>` tags and manifest entries to paste in after swapping a favicon

FAQ

Q.PNG works fine — why is `.ico` still around?
A.PNG favicons do work in most browsers. But a single `.ico` can hold **several resolutions in one file**, so you don't manage per-size files and `sizes` attributes. And the HTML standard still keeps the fallback where a browser may try `/favicon.ico` at the site root when no icon link is present, so having one is the safe default.
Q.Which sizes do I actually need?
A.Browser tabs use 16×16, high-DPI screens 32×32, Windows shortcuts 48×48 — one `.ico` covers all three. iOS home screens want a 180×180 apple-touch-icon, and PWA installs need separate 192 and 512 PNGs.
Q.I replaced the favicon but nothing changed.
A.Browsers cache favicons unusually aggressively. If a hard reload doesn't help, change the URL itself — `<link rel="icon" href="/favicon.ico?v=2">` is the reliable fix.
Fun facts

  • The favicon arrived with Internet Explorer 5 in March 1999. It was never a standard — just one browser's convention that adding a page to Favorites would request /favicon.ico from the site root. Server logs worldwide filled with favicon.ico 404s, and the convention became a de facto standard.

    Wikipedia — Favicon

  • .ico is originally a Windows icon format, which is why one file can hold images at several resolutions. Bundle 16×16, 32×32 and 48×48 and the browser picks what it needs; PNG favicons need a separate file plus a sizes attribute for each.

    Wikipedia — ICO (file format)

  • HTML5 made `<link rel="icon">` an official link type, yet the WHATWG HTML Standard still documents the fallback that a user agent may fetch /favicon.ico when no icon link exists. One browser's habit ended up written into the spec.

    WHATWG HTML Standard — link types

Related tools

See all in this category →