Favicon Generator
Generate all favicon sizes from one image, plus a web manifest and HTML snippet.
Written by Anil Gautam · Updated
How does a non-square logo become a square favicon?
Each of the ten sizes is drawn on its own square canvas. The tool scales your image to fit inside the square without cropping, centers it, and leaves the unused area transparent. A 1200 × 600 wordmark therefore becomes a 512 × 256 band with 128 transparent pixels above and below it in the 512 file, and in the 16 × 16 file it is only 8 pixels tall. If your logo includes a symbol or monogram, crop to that square part first, for example with Profile Picture Cropper with Circle crop turned off.
Start from an image at least 512 pixels on each side. Downscaling uses the browser's high-quality smoothing, but a smaller source has to be stretched up for the largest files and looks soft on a phone home screen. Thin strokes and small lettering blur together at 16 pixels, so a simplified mark works better for the smallest sizes.
What is in the ZIP, and where do the files go?
The download, favicons.zip, holds ten PNGs named from favicon-16x16.png to favicon-512x512.png, plus site.webmanifest and README.txt. Inside the README is the HTML for your head tag; the page itself does not display it. It links the 32 and 16 pixel icons, the 180 pixel apple-touch-icon and the manifest, and adds a theme-color meta tag. The 48, 64, 96, 128 and 256 pixel files are extras that nothing references until you add tags for them.
Every path begins with a slash, such as /favicon-32x32.png, so the files must sit at the root of your site. In Next.js and Vite projects the public folder is served from the root. On other setups, upload the files next to your home page, or edit the paths in both the snippet and site.webmanifest.
What do the site name and theme color fields control?
Site name fills both name and short_name in site.webmanifest. The field starts empty, and if you leave it blank both entries are written as empty text, so type your site's name before you download. Theme color is written to the manifest and to the theme-color meta tag, while background_color is fixed at #ffffff, display at standalone, and only the 192 and 512 pixel icons are listed. Type the theme color as a six-digit hex code such as #1a73e8, because the text box passes whatever you enter straight into both files. If your site name is long, shorten short_name by hand, since home screens cut long labels.