Favicon Sizes: A Practical Checklist and Generator Guide

A useful favicon package is not one magic file: browser icons, an iOS Home Screen icon, and web app manifest icons serve different contexts. Keep an ICO plus small PNGs for browser UI, a 180×180 Apple touch icon, and manifest icons with separate maskable variants when the site needs an installable app identity. JustFavi can generate that set from one PNG or JPEG, but its output still needs a short review before deployment.

Give each icon one clear job

favicon.ico and small PNGs are browser icons. The HTML Standard defines rel="icon" and lets a page advertise the sizes actually available in a bitmap resource. Browsers can also look for /favicon.ico when no icon link is declared. An ICO can hold several raster sizes in one compatibility-oriented file, while explicit PNG links make individual sizes and types visible in the document.

apple-touch-icon.png is for an iOS Home Screen Web Clip. Apple's archived Safari guidance documents rel="apple-touch-icon" and a 180×180 icon for Retina iPhone devices. It is not a replacement for favicon.ico, and the browser-tab icon is not a replacement for it.

site.webmanifest describes a web application to the browser and operating system. Its icons member lists image resources that can represent the application in places such as an app list, task switcher, or system settings. These manifest entries are separate from the document's rel="icon" links.

Maskable icons are designed to survive device-specific shapes. A launcher may crop an icon into a circle, rounded square, or another mask. The Web App Manifest specification guarantees a central safe zone—a circle whose radius is 40% of the icon's smaller dimension—but content outside it may be clipped. A normal transparent icon and a maskable icon therefore should not be treated as interchangeable files.

What JustFavi accepts and generates today

The current generator accepts one file at a time. It must be PNG (.png, image/png) or JPEG (.jpg/.jpeg, image/jpeg), with a matching extension and MIME type, and its size must be from 1 KB (1,024 bytes) through 10 MiB. A high-resolution square source is the safest starting point; the generator does not make a non-square logo square without changing its proportions.

The downloaded ZIP contains the following fixed assets:

• favicon.ico
• favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, and favicon-64x64.png
• favicon-180x180.png, favicon-192x192.png, favicon-256x256.png, and favicon-512x512.png
• apple-touch-icon.png at 180×180
• android-chrome-192x192.png, android-chrome-256x256.png, and android-chrome-512x512.png
• maskable-192x192.png and maskable-512x512.png
• site.webmanifest
• favicon-code.html

The Apple and Android files duplicate pixels from the corresponding fixed-size favicon PNGs under platform-specific filenames. The maskable files are different: JustFavi places the icon at 80% scale on an opaque white background. The manifest points to the three Android files and the two maskable files.

Start with HTML that matches deployed files

If the generated files are published at the site root, this is a practical starting point for the document <head>:

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Change the paths if the package lives in a subdirectory. Update the URLs inside site.webmanifest at the same time; moving only the HTML references leaves the manifest icons broken. Also replace the generated manifest defaults—My App, App, /, and white theme/background colors—with values that describe the site being deployed.

Review the generator's known limits

• Trimming only detects transparent borders. It removes fully transparent outer pixels before adding 10% transparent padding. It does not remove a white or colored margin, and a JPEG has no transparent edge to trim.
• A non-square source can be distorted. Trimming and padding preserve a rectangular canvas, but every output is then resized to a square with aspect-ratio preservation disabled. Prepare a square source yourself if proportions matter.
• The Safari pinned-tab reference has no matching file. The current favicon-code.html includes a rel="mask-icon" link to /safari-pinned-tab.svg, but that SVG is not included in the ZIP. Remove that line or design and deploy the SVG separately; do not leave a known 404.
• The ICO's larger entries are upscaled from 16 pixels. JustFavi first selects its 16×16 raster and uses it to build the ICO's 16×16, 32×32, and 48×48 entries. The separately generated 32×32 and 48×48 PNG files come from the larger processed source, so inspect the ICO for blur at those sizes.

These limits do not make the package unusable. They identify the places where the source artwork or generated snippet needs a human decision.

Deployment checklist

1. Open the 16×16 and 32×32 PNGs at 100% scale. Simplify artwork that turns muddy or loses its silhouette.
2. Preview the Apple touch icon on a solid background and check that it does not rely on browser-tab framing.
3. Preview both maskable PNGs with circular and rounded-square masks. Keep essential artwork inside the central safe zone.
4. Edit the manifest name, short name, start URL, colors, and icon paths for the real site.
5. Upload every referenced file. Request each URL directly and confirm a successful image or manifest response rather than an HTML fallback page.
6. Remove the missing Safari pinned-tab link unless you supplied safari-pinned-tab.svg yourself.
7. Check the page's browser developer tools for icon and manifest fetch errors. Confirm that the manifest recognizes the ordinary and maskable entries.
8. Test a hard refresh or a private window because favicons are cached aggressively. Then verify a desktop tab, an iOS Add to Home Screen flow, and the install or launcher surface relevant to the site.

Primary sources

• HTML Standard: link type icon
• W3C Web Application Manifest
• Apple: Configuring Web Applications