Favicon Generator

Create a small icon, then install it

Start with a compact mark or monogram that remains recognizable at 16 and 32 pixels. A long wordmark may need a manually designed small-size variant. The generator contains the source inside square outputs with transparent padding; it does not center-crop, simplify paths or remove a painted background.

ICO, PNG and SVG serve different roles

ICO packages several raster sizes. PNG is a single raster image that can retain alpha. SVG can describe scalable geometry but is not produced by this package. Browser and device discovery rules differ; do not treat this inventory as a complete compatibility matrix. An SVG source may still contain an opaque background or fine strokes that rasterize poorly.

Prepare installation deliberately

Extract the files, replace the webmanifest App placeholders with the site identity, choose intentional theme/background colors, and adjust its absolute icon paths if the files live elsewhere. A manifest with generic names is not a completed app installation.

The following is an illustrative HTML-head snippet for files at the website root, not a file included in the ZIP. Adapt paths to your site or use the CMS icon setting after checking its current documentation. Verify served MIME types and browser/device behavior; no version-specific installation has been tested here.

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Inspect the installed result

View the 16 and 32-pixel PNGs at actual size on light and dark backgrounds. If the small letters close up, use an approved monogram rather than expecting automatic detail repair. Keep an unrounded master; choose a deliberate background for touch-icon use after checking current platform guidance.

After installation, check that each URL returns the intended image or JSON instead of a page fallback. Then inspect a fresh browser context and the intended home-screen placement; cached icons can hide a changed file. Favicon installation is separate from measuring page performance.

Owned example: inspect the copies, not just the filenames

We authored this 400 × 100 test mark with colored edge markers and a small white square. A local run of the current pack generator produced the files shown here. This checks this synthetic source and the generated archive; it is not a browser-installation, website-placement or platform-preview test.

At 16 × 16, this wide artwork occupies only rows 6–9: four pixels tall. At 32 × 32 it occupies rows 12–19. The small white square is no longer a crisp opaque white square in either copy. A valid file size does not mean the full mark remains recognizable; consider an approved simpler symbol and inspect it at its actual display size.

• The ZIP contains seven members: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png and site.webmanifest.
• The ICO contains three PNG entries at 16, 32 and 48 pixels. The Apple PNG is 180-square; Android PNGs are 192-square and 512-square.
• The generated manifest still uses the placeholder name “App”, root-relative icon paths and white theme/background colors. Adapt those values to your site; generation does not install them.

Keep the source and review every required derivative in its actual destination. These observations do not establish outcomes for other proportions, fine lettering, browser caches, app resource catalogs or physical production.