dietsoda tools
Sign in
All tools

Favicon generator

One zip with favicon.ico, every PNG size Apple and Android ask for, a dark-mode-adaptive SVG, the web manifest, and the markup to paste into your <head>.

Start from

One or two characters work best.

A percentage of the icon’s width, so the shape stays identical at every size.

Goes in the web manifest — it’s what an “Add to Home Screen” prompt displays.

About the favicon generator

Turn a logo image, or one or two letters on a coloured background, into a complete favicon set in one zip. It includes favicon.ico, PNG sizes from 16px to 512px, Apple touch icons, an SVG favicon that can adapt to dark mode, a web manifest, and the link tags to paste into your HTML head. Files are generated on our server.

How to use it

  1. Choose to start from letters or from an uploaded PNG, JPEG, WebP or SVG (up to 10 MB).
  2. For letters, set the text, background and letter colours.
  3. Pick a corner shape: square, squircle or circle.
  4. Optionally add an app name and choose a dark-mode option.
  5. Press Download the set, unzip it into your site's root and paste the link tags into your head.

Questions

What size should a favicon be?
There is no single size. Browsers use 16x16 and 32x32, the .ico usually bundles 16, 32 and 48, Apple touch icons are 180x180, and Android and web manifests use 192x192 and 512x512.
Do I still need a favicon.ico file?
It is still worth including. Some browsers and tools request /favicon.ico directly, even when the page declares a PNG or SVG icon.
How do I make a favicon that works in dark mode?
Use an SVG favicon with a prefers-color-scheme media query inside it. Choose Auto-invert or pick a dark-mode colour and the SVG in the set switches automatically.
Why is my new favicon not showing?
Browsers cache favicons aggressively. Hard-refresh the page or open it in a private window, and confirm the link tags point to where you uploaded the files.