jarvisbox

Favicon Generator

Generate a complete favicon package — 16 PNG sizes, Apple Touch Icon, maskable PWA icon, site.webmanifest, and HTML snippet from one image.

100% client-side · no upload

Drop an image here, or browse

PNG, JPG, SVG, WebP — square image recommended (512×512+)

Upload an image above to generate your complete favicon package.

How to create a favicon

  1. Upload or drag a square PNG, SVG, or JPG logo — at least 512×512 px recommended for crisp results at all sizes.
  2. The generator instantly renders all icon sizes. Click any size label below a preview to download that individual PNG.
  3. Click Download All (ZIP) to get the complete package: 16 PNG sizes, an Apple Touch Icon (180px), a maskable icon, a site.webmanifest, and a ready-to-paste snippet.html.
  4. Open snippet.html and paste its contents into your website's <head> to activate all favicon variants.

Common use cases

Need just the browser-tab icon from an emoji? Try the Emoji Favicon Generator. Resizing an existing icon? See Icon Resizer. Building a full app icon set? Try Image to Icon Set.

More design tools: Color Contrast Checker · SVG Optimizer · All Design Tools

Targeting a specific platform? Apple Touch Icon Generator · PWA Icon Generator

Preguntas frecuentes

What sizes does the favicon generator create?
The ZIP package includes PNG favicons at 16×16, 32×32, 48×48, 57×57, 60×60, 72×72, 76×76, 96×96, 120×120, 128×128, 144×144, 152×152, 192×192, and 512×512 pixels — plus an Apple Touch Icon at 180×180 and a maskable 512×512 for Android PWAs. A site.webmanifest and ready-to-paste HTML snippet are included too.
Does my image get uploaded to any server?
No. All processing happens entirely in your browser using the Canvas API. Your image never leaves your device. No account, no email, no signup required — just upload and download.
What image formats can I use as input?
Any format your browser supports: PNG, JPG, SVG, WebP, AVIF, GIF, and BMP. For best results, use a square PNG with a transparent background or a square SVG. Non-square images will be stretched to fit each icon size.
How do I add the generated favicon to my website?
Download the ZIP, copy the image files to your project root (or an /icons/ folder), then paste the contents of snippet.html into your HTML <head>. The snippet covers the browser favicon, Apple Touch Icon, and web manifest link for PWA support.
What is a maskable icon and why do I need one?
A maskable icon is the 512×512 PNG Android uses when adding a PWA to the home screen. Android crops the icon to a circle or squircle, so the generator adds 10% safe-zone padding around your image so nothing important is clipped at the edges. Without a maskable icon, Android may use your regular icon which can look clipped or blurry.
Can I generate a favicon from text or an emoji instead of an image file?
Yes — use our Emoji Favicon Generator (/design/favicon-from-emoji/) to turn any emoji into a complete favicon PNG set without needing an image file at all. It uses your device's native emoji font via the Canvas API.

Last updated:

Reportar un problema con esta herramienta