DYDevKitYard
ElementYard
← Design tools

Design Tool

Favicon Generator

Generate a complete favicon package from an image: PNG sizes, app icons, favicon HTML, manifest JSON and browser-only previews before downloading.

Favicon workspace

Upload a source image, tune the icon shape and export the favicon package your site needs.

Source image

No source image selected yet.

Icon controls

Non-square image handling
StatusReady to start

Upload a PNG, JPG or SVG image to generate favicon files.

Your source image stays in your browser. Favicon files are generated locally.

Live previews

DevKitYard

Approximate browser tab · actual 16×16 output

32×32 favicon
48×48 favicon
180×180 Apple touch icon
192×192 PWA icon
512×512 PWA icon

Generated PNG files

Generated favicon sizes appear here.

Package contents

9 files after generation

  • favicon.ico16×16, 32×32, 48×48 · ICO
    Pending
  • favicon-16x16.png16×16 · PNG
    Pending
  • favicon-32x32.png32×32 · PNG
    Pending
  • favicon-48x48.png48×48 · PNG
    Pending
  • apple-touch-icon.png180×180 · PNG
    Pending
  • android-chrome-192x192.png192×192 · PNG
    Pending
  • android-chrome-512x512.png512×512 · PNG
    Pending
  • site.webmanifestSupporting file · JSON
    Pending
  • favicon-html-snippet.txtSupporting file · Text
    Pending

favicon.ico embeds PNG images at 16×16, 32×32 and 48×48. Modern ICO readers support this structure; legacy behavior can vary.

Original image—
Output sizes16, 32, 48, 180, 192, 512
Generated files0
Total output0 B

HTML snippet

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

site.webmanifest

{
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Install your favicon package

  1. Download and extract the ZIP into your site's public or static root.
  2. Add the displayed link tags inside the document head.
  3. Keep site.webmanifest beside the generated icon files.
  4. Hard-refresh or clear the favicon cache when testing replacements.

For plain HTML or React/Vite, use the snippet directly. In Next.js App Router, place icon files in app using metadata file conventions or reference public files through the Metadata API; avoid duplicating both approaches.

How to Use Favicon Generator

  1. Upload square PNG, JPEG or simple SVG artwork, ideally at least 512×512.
  2. Choose contain or cover, then adjust padding, scale and transparent or solid background settings.
  3. Generate and inspect the actual 16, 32, 48, 180, 192 and 512-pixel outputs.
  4. Download individual files or the complete ZIP, then install its HTML links and site.webmanifest.

FAQ

What favicon sizes should I generate?

The package includes 16×16, 32×32 and 48×48 browser PNGs, a 180×180 Apple touch icon, and 192×192 and 512×512 web manifest icons.

Can I generate favicon HTML tags?

Yes. The displayed snippet references favicon.ico, the generated browser PNGs, Apple touch icon and site.webmanifest using their exact package filenames.

Are uploaded images private?

Yes. Source images are processed in your browser and are not uploaded.

Can browser favicon generation create every legacy ICO variant?

The ICO embeds PNG images at 16×16, 32×32 and 48×48. This is supported by modern ICO readers, while older platform behavior can vary.

Useful published resources for the next step.

Next stepMeta & Open Graph Generator

Add the website metadata that accompanies the icon package.

Next stepSchema Markup Generator

Create structured data for the website.

Related taskImage Resizer

Resize, edit and bulk export images for websites, social platforms, documentation and app stores.

Related taskImage Compressor

Compress JPEG, PNG, WebP, GIF first-frame and SVG images locally with before and after previews.