Free tools / Favicon generator

FREE TOOL

Favicon and app icon generator.

Add your logo and get favicon.ico, Apple touch and Android icons, a maskable icon and site.webmanifest in one ZIP, with the HTML tags to paste. Your file never leaves your browser.

No signup PNG, JPG, WebP or SVG Runs on your device

Add your logo

Your file never leaves your browser. Every icon is drawn and zipped on your device. We count the steps you take, with the file format, whether it has transparent areas and the settings used, never the image, its name or its pixels.

Loading the example...

Background

Fills every icon when Solid colour is on. The Apple touch icon and the maskable icon always use it, so they are never see-through.

8%

Space between your logo and the edge of each icon, on every side.

Fit
Manifest and tags

Written into site.webmanifest and shown in the previews. Browsers only offer to install a site as an app when it has a name, so without one the manifest leaves out the app display mode.

Used in the tags. Leave it as / to put the files at the root of your site.

Check the previews

Browser tab, light and dark, drawn from favicon.svg
16 px favicon on white 32 px favicon on white 48 px favicon on white
16 px favicon on black 32 px favicon on black 48 px favicon on black
The 16 px favicon enlarged six times to show each pixel
Inside favicon.ico: 16, 32 and 48 px at real size, and 16 px enlarged
iOS home screen, from apple-touch-icon.png
Maskable icon with the safe zone circle drawn over it
Safe zone
Maskable icon cropped to a circle
Circle
Maskable icon cropped to a rounded square
Rounded
Android maskable icon, cropped two ways

Download and install

The previews show the Vellem mark as an example. Add your logo to download your own set.

    Paste into the <head> of your pages

    What is in the ZIP.

    Every file is made from the same working copy of your logo, so the set matches from the 16 px tab icon up to the 512 px app icon.

    FileWhat it isWhere it is used
    favicon.ico16, 32 and 48 px in one fileBrowser tabs, bookmarks and history
    favicon.svgYour SVG with the same trim, padding and background as the PNGs, only when you add an SVG that has a viewBox or a width and heightBrowsers that support SVG favicons use it in place of favicon.ico
    favicon-16x16.png
    favicon-32x32.png    		PNG faviconsBrowser tabs, through the tags, when you add a PNG, JPG or WebP. With an SVG the tags use favicon.svg and favicon.ico, and these are spare copies for tools that ask for a PNG
    apple-touch-icon.png180 px, always on your solid colourHome screen shortcuts on iPhone and iPad
    android-chrome-192x192.png
    android-chrome-512x512.png    		Web app icons, listed in site.webmanifestInstalled web apps and home screen shortcuts on Android
    maskable-icon-512x512.png512 px, logo inside the safe zone, solid colour to the edgesDevices that crop app icons into circles or other shapes
    site.webmanifestIcon list, start URL, theme and background colour, and your site name with the app display mode when you give oneLinked from your pages with the manifest tag
    head-snippet.htmlThe link tags shown abovePaste into your page template

    How to add them to your site.

    1. Unzip favicons.zip and upload the files to the root folder of your site, or to the folder you typed in the generator.
    2. Paste the link tags into the <head> of your pages. On most site builders and frameworks that is one shared layout or template file.
    3. Open site.webmanifest in any text editor if you want to change the name, the colours or the display mode later.
    4. Browsers keep favicons cached, so an old icon can stay in a tab for a while after you upload a new one. Opening your site in a private window is a quick way to check the new set.

    Questions.

    Is my logo uploaded anywhere?

    No. The page reads your file, draws every size with your browser's canvas, and builds the ZIP with JavaScript on your device. The image, its pixels and its file name are never sent. The page counts the steps you take and a few facts about each: when you add a file, its format (PNG, JPG, WebP or SVG) and whether it was chosen, dropped or pasted; when the icons are made, the format, whether the image has transparent areas, how long drawing took and how many files the ZIP holds; when you download the ZIP, the file count, the format and whether Solid colour and the maskable icon were on; when you copy the tags, whether the example was showing; and clicks on the links to Vellem. Like every page on vellem.io, it also counts the visit, the page you came from and how far down you scroll.

    What happens to transparency?

    With Transparent picked, the favicons and the two Android icons keep your transparent background. The Apple touch icon and the maskable icon always get your solid colour, so you choose what sits behind your logo on a home screen.

    What is a maskable icon?

    An icon a device is allowed to crop into a circle, a rounded square or another shape. The W3C Web App Manifest spec guarantees that a central circle, with a radius of 40% of the icon's size, stays visible whatever the crop. The generator shrinks your logo until everything drawn sits inside that circle and fills the rest with your colour.

    What should I upload?

    An SVG gives the sharpest result, because it is drawn at high resolution before any size is made from it. For PNG, JPG or WebP, 512 px or larger works well. Smaller images still work, but the 512 px icons are enlarged from them and can look soft.

    Why do small favicons look simpler than my logo?

    At 16 px there are only 256 pixels to work with, so fine lines and small text blur together. Check the enlarged 16 px preview. If your logo turns to mush, a bolder mark or a single letter usually reads better in a tab.

    Need a logo to put in the tab?

    Vellem designs one from a short brief. See a free, watermarked preview of your primary mark in about 90 seconds, then add your email for the full logo family, app icon included.

    Get a free preview