Dropvert/Favicon Generator

Favicon Generator — All Sizes from One Image

Generate all favicon sizes from a single image.

Drop files anywhere or click to browse

PNG, SVG, JPG, or any image

Modern browsers want about ten favicon sizes, an Apple touch icon, two PWA-manifest sizes, an .ico, a webmanifest file, and the right HTML snippet to wire them up. Dropvert's favicon generator takes one source image and produces the full set — zipped and ready to drop into your `/public` directory.

How it works

3-step walkthrough

  1. 1

    Drop a source image

    A PNG, SVG, JPEG — anything square and at least 512×512 for best results. Dropvert renders previews at the standard favicon sizes (16, 32, 64, 128) so you can sanity-check legibility.

  2. 2

    Configure (optional)

    Set the site name and theme/background colors for the webmanifest. Toggle inclusion of the .ico file, manifest, and HTML snippet.

  3. 3

    Download the zip

    Get a single zip containing favicon-16x16.png through 512x512.png, apple-touch-icon.png, android-chrome icons, favicon.ico, site.webmanifest, browserconfig.xml, and a copy-pasteable HTML snippet.

Why use Dropvert

Local-first, free, no upload required

  • Generates every favicon size browsers actually use (16 → 512), no manual exporting.
  • Includes the Apple touch icon, PWA manifest icons, and the .ico file.
  • Outputs a webmanifest with theme/background colors and the matching browserconfig.xml.
  • Ships an HTML snippet you paste straight into your `<head>`.
  • All in your browser — your logo never leaves your device.

Frequently asked questions

6 answered

What size source image should I use?
Ideally 512×512 or larger, square. Dropvert downscales to every required size with high-quality resampling. SVG sources work great because they rasterize cleanly at every size.
Do I really need all these sizes?
For a marketing site, the bare minimum is favicon.ico, apple-touch-icon (180×180), and 16×16 + 32×32 PNGs. Dropvert ships everything because the cost of including extras is tiny and you avoid future "huh, I should add the X icon" rework when you decide to add a PWA manifest.
What's the webmanifest for?
It tells browsers your site can be installed as a Progressive Web App — added to the home screen on iOS/Android, launched as a standalone window on desktop. The manifest defines the name, theme color, and icons used for the installed app.
Why both an .ico and PNG favicons?
.ico is the legacy format Windows/Edge sometimes still want. Modern browsers prefer the PNG sizes referenced in `<link rel="icon">` tags. Including both is belt-and-suspenders — a few KB extra for full compatibility.
Will it work for transparent logos?
Yes. Transparent PNG and SVG sources keep their transparency through every output size. The generated favicons themselves are PNG with alpha; the .ico embeds a 32×32 PNG.
Can I update just one icon and keep the others?
Not directly — Dropvert regenerates the full set from the source. If you need to swap a single icon, do it manually in your project after the initial generation.

Related tools

5 suggestions