About the Favicon Maker
This page is live before the generator is; the exporter itself is still being written. The plan is one square image in, and out comes the set a site genuinely needs today — a multi-resolution favicon.ico, PNGs at 48px multiples for Google's search results, a 180px apple-touch-icon, 192 and 512px PWA icons, a maskable variant, and the head tags that reference all of it. Nothing you upload will be retained: the source logo will be held just long enough to render the set, then discarded.
How to create a favicon for your website
Upload one square image
Start with a square PNG, SVG or high-resolution logo, ideally 512px or larger. Fine detail and small text will be unreadable once the image is scaled down to a 16px tab icon.
Check the small sizes
The planned preview shows every size side by side. Most logos need a simplified mark, heavier strokes or a solid background to stay legible at 16 and 32 pixels.
Set the maskable padding
Android crops icons to a circle or squircle, so the maskable version needs its artwork inside a centered safe zone with a filled background behind it. Set both here.
Download the icon set
Export the whole set at once: favicon.ico, PNGs at 48px multiples, a 180px apple-touch-icon, and the 192px and 512px icons your web manifest references.
Paste the HTML tags
Copy the generated link and manifest tags into your head, upload the files to your site root, then hard-refresh. Browsers cache favicons hard, so an old icon can linger.
What the Favicon Maker does
The full modern icon set
One upload will produce favicon.ico, PNG icons at 48px multiples, a 180px apple-touch-icon, and the 192px and 512px PWA icons a web manifest expects.
Google search result sizing
Google wants a favicon that is square and a multiple of 48px, so the export covers 48, 96 and 144px alongside the legacy 16px and 32px sizes browsers ask for.
Maskable Android icon
A separate maskable export keeps the artwork inside the safe zone over a filled background, so Android's circle or squircle crop trims padding instead of your logo.
Copy-paste HTML tags
You get the exact link and manifest tags to drop into your head, so you are not guessing which of the dozens of legacy favicon tags still do anything in current browsers.
Multi-resolution ICO file
The .ico will bundle 16, 32 and 48px frames in a single file, which is what older browsers, Windows shortcuts and some feed readers still request from your site root.
Frequently asked questions
What favicon sizes does a website actually need?
Far fewer than the old twenty-file checklists suggest. A current set is a favicon.ico bundling 16, 32 and 48px, an SVG or PNG icon for modern browsers, a 180x180 apple-touch-icon for iOS home screens, and 192x192 plus 512x512 PNGs referenced from a web manifest for Android and PWA installs, with a maskable 512px variant for Android's crop.
Why is my favicon not showing in Google search results?
Google applies its own rules: the icon must be square, a multiple of 48px, crawlable rather than blocked in robots.txt, consistent across the site, and referenced with a rel value it recognizes such as icon or apple-touch-icon. Even once that is fixed, Google only updates the icon when it recrawls your home page, which can take days or weeks.
Is favicon.ico still needed?
It is still worth shipping. Modern browsers prefer an SVG or PNG icon declared in your HTML, but a favicon.ico at the site root is the fallback several clients request by default, including older browsers, some crawlers and some feed readers. It costs a few kilobytes to keep in place.
What is a maskable icon?
A maskable icon is a PWA icon designed to survive being cropped. Android applies a platform shape, usually a circle or squircle, so the icon needs a full-bleed background with its important artwork inside a centered safe zone of roughly 80 percent of the width. It is declared in the manifest with purpose set to maskable.
Where do favicon files go on a website?
The .ico traditionally sits at the root as /favicon.ico, because browsers request that exact path even when no HTML tag points to it. The other files can live anywhere you can reference, though the root or a top-level /icons/ folder keeps paths short. Reference each with a link tag and list the PWA sizes in your manifest.
What size should an apple-touch-icon be?
180x180 pixels is the one to ship. iOS scales that single PNG down for smaller devices, so the long list of per-device apple-touch-icon files is no longer necessary. Use a square image with no transparency, since iOS composites the icon onto a solid tile and transparent areas can render black.
Can I use Zyff's favicon generator now?
No. The generator has not shipped; the page went live first so the icon checklist above is useful on its own. When the exporter arrives it will cost nothing, ask for no account, and hand back your icons without keeping the logo you fed it.