What is a Favicon Generator?
Every platform wants its own icon: 16/32px for browser tabs, 180px for iOS home screens, 192/512px for Android and PWAs. Generating them by hand in an editor is tedious and easy to get subtly wrong.
Drop one square-ish logo (512px+ recommended) and get the full set, center-cropped and scaled locally, plus the <head> snippet that wires them up.
Design for 16 pixels first: a favicon is your logo's silhouette, not your logo. Wordmarks vanish at tab size — take the distinctive mark alone, give it contrast against both light and dark tab bars, and check the 16px preview before shipping. The larger sizes (iOS, Android) can afford more detail since they render at 60-180px.
How to use the Favicon Generator
- Drop your logo (512px or larger works best).
- Download each generated size.
- Copy the HTML snippet into your <head> and upload the files to your site root.
Frequently asked questions
Why does my favicon look blurry?
Usually a large image scaled down by the browser instead of purpose-sized files. Serving the exact 16/32px renders this tool produces keeps edges crisp.
Do I need an SVG favicon?
It is a nice modern addition (crisp at any size, respects dark mode via media queries) but PNG sizes remain the compatibility baseline every platform accepts.
What input image works best?
A square PNG with a simple, bold mark — detail vanishes at 16px. Non-square images are center-cropped.
Do I still need favicon.ico?
Modern browsers use the PNG links; an .ico remains a nice fallback for very old clients but is no longer required.
Why is my new favicon not showing?
Browsers cache favicons hard. Hard-refresh, or bump the URL (favicon-32x32.png?v=2).
Is my logo uploaded?
No — all resizing happens in your browser.