Micru Logo

Favicon Generator

Upload any image or paste SVG code to instantly generate a complete favicon set. All processing happens in your browser - nothing is uploaded to a server.

Click or drag an image here

Supports PNG, JPG, WEBP, GIF, SVG and more

What Is a Favicon?

A favicon (short for "favourite icon") is the small image browsers display in the tab bar, bookmarks list, browser history, and on home screens when a user saves a website as a shortcut. Despite being tiny, favicons are one of the most visible branding elements on the web - they appear every time someone has your site open, making them worth getting right.

Favicons were introduced by Internet Explorer 5 in 1999 as a single favicon.ico file at the root of a domain. Over the following two decades the standard expanded dramatically: modern browsers and operating systems request multiple sizes, formats, and a JSON manifest, each serving a different context. This tool generates the complete set in one click.

What Files Does This Tool Generate?

favicon.ico

The classic multi-resolution ICO file containing 16×16, 32×32, and 48×48 pixel frames. Every browser understands ICO, making it the essential fallback for maximum compatibility - including legacy browsers, Windows taskbar pinning, and RSS readers.

favicon.svg

A scalable vector favicon, generated when you supply SVG input. Modern Chromium and Firefox browsers prefer SVG favicons because they look sharp at any DPI including 4K and Retina displays. SVG also supports the prefers-color-scheme media query for automatic dark mode switching.

apple-touch-icon.png

A 180×180 PNG used by Safari on iOS and iPadOS when a user adds your site to their Home Screen. Apple does not use the standard favicon for this purpose - without this file, iOS generates a screenshot thumbnail instead, which looks unprofessional.

favicon-16x16.png & favicon-32x32.png

Explicit PNG favicons declared via <link> tags for browsers that support PNG but not ICO. The 16px size is used for browser tabs; the 32px size is used by Safari's Reading List and some toolbar contexts.

favicon-192x192.png & favicon-512x512.png

Required by the Web App Manifest for Progressive Web Apps (PWAs) on Android. Chrome uses 192px for the app icon and 512px for the splash screen when the site is installed to a home screen.

site.webmanifest

A JSON file that tells browsers the site can be installed as a PWA. It references the 192px and 512px icons and sets the display mode, theme color, and app name. Required for Chrome's "Add to Home Screen" install prompt to appear.

How to Install Favicons on Your Website

After downloading and unzipping the generated files, place them in the root of your website (e.g. public/ in most frameworks). Then add the HTML snippet provided by this tool to the <head> section of every page. The recommended tag order is:

  1. SVG favicon (if available) - for modern browsers and dark-mode support.
  2. ICO fallback - for all other browsers and legacy support.
  3. Apple Touch Icon - for iOS home screen shortcuts.
  4. PNG icons (32px, 16px) - explicit PNG declarations for clarity.
  5. Manifest link - to enable PWA install prompts.

If your site uses a framework such as Next.js, Nuxt, Astro, or SvelteKit, check the framework's favicon documentation - most have a dedicated public/ or static/ folder where favicon files must be placed, and some provide first-class manifest support.

SVG Favicons and Dark Mode

One of the most underused features of modern web development is the SVG favicon's ability to adapt to the user's color scheme. Unlike raster formats, an SVG favicon can embed a @media (prefers-color-scheme: dark) rule directly in its stylesheet, swapping colors automatically without JavaScript.

Example

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #1d1d1f; }
    }
  </style>
  <rect width="32" height="32" rx="4"/>
  <!-- your icon path here -->
</svg>

This technique is supported by Chrome 80+, Firefox 77+, and Edge 80+. Safari on macOS also supports it. Use this approach when your brand has both light and dark variants, or when your icon contains a white or black element that would disappear against the browser's tab bar in certain themes.

Best Practices for Favicon Design

Design for 16px first. The browser tab is the most common context for a favicon, and at 16×16 pixels there are only 256 individual pixels to work with. Complex logos with fine detail, thin strokes, or small text become unreadable at this size. Reduce your logo to its most recognizable element - typically a single letter, a symbol, or a distinctive shape.

Use a square canvas. Favicons are always displayed in a square slot. If your logo is wide (like most wordmarks), isolate the icon mark or use just the first letter. Squeezing a wide logo into a square makes everything too small to read.

Avoid thin strokes at small sizes. A 1px stroke that looks elegant at 512px will disappear or bleed at 16px due to sub-pixel rendering. Use bold, solid shapes with clear contrast. A minimum effective stroke weight at 16px is about 2px.

Ensure sufficient contrast. Your favicon must be visible against both light and dark tab bar backgrounds. Test your icon in both modes. Many designers add a subtle background shape (a rounded square or circle) behind the icon to ensure contrast regardless of the browser theme.

Use transparency thoughtfully. PNG and SVG support alpha transparency, which is useful for icons with soft edges or that need to blend with the tab bar. ICO with embedded PNG also supports transparency. Avoid pure white icons with no background - they become invisible in light-mode tab bars.

What Image Formats Can I Upload?

This tool accepts any image format your browser supports: PNG, JPG/JPEG, WEBP, GIF, AVIF, BMP, and SVG. For the best results:

  • SVG - the ideal input. Vector graphics scale perfectly to any size, producing the sharpest possible output at every resolution. If your logo exists as an SVG, always use it.
  • PNG (transparent background) - second best. A high-resolution PNG with a transparent background (at least 512×512 pixels) produces clean results at all output sizes.
  • PNG or JPG (solid background) - fine for most use cases, but the background will appear in the generated favicon. If your source has a white background, the favicon will too.
  • Low-resolution raster images - will appear pixelated when upscaled. Always start from the highest-resolution source available.

How This Tool Works

Everything runs directly in your web browser using the Canvas API. When you click Generate, the tool:

  1. Loads your image (or SVG blob URL) into an HTMLImageElement.
  2. For each target size, draws the image onto an off-screen <canvas> at the exact pixel dimensions.
  3. Exports each canvas as a PNG Blob using canvas.toBlob().
  4. Builds a multi-frame ICO binary from the 16, 32, and 48px PNG frames by hand - ICO is a simple container format where each frame is stored as raw PNG data.
  5. Packages all files into a ZIP archive client-side using JSZip.

Your image never leaves your device. There are no server uploads, no accounts, and no file size limits beyond what your browser can handle in memory.