Favicon Generator

How do you generate a favicon package from a logo?

Choose an image or drag & drop a PNG, JPG, WebP, or SVG, adjust Icon appearance, and click Generate favicon package. You get standard PNGs, separate maskable icons, and a multi-size ICO. Inspect the tab previews, then select Download package (.zip) for the images, manifest, and installation HTML together.

The source does not need to be square. Start with a recognizable symbol rather than expecting a full wordmark to remain readable in a small tab. Fit entire image preserves the whole source; Crop to fill (center) trims overflow. Neither removes an existing background or isolates a symbol from a larger picture. The source preview displays the decoded dimensions so you can check the file before generating.

How do fit, crop, padding, and background change a rectangular logo?

Consider a 400 by 200 pixel logo rendered into a 32 pixel icon with 10% standard padding. Padding reserves 3.2 pixels on each side, leaving a 25.6 by 25.6 pixel drawing area. These are canvas coordinates before rasterization, so fractional values are expected.

One rectangular logo with the same output size and padding

Image fit	Scaled artwork	Placement and clipping
Fit entire image	25.6 × 12.8 pixels	Starts at x = 3.2, y = 9.6; all artwork remains visible.
Crop to fill (center)	51.2 × 25.6 pixels	Starts at x = −9.6, y = 3.2; horizontal overflow is clipped to the padded square.

Fit uses the smaller scale needed to place the source inside the available square; crop uses the larger scale needed to cover it. Both center the image and preserve its proportions. Padding ranges from 0 to 40 percent per side. At the maximum, only 20% of the icon width remains available, so generous padding can make a tab symbol difficult to recognize.

Standard icons start with no padding and no added background. Leave Solid background unchecked to retain transparent source areas. Enable it and choose Background color to fill those areas and the border. Opaque source pixels remain intact: this is not background removal. The selected appearance applies to all standard PNGs and the ICO frames.

Which sizes and formats are included in the download?

The archive contains 13 files. Eight standard PNGs are square at 16, 32, 48, 64, 128, 180, 192, and 512 pixels. Two additional PNGs are named maskable-192.png and maskable-512.png. The remaining files are favicon.ico, site.webmanifest, and head.html. Click an image card to download that individual output instead of the archive.

The ICO is a container holding three PNG frames at 16, 32, and 48 pixels. It does not contain the larger images. The HTML snippet has four links: the ICO, the 32 pixel PNG, the 180 pixel apple-touch-icon, and the manifest. The manifest references the standard and maskable 192 and 512 pixel files. Other standard sizes remain available for your own declarations.

SVG is accepted as a source, but the generator rasterizes it; the package does not include an SVG favicon. For a standalone icon-container workflow, use the PNG to ICO converter. To prepare a raster source from vector artwork separately, use the SVG to PNG converter.

How do you keep maskable artwork inside the safe area?

Maskable icons have independent settings because their outer area may be masked by the system displaying them. This generator always uses Fit entire image for these files, even when standard icons use a center crop. Set Maskable padding separately from standard Padding and choose an opaque Maskable background. The defaults are 22% padding per side and white.

The preview shows a circle whose diameter is 80% of the icon width. Keep essential artwork inside that circle; the guide itself is not exported. For a square source, default padding leaves a centered square covering 56% of the icon width. Its corners sit about 39.6% of the width from the center, just inside the guide's 40% radius. Lower padding can push those corners outside the circle.

The Web App Manifest standard distinguishes icon purposes: the generated entries use any for standard icons and maskable for the separate padded files. The manifest contains only an icons array. It supplies no application name, start URL, display mode, or service worker, so this package alone does not configure an installable PWA.

How do you install favicons at the root or in a subdirectory?

Leave Install base path at / when the files will live at your public site root. For a nested directory, enter a path such as /app/icons/. The generator applies that base to the HTML links and manifest image paths. A value such as assets becomes /assets/; this field describes a public URL path, not a local filesystem folder.

Download the ZIP and extract its files into that directory. The archive contains bare filenames rather than creating the directory structure for you. Paste head.html into your document's <head>, or use Copy HTML. If clipboard access is denied, select and copy the visible snippet manually.

If your site already has a manifest, merge the generated icon entries into its icons array while retaining the application's other settings. Keep the manifest link pointing to the file your site actually uses. Changing Install base path updates the snippet without re-rendering images; download another ZIP to obtain matching manifest and HTML files. Open the deployed icon URLs directly to confirm their locations.

What should you check before publishing or retrying a failed image?

Inspect the 16 and 32 pixel previews against both light and dark tab backgrounds. These display the generated image at those dimensions, helping you spot thin strokes or artwork that blends into the background. They are previews of the same files, not separate theme-specific exports. Use Edit settings to revise appearance, then generate again: appearance changes clear the previous outputs.

The tool rejects empty files and unsupported filename extensions, and reports images the browser cannot decode. It imposes no file size cap, but large inputs still consume device memory. The source preview warns when either dimension is below 512 pixels; this is a warning rather than a minimum input requirement. Enlarging a small raster logo can produce soft large icons. Use the image resizer to prepare an oversized source if processing is difficult.

Image reading, canvas rendering, ICO encoding, and ZIP creation run in your browser. If ZIP creation fails, try the individual image downloads. After installation, verify the deployed files before troubleshooting a stale tab icon; a private window can help distinguish a cached favicon from an incorrect path.