What a favicon is — and the sizes you actually need
A favicon is the little icon shown in the browser tab, in bookmarks, in search results and on a phone's home screen when someone saves your site. One image isn't enough any more: browsers want small PNGs for tabs, Apple wants a 180px “touch icon” for iPhones, and Android/PWAs want 192px and 512px versions. This tool makes all of them at once from a single source, so you don't have to fiddle with an image editor.
How to use them
Download the set, upload the files to the root of your website, and paste the generated HTML into the <head> of every page. Keep favicon.ico at the root too — some browsers and crawlers still look for it there by default.
Tips for a sharp icon
Simple beats detailed: at 16×16 pixels, fine lines and small text turn to mush. A bold letter, a single shape or a simplified logo reads best. Use a background that contrasts with both light and dark browser themes, and give the mark a little padding so it isn't jammed against the edges.
For people launching something
Plain notes on getting online properly, once a week
Domains, hosting, design polish and looking professional. No noise, unsubscribe in one click.
Common questions
Is my image uploaded anywhere?
No. The icons are drawn entirely in your browser using an HTML canvas. Your source image never leaves your device.
What's the favicon.ico for?
It's the classic favicon format browsers have looked for at a site's root for decades. Modern browsers prefer the PNGs, but keeping a favicon.ico at your root covers older browsers and tools that still request it. This tool builds one (a 32px PNG wrapped as an .ico).
Where do the files go?
Upload them to the top level (root) of your site, then paste the generated <link> tags into your page <head>. If your site is built with a tool or CMS, there's usually a “favicon” or “site icon” setting where you can upload the 512px PNG instead.