Favicon generator: one 512 pixel canvas, twelve files
The site is live, the logo is approved, and the browser tab still shows a grey globe. The favicon generator below takes an uploaded image, one emoji or up to three letters and draws it on a canvas of 512×512 pixels. Every output size is scaled from that canvas. The live preview shows the icon as a browser tab, as a Google result and on a phone home screen.
What stays on your laptop
The image is read with a FileReader and drawn on a canvas in your browser. Uploading a file or pressing a download button sends no request, and the network panel of your developer tools shows this. Files arrive as normal browser downloads. The code snippet reaches the clipboard only when you press Copy code.
Five settings, then the download
- Pick a source tab: Image / SVG upload, Emoji favicon or Text / monogram. Drop a PNG, SVG, JPG or WebP file, type one to three letters, or choose an emoji. There are 14 quick buttons for emojis.
- Choose a background: Transparent, Solid color or Modern gradient. The gradient has two colors and an angle from 0° to 360°.
- Set the padding (0–40%, default 15%) and the corner radius (0–50%, default 22%, the iOS squircle look).
- Type the site name. It becomes
namein the manifest, and its first 12 characters becomeshort_name. - Press Download complete package (.ZIP). You can also take single files from the size cards below the canvas.
The twelve files and the ZIP extras
The package holds these image files:
favicon.icoand four PNGs at 16, 32, 48 and 96 pixels- Three Apple Touch Icons, at 180, 152 and 120 pixels.
- Android icons at 192 and 512 pixels, plus a maskable icon at 512.
- A Windows tile of 150 pixels.
The ZIP adds site.webmanifest, browserconfig.xml and a README.txt. The Copy code button gives you the matching <link> and <meta> tags for your page head.
Where the result can surprise you
The .ico file holds three PNG layers: 16, 32 and 48 pixels. A 64 or 256 pixel layer does not exist. Emojis use the emoji font of your operating system, so the same emoji looks different on macOS, Windows and Android. Monograms use system fonts, and Impact or a cursive face may fall back to another font on your machine.
Corner radius and padding apply to every file, the maskable icon included. For a full-bleed maskable icon, set the radius to 0 and keep your artwork inside the dotted circle. The HTML snippet links the .ico, the 16 and 32 pixel PNGs, the 180 pixel Apple icon, the manifest and the Windows config. The 48, 96, 152 and 120 pixel files are in the ZIP but not linked. A small raster upload is scaled up, so start from 512×512 pixels or more. When the background is not solid, the manifest theme color is #2563eb.