How to Create a Favicon Package
Choose one recognizable image, decide whether it should fill the square or fit inside it, and review the icon at small sizes. The tool creates the browser, Apple touch, and web app files together so their artwork remains consistent.
- 1
Select artwork
Choose a PNG, JPEG, WebP, or SVG file. A simple square source usually works best.
- 2
Adjust the square
Crop edge to edge or preserve the whole image with padding and an optional background.
- 3
Download and install
Download the ZIP, upload the files, and add the supplied link elements to the page head.
What the Favicon ZIP Contains
| File | Size | Typical purpose |
|---|---|---|
| favicon.ico | 16, 32 & 48 px | Legacy and broadly recognized browser favicon container |
| favicon-16x16.png | 16 × 16 | Compact browser tab and interface contexts |
| favicon-32x32.png | 32 × 32 | Higher-density browser favicon context |
| apple-touch-icon.png | 180 × 180 | Apple home-screen web clip icon |
| android-chrome-192x192.png | 192 × 192 | Web app manifest icon |
| android-chrome-512x512.png | 512 × 512 | Large web app and install surfaces |
| site.webmanifest | JSON | App name, colors, display mode, and icon declarations |
| favicon-html.txt | HTML | Copyable link elements for the document head |
Designing an Icon That Works at 16 Pixels
A favicon is often displayed much smaller than a logo in a website header. Use a bold symbol, strong contrast, and generous spacing. Remove taglines, thin strokes, tiny text, and detailed backgrounds that disappear at browser-tab size. The live 16 and 32 pixel previews are more useful than judging only the 512 pixel export.
Usually works well
- • A single letter, mark, object, or simplified brand symbol
- • High contrast against both light and dark browser chrome
- • Clear spacing around important edges
- • A square source of at least 512 × 512 pixels
Often becomes unclear
- • Full company names or slogans
- • Fine outlines and low-contrast gradients
- • Important details touching the square edge
- • Photographs with several competing subjects
How to Add the Generated Favicon to a Website
Upload the files to the public root of the website, then paste the generated link elements inside the HTML <head>. If the files live in another directory, change every path in the HTML and in the manifest. Frameworks may provide their own metadata or public-asset conventions, so follow the framework's current favicon documentation when it manages head tags automatically.
A replaced icon may not appear immediately because browsers, operating systems, bookmarks, and external crawlers cache favicon files independently. Confirm the new public URL first, then test in a private window or a clean browser profile before changing the files again.
Favicon and Web App Icon References
The HTML Standard defines the icon link relationship and its size hints. Apple documents the apple-touch-icon link, while the W3C specification defines the web app manifest icons member. Browsers and operating systems decide which declared icon is most suitable for a given context, so exact presentation can vary.
Private, Browser-Based Generation
Your source image is decoded on your device. The browser creates the PNG sizes, assembles the ICO file, writes the manifest and HTML, and packages the ZIP locally. No image upload or account is required.
Continue Your Image & Design Workflow
Prepare a square source with the Image Cropper, create exact source dimensions using the Image Resizer, reduce a large source file in the Image Compressor, or confirm the foreground remains readable with the Color Contrast Checker.