Choose the part of the logo that can survive at 16 pixels
A readable favicon is usually a simplified brand symbol, initial, or bold silhouette rather than an entire horizontal logo. Decide what must remain recognizable at 16×16 pixels before resizing anything, because extra source resolution cannot rescue lettering and details that have no room to display.
Imagine a project called Trail Ledger whose logo contains a compass symbol, the full product name, and a narrow tagline. The complete lockup works in a page header, but shrinking all three elements into a tab icon turns the words into gray lines. A better favicon candidate is the compass alone, or a deliberately drawn T inside its outer ring. This is a design decision; a generator cannot determine which brand element users will recognize.
Make a working copy of the logo and keep the master artwork untouched. Remove tiny text, hairline strokes, internal gaps that close when reduced, and shadows that only make sense at large size. Check whether the remaining shape is distinct from a plain circle or square. If two products in the same browser window use similar blue circles, a small cutout, letter, or contrasting corner may matter more than a complex gradient.
Also decide whether the icon needs a background. A dark symbol on transparency can vanish against a dark tab bar, while a white square behind a rounded mark may look awkward on another platform. Prepare at least one light-interface and one dark-interface mockup so the choice is based on the final context, not the white checkerboard in an image editor.
Create a square source without stretching the logo
Prepare a square working image before using the generator. The current component draws the entire upload directly into square canvases; it does not preserve a non-square image's aspect ratio or automatically identify the subject, so a wide logo can be squeezed and a tall logo can be widened.
Use the Image Crop tool when the source needs a deliberate 1:1 crop. Center the chosen mark, then leave a consistent safety area between its outermost stroke and every edge. Cropping exactly against the artwork can make it feel larger in one browser and clipped in a rounded home-screen mask. Too much padding causes the opposite problem: the favicon becomes a dot even though the file itself is the correct size.
A 512×512 or larger square source is a practical starting point for this generator, but source dimensions are only one check. View a temporary copy at 32×32 and 16×16 without zooming. If the compass needle in the Trail Ledger example merges into the ring, simplify or thicken it in the source artwork. Do not repeatedly enlarge a tiny raster image and expect new edge detail to appear.
If the working file is in an inconvenient format, the Image Format Converter can make a PNG, JPG, WebP, or another supported raster copy. Format conversion does not recreate vector detail. JPG also cannot retain transparency, so use a format and background that match the design requirement rather than choosing by filename alone.
Generate the files and inspect the smallest previews first
Open the Favicon Generator with the prepared square image. It creates PNG previews at 16, 32, 48, 64, 180, 192, and 512 pixels in the browser, and it packages the 16, 32, and 48 pixel PNG data into a multi-resolution favicon.ico.
Start with the 16 and 32 pixel results. Look at them at their actual display size before zooming in. The important questions are whether the main silhouette is identifiable, whether negative spaces remain open, and whether the foreground still separates from the background. A smooth 512 pixel preview says little about browser-tab readability.
The component uses browser canvas scaling for every size. It does not redraw strokes, change spacing, sharpen individual exports, or create size-specific variants. If the 16 pixel result loses the inner compass needle, return to the working artwork and make a simpler small-size design. Running the same unsuitable source through the generator again will produce the same design problem in a new ZIP.
Download the package only after the previews are plausible. It contains the seven PNG outputs, favicon.ico, a site.webmanifest, and an HTML snippet. These are generated assets and starter configuration; the tool does not edit a project, upload files, change a deployed page, or invalidate an existing site's favicon cache.
Adapt the generated paths and manifest to the actual site
Treat the downloaded HTML and manifest as a template. The snippet refers to root-relative paths such as /favicon.ico, /favicon-16x16.png, and /apple-touch-icon.png, which only work when the site actually serves those files from those locations.
The generated site.webmanifest contains My Site and Site placeholders. Replace them with the real product name and short name, then review the icon paths, theme color, background color, and display mode. If the project already has a web app manifest, merge the needed icon entries through the normal code-review process instead of overwriting the existing file and losing unrelated settings.
Frameworks and hosting setups differ. A site deployed under a subdirectory may need prefixed asset paths; a framework may generate head tags from metadata; a content-management system may store icons in its media library. Put the files where the project expects static assets, update the corresponding references, and test that each URL returns the intended image rather than an HTML error page.
Keep the old icon files or a reversible deployment until the new set has been verified. That makes a path or contrast mistake easy to correct without reconstructing the previous configuration from browser cache.
Verify the downloaded assets in a real browser context
Verify the files that the site serves, not just the generator preview. Open the 16 and 32 pixel PNG URLs directly, load a page in a fresh private window, and check an ordinary tab, a pinned tab where relevant, and a bookmark. A mobile home-screen icon should be checked on a test device or platform preview because its mask and background treatment can differ from a desktop tab.
Use a short acceptance checklist for the Trail Ledger example:
- The compass or
Tremains distinguishable at 16×16 without reading the product name. - The mark has balanced space on all four sides and is not stretched.
- Transparent edges look acceptable against both light and dark interfaces.
favicon.ico, the PNG files, and the manifest URLs return the correct file types without 404 responses.- The manifest no longer contains placeholder names, and its paths match the deployed asset directory.
- A fresh browser context shows the new icon; an already-open tab may still be displaying a cached copy.
Caching can make a correct deployment appear broken. First request the exact icon URL and confirm its content changed. Then use a private window or a new test path. Do not keep renaming files unless the HTML and manifest references are updated at the same time, or the cache workaround will become a path error.
Common questions
Can I upload a horizontal wordmark directly?
The tool will accept an image file, but its canvas draws the entire source into a square. A horizontal wordmark can be compressed and become unreadable, so crop or redesign a square working version first.
Why does the 512 pixel icon look good while the 16 pixel icon looks muddy?
The small canvas cannot preserve fine text, narrow gaps, and layered effects. Simplify the symbol, strengthen important edges, and judge it at actual size instead of relying on the large preview.
What is included in the generated ICO file?
The current component packages the 16, 32, and 48 pixel PNG representations into favicon.ico. The other generated sizes remain separate PNG files in the ZIP.
Does downloading the ZIP update my website?
No. The ZIP is only a set of local assets and starter references. You must place them in the project, adapt paths and manifest values, deploy through the site's normal workflow, and verify the served URLs.
Why does the browser still show the previous favicon?
The old asset may be cached, or the page may still reference an old path. Confirm the exact deployed URL first, then test in a private window or another browser before changing the artwork again.