Practical Tips and Common Mistakes: Favicon And App Icon Generator
Reviewed by the FreeOnline.fyi team · Updated 2026-09-14
We built the [Favicon And App Icon Generator](https://freeonline.fyi/favicon-and
We built the Favicon And App Icon Generator to remove the usual back-and-forth of exporting favicon sizes by hand. The single most important step happens before you upload: use a source image that is at least 512x512 px, square if possible, and visually simple. The tool auto-crops to a centered square, so if your logo has important elements near the edges, pad it first. It accepts PNG, JPG, WEBP, and SVG, but SVG is rasterized at 512px before resizing, so a tiny embedded SVG won't magically become crisper.
The upload limit is 5 MB and 4096x4096 px; larger files are rejected with a clear inline message. Don't try to upload a huge photograph: at 16px, intricate detail turns into noise. When we tested with real schedules and logos, simple shapes and solid color areas survived downscaling far better than gradients or thin lines.
After uploading, the live preview grid shows every generated asset at true size,
After uploading, the live preview grid shows every generated asset at true size, including the 16px favicon as actual pixels, side-by-side with a scaled-up version. This is the fastest way to catch legibility mistakes before downloading. If your icon looks like a smudge at 16px, it will look like a smudge in the browser tab.
Use the preview to compare different corner radius settings and background treatments without re-uploading. The corner radius slider applies uniformly to all outputs, so a 20% radius on a 512px icon becomes a much smaller visual curve on a 16px favicon — the preview shows that. We recommend starting with 0% and only adding rounding if the original logo already has rounded corners.
One common mistake is leaving transparency on for iOS home screen and Windows ti
One common mistake is leaving transparency on for iOS home screen and Windows tile icons. iOS and Windows render transparent areas as black or unpredictable, so the generator lets you choose 'Keep transparency', 'White', or a custom color. When you pick a solid background, it is baked into apple-touch-icon.png and mstile-150x150.png specifically to avoid that ugly black box.
For Android adaptive icons, the tool produces a separate foreground and background layer at 512px; the foreground should contain the logo, and the background should be a solid color or simple pattern. Do not upload an already-composited icon and expect Android to mask it correctly. The live preview shows the adaptive foreground/background as separate assets, so check that the foreground has enough safe-zone padding for Android's circular masks.
The ZIP includes favicon.ico with 16, 32, and 48px sizes, PNGs from 16 to 512, a
The ZIP includes favicon.ico with 16, 32, and 48px sizes, PNGs from 16 to 512, apple-touch-icon.png at 180, Android chrome icons at 192 and 512, adaptive layers, a Windows tile PNG, browserconfig.xml, site.webmanifest, and a snippet.html with the ready-to-paste head markup. The snippet includes the correct rel attributes and sizes, so you don't need to remember the exact syntax.
A common mistake is editing the HTML snippet after pasting or moving files without keeping the same filenames. The manifest and browserconfig reference specific filenames, so rename them only if you also update all references. If you are using a static site builder, paste the snippet into your layout template once, then verify that the paths match your server. If anything looks off, our FreeOnline.fyi free online tools collection includes this generator and others, but we cannot guarantee every hosting environment will behave identically.
After deploying the icons, test them in a real browser tab, on an iPhone home sc
After deploying the icons, test them in a real browser tab, on an iPhone home screen, and on an Android device. Browser caching can hide new favicons for days; hard-refresh or use a private window. We do not promise that every browser will use every PNG, but the complete set maximizes compatibility.
For extra verification, open site.webmanifest in a text editor and confirm the icon paths and sizes match what your server serves. The official MDN favicon documentation and the WHATWG HTML Standard explain how browsers resolve icon links, which helps when debugging. If you want a fun sanity check, paste a 16px favicon into our Image to ASCII Art tool to see whether its shape still reads at low resolution — but do not rely on ASCII as actual favicon output.