UFOZoo

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

Generate website favicon icons online. ICO, PNG, SVG, Apple Touch, and PWA Maskable output. Free, browser-only, no uploads required.

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
  • ✓All processing in browser — zero server uploads, complete privacy
  • ✓Save all icons as a single ZIP package
  • ✓Platform-specific installation guides for 11 frameworks

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 tool generate?

∨
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.

Is my image uploaded to any server?

∨
No. All processing happens entirely in your browser using the HTML Canvas API. Your image is never uploaded, stored, or transmitted anywhere.

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.

Related Tools

Image Converter — Convert HEIC, JPG, PNG, WebP, AVIF Online

Convert images between HEIC, JPG, PNG, WebP, AVIF, and ICO formats. Adjust quality and batch convert. 100% browser-based.

Image Resizer — Resize, Rotate, and Flip Images Online

Resize images online — Fit/Fill/Stretch scaling modes. Rotate, flip, set dimensions in pixels or percent. Output JPEG/PNG/WebP with quality. 100% browser-based.

Image Cropper — Crop Images Online, Remove Unwanted Areas

Crop images online with an interactive overlay. Select the area you want, remove unwanted edges. Output JPEG/PNG/WebP. 100% browser-based, no upload.

Image Editor — Free Watermark, Filters & Color Adjust

Add text watermarks, apply filters (grayscale, sepia, blur), and adjust brightness/contrast. Download as JPG, PNG, or WebP. No uploads needed.