Favicon Generator
Generate favicons for your website.
How to Create a Favicon
Upload an image
Drop a logo or icon โ a square image works best.
Generate all sizes
The tool produces every favicon size browsers and devices need.
Download the icon pack
Get the files plus the HTML tags to paste into your site's head.
A favicon is not one file any more
The original favicon was a single 16ร16 icon shown in the address bar. Modern browsers and operating systems now ask for the same mark at many sizes and in several formats: a small icon for the tab, a larger one for bookmarks and browser home screens, a 180-pixel version for iOS home-screen shortcuts, and 192- and 512-pixel versions referenced from the web app manifest for Android and installed web apps.
Supplying only a 16ร16 file means every other context has to scale it up, and an upscaled 16-pixel image looks exactly as bad as it sounds. This tool produces the full set from one high-resolution source so each context gets a version drawn at the right size.
ICO, PNG and SVG
The .ico format is a container that can hold several resolutions in one file, traditionally 16, 32 and 48 pixels. Browsers pick whichever fits the context. It remains the safest fallback and is what a browser requests from the site root when no other icon is declared.
PNG files are declared explicitly in the page head at specific sizes and are what most modern browsers actually use. SVG favicons are supported in current browsers and stay sharp at any size, but coverage is not universal, so an SVG should be offered alongside PNG and ICO rather than instead of them.
Designing for sixteen pixels
At 16 pixels you have roughly the detail budget of a single letter. Logos that work on a business card โ thin strokes, gradients, a wordmark, fine internal detail โ dissolve into grey mush at that size. The marks that survive are simple, high-contrast and built from a few bold shapes.
The usual solution is not to shrink the full logo but to take one element from it: an initial, a symbol, a distinctive shape. Test it by viewing the 16-pixel version at actual size rather than zoomed in, and check it against both a light and a dark browser theme, since a mark that relies on a white background disappears entirely in dark mode.
Where the files go
Place favicon.ico at the site root, because browsers request that path automatically even when nothing declares it. Reference the PNG sizes and the apple-touch icon explicitly from the document head, and list the 192- and 512-pixel icons in your web app manifest so Android and installed web apps can find them.
Favicons are cached aggressively โ often more aggressively than anything else on a site. After changing one, expect the old icon to persist in your own browser for a while; a hard reload or a fresh profile is the reliable way to confirm the new file is actually being served.