Skip to content
Musterli

Favicon Generator

Favicons and app icons from a letter, a shape or your logo. One click gives you a pack with every size, the manifest and the HTML.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the Favicon Generator

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

A favicon is the small picture in the browser tab, in bookmarks and in the history. Phones show an app icon when someone adds your website to the home screen. Modern websites need several files for this: favicon.ico for older browsers, favicon.svg for every size and dark mode, an Apple touch icon, icons for Android and a manifest. The favicon generator creates all of them from one design.

How it works

Choose a letter, a shape from the library or your own logo as the content. Set the background (color, gradient, pattern or transparent), the tile shape and the padding. Press Space for new colors. Turn on own colors for dark mode if you like and enter the name and colors under App and manifest. Then export the icon pack as a ZIP, copy the files to the root folder of your website and paste the HTML into the head.

Try the Favicon Generator now

FAQ

Which files are in the icon pack?
favicon.ico with 16, 32 and 48 px, favicon.svg, apple-touch-icon.png (180 px), icon-192.png, icon-512.png, icon-512-maskable.png for Android, site.webmanifest and head-snippet.html with the matching tags. These are the files current browsers and phones actually use.
What is a maskable icon?
Android cuts app icons into circles, drops or rounded squares. A maskable icon therefore fills the whole area and keeps its content in the safe zone, a circle with 80 % diameter. The Maskable variant shows you how it looks.
How does the favicon work in dark mode?
With own colors in dark mode, favicon.svg holds both variants and the browser picks one through prefers-color-scheme. The HTML gets a second theme-color for dark interfaces as well.
Is my logo uploaded?
No. Everything happens in your browser, including packing the ZIP. Your logo is not part of the share link, and SVG files are cleaned of scripts and external references first.
Why does the letter look slightly different on another device?
Text uses the device's system fonts, so no font files are needed. The PNG files are drawn with the fonts of your computer. For an identical result everywhere, use a shape or your logo as SVG.