Free Favicon Generator

The sizes browsers actually ask for

Where the files go and what to add to your HTML

Put the files in the root of your site, then reference them from the head of every page: a link with rel="icon" pointing at the SVG or the 32-pixel PNG, a link with rel="apple-touch-icon" pointing at the 180-pixel PNG, and a link with rel="manifest" pointing at a manifest file that lists the 192 and 512 icons. Leaving favicon.ico in the root as well costs nothing and catches anything that looks for it by convention.

Designing something that survives at 16 pixels

• One shape or one letter. A full logo with a wordmark turns to mush.
• High contrast against both light and dark tab bars — mid greys disappear on one or the other.
• No thin strokes. A one-pixel line at 512 becomes invisible at 16.
• Fill the canvas. Generous padding that looks elegant at 512 leaves a speck at 16.
• Test it by shrinking the image on screen before you ship it, not after.

ICO, PNG or SVG

ICO is a container that holds several sizes at once, which is why it survived so long — the browser picks the size it wants. PNG is simpler and is what most current browsers prefer. SVG is the newest option and the most appealing, because one file covers every size and can respond to the browser's dark mode with a media query inside the file. Support for SVG favicons is good in Chrome, Edge and Firefox, and absent in Safari, so shipping an SVG plus a 32-pixel PNG fallback covers everyone.

Why your new favicon has not appeared

Favicons are cached unusually aggressively — browsers hold on to them separately from ordinary page assets, and a normal hard refresh often does not clear them. Try loading the icon's URL directly and refreshing that, open the site in a private window, or add a query string to the link href to force a new fetch. If the site is behind a CDN, purge it there too. In almost every case the file is fine and the cache is the problem.