Favicon generator
One logo in, every size out: browser tab, Apple home screen and PWA icons, with the HTML tags ready to paste. Drawn on your device.
Guide
How to use it
- Drop your logo in, square images work best, PNG with transparency is ideal.
- Choose corners: square, rounded (the modern default) or circle.
- Tap Generate all sizes and download each PNG, the filenames match the HTML snippet.
- Copy the HTML block into your site’s <head> and upload the four PNGs to your site root.
Examples
What each size is for
The browser tab and bookmarks bar. At 16 pixels your logo is a smudge unless it is bold and simple, check the preview honestly at real size.
The apple-touch-icon, what iPhones show when someone adds your site to their home screen. iOS rounds the corners itself, so square output is fine here.
PWA install icons and splash screens. Android and desktop installs read this from your manifest, generating it now saves a future scramble.
Method
How it works
Your source draws onto canvases at each size with high-quality scaling, non-square images centre-crop first, and the corner option clips before drawing. Each size is a proper render, not one big PNG scaled by the browser at runtime.
Modern browsers are happy with PNG favicons, the old .ico container is only needed for genuinely ancient browsers. The generated link tags cover the tab icon, Apple touch icon and PWA size.
FAQ
Frequently asked questions
Do I still need a favicon.ico file?
Practically, no, PNG link tags cover every browser from the last decade. If a legacy system insists, dedicated ico converters exist, the 32 pixel PNG is the right source.
Why does my logo look bad at 16 pixels?
Sixteen pixels is brutally small. Wordmarks and detailed marks fail there, use the letter mode to make a bold single-initial version for the tiny sizes.
Where do the files go on my site?
The snippet assumes the site root (/favicon-32.png etc). Any path works as long as the href matches where you upload them.
Transparent or solid background?
Tabs render on light and dark themes, transparency with a bold mark works, or pick a solid brand colour and never worry. The circle option plus solid colour is the reliable combination.
How do I test it?
Upload, then hard-refresh, favicons cache aggressively. A private window shows the fresh state fastest.
Is my logo uploaded anywhere?
No, all four sizes are drawn in your browser and downloaded from it.
More tools