Skip to main content
UFOZoo

Favicon Generator: Website Icon ICO/PNG/SVG Maker Online

Favicon generator online: create website icons in ICO, PNG, SVG, Apple Touch, and PWA sizes from images, with auto-cropping and dark theme support.

Updated 2026-08-16

Related Tools

Image Converter: HEIC, JPG, PNG, WebP & AVIF Online

Image Resizer: Resize, Rotate & Flip Images Online

Image Cropper: Crop Images Online & Remove Unwanted Areas

Image Editor Online: Watermark, Filters & Color Adjust

HEIC to JPG Converter: iPhone Photos to JPG Online

HEIC to PNG: Convert iPhone HEIC Photos with Transparency

Features

  • SVG input recommended: preserves vector quality with dark theme support
  • Generate favicon.ico (16+32+48 multi-size) for legacy browser compatibility
  • Generate apple-touch-icon.png (180×180) for iOS home screen shortcuts
  • Generate PWA icons: icon-192.png, icon-512.png, and icon-mask.png (maskable)
  • Auto-crop images to square with interactive crop box
  • Custom background color for transparent images
  • Save all icons as a single ZIP package
  • Platform-specific installation guides for 11 frameworks
  • All processing happens in your browser: your image files are not uploaded to any server

How to Use

  1. 1Open any image (PNG, JPG, WebP, SVG). The tool auto-crops to square.
  2. 2Drag the crop handles to select the exact area for your icons.
  3. 3Adjust padding and background color if needed.
  4. 4Click 'Generate Favicons': all files are created instantly.
  5. 5Select your platform from the guide tabs for step-by-step installation instructions.
  6. 6Save the ZIP package and follow the guide for your framework.
  7. 7For best cross-platform compatibility, enable both ICO and PWA options before generating. The ICO file ensures legacy browser support, while the SVG favicon serves modern browsers with dark/light theme support. PWA icons are required for Android and Progressive Web App installation.
  8. 8After generating the icons, use the installation guide tab for your specific platform (HTML, Next.js, WordPress, Shopify, etc.). Each guide shows exactly where to place the files and what HTML code to add to your <head> section for correct browser discovery.

Frequently Asked Questions

What files does this favicon generator create?

The tool generates 6 files: favicon.ico (16+32+48 multi-size, legacy browsers), favicon.svg (modern browsers, SVG input only), apple-touch-icon.png (180×180, iOS), icon-192.png and icon-512.png (PWA), and icon-mask.png (512×512 maskable for Android). A manifest.webmanifest is included for PWA integration.

Should I open SVG or PNG?

SVG is strongly recommended. SVG icons preserve vector quality at any size, support automatic dark/light theme switching, and produce smaller files. PNG/JPG/WebP inputs work but generate raster-only outputs without SVG support. Open an SVG file for the best results.

Why does favicon.ico come first in the HTML?

The ICO link must include sizes="any" to avoid a Chromium bug where .ico is favored over .svg. Without sizes="any", Chromium treats the multi-resolution ICO as a scalable icon, causing both ICO and SVG to be downloaded. This is the approach Next.js uses internally for favicon.ico output.

What is a maskable icon?

Android Adaptive Icons crop app icons into circles or rounded squares. A maskable icon has extra padding so the main content stays within the safe zone (80% of the icon area). The tool generates a separate icon-mask.png file with 10%+ padding specifically for this purpose.

Do I need all these files?

For a basic website: favicon.ico + favicon.svg + apple-touch-icon.png (3 files). For a PWA: add icon-192.png + icon-512.png + icon-mask.png + manifest.webmanifest. The tool generates everything so you can pick what you need.

Does the tool generate SVG favicons?

Yes, always. SVG input preserves the original vector quality. For PNG/JPG/WebP inputs, the SVG is generated with the image embedded. SVG favicons support automatic dark/light theme switching and are recommended for all modern browsers.

How do I add dark theme support to my favicon?

SVG favicons can include CSS media queries like @media (prefers-color-scheme: dark) to change colors automatically based on the user's system theme. The tool preserves this capability when you open an SVG file.

Does the ICO contain multiple sizes?

Yes. The tool now bundles 16×16, 32×32, and 48×48 in a single favicon.ico file. Browsers automatically pick the best size for each context: 16×16 for tabs, 32×32 for Retina/taskbar, 48×48 for Windows shortcuts. This matches what RealFaviconGenerator and other major tools produce.

Can I generate a favicon from text?

This tool generates favicons from image files (SVG, PNG, JPG, or WebP), so text alone is not enough. To get a text favicon, create an SVG with a <text> element (or render the text in any editor and export it), then open that file here. The SVG route also keeps dark-theme support for modern browsers.

Why doesn't my favicon show up in Google search results?

Google fetches and caches favicons when it crawls your pages, and it only refreshes them on a later crawl, so an update can take days or even weeks. Make sure favicon.ico (or the linked icon file) is at your site root and reachable without login, and use Search Console's URL inspection to request re-indexing after the change.

What image dimensions should I open?

For best results, open a square image at least 512×512 pixels. This ensures all generated icons (from 16×16 ICO to 512×512 PWA) maintain crisp quality. Simple logos with transparent backgrounds work best. Complex photos or detailed artwork may not scale well to very small favicon sizes (16×16) and should be avoided for favicon use.

How do I verify my favicon is working after installation?

After installing the favicon files, clear your browser cache and reload the page. Check the browser tab to see if the favicon appears. For a thorough test, open browser dev tools → Network tab and filter by 'icon' to see which favicon files are being loaded. If you see 404 errors, verify files are in the correct directory with exact filenames. Also test in incognito mode to bypass cache issues.

Why doesn't my favicon show up in WhatsApp, Slack, or other apps?

Third-party platforms fetch and cache favicons on their own schedule and rules; they may keep an old copy for days, require specific sizes, or use apple-touch-icon.png (180×180) instead of the browser tab favicon. Your site files are correct; the platform simply has not refreshed its cache. Check that apple-touch-icon.png is in place, and look for each platform's cache-clearing or 'refresh preview' tool (WhatsApp has one in its link preview settings); otherwise wait, as the cache expires on its own.