Favicon Generator

Create favicon.ico, an Apple touch icon and 192/512 px app icons from a PNG, JPG or SVG logo. Includes the HTML code. Free, no upload.

Your files are processed in your browser and never uploaded.

Non-square images

Background colour

Used in site.webmanifest when your site is added to a phone's home screen.

Drop images here

Choose an image

SVG, HEIC, JPG, PNG, WebP, AVIF, GIF, BMP · up to 50 megapixels each · you can also paste

How to use

  1. Drop your logo or click "Choose an image". A square PNG or SVG of at least 512 × 512 pixels gives the sharpest result.
  2. Choose whether a non-square image is fitted inside the square or cropped to it, and whether the background stays transparent or gets a solid colour.
  3. Check the previews at real size, including the 16-pixel browser tab icon.
  4. Download the ZIP, copy the files to the root folder of your website and paste the HTML code into the head of your pages.

Features

Every size in one package
A multi-size favicon.ico (16, 32 and 48 px), a 180 px Apple touch icon, 192 and 512 px icons for Android and installable web apps, and a ready-to-use site.webmanifest.
SVG logos supported
An SVG source is rendered at full resolution before scaling, and the original SVG is included in the package for browsers that can use vector favicons.
Real-size previews
See the icon exactly as it will appear in a browser tab and on a phone home screen before you download anything.
Your logo stays with you
Unreleased brand assets are processed on your device. Nothing is uploaded to a server.

What a favicon is used for

The favicon is the small icon shown in browser tabs, bookmarks, history lists and next to your pages in Google’s mobile and desktop search results. When someone adds your site to the home screen of a phone, a larger version of the same icon becomes the app icon. A clear, recognisable favicon helps people find your tab among a dozen others, and a missing one makes a site look unfinished; the browser also requests /favicon.ico on every new visit and logs an error if it does not exist.

The files in the package

favicon.ico holds three images in one file: 16 × 16 pixels for tabs on standard screens, 32 × 32 for high-resolution screens and the Windows taskbar, and 48 × 48 for desktop shortcuts. The images inside are stored as PNG, which keeps their transparency and is supported by all current browsers.

apple-touch-icon.png (180 × 180) is used by Safari on iPhone and iPad when a page is added to the home screen, and in some bookmark views. It has no transparency, because iOS would show transparent areas as black.

icon-192.png and icon-512.png are referenced from site.webmanifest. Chrome on Android uses them for home screen shortcuts and installed web apps, and the 512 px version is shown on the splash screen while an installed app starts. The manifest also sets the theme and background colour to the colour you picked.

If you start from an SVG file, icon.svg is added too. Browsers that support vector favicons use it and get a perfectly sharp icon at every size and zoom level.

Getting a sharp result

Every icon is scaled from a 512 × 512 pixel master image with a high-quality Lanczos filter, so start from the largest version of your logo you have, ideally the SVG or a PNG of at least 512 pixels. Small icons work best with bold shapes and strong contrast: wordmarks and slogans become unreadable below 48 pixels, so many brands use just their initial or symbol as a favicon.

A logo with a transparent background looks good on light browser themes but can disappear on a dark tab bar. If your logo is dark, consider a solid background colour, or add a light outline to the logo itself.

To prepare the source image first, the circle crop tool makes a round logo with a transparent background, and the image converter turns WebP, HEIC or AVIF artwork into PNG.

Frequently asked questions

Which favicon files does a website actually need?

For current browsers, a favicon.ico in the site root, an apple-touch-icon.png for iPhones and iPads, and a web app manifest pointing to 192 and 512 pixel PNGs cover everything. The many other sizes older generators produced, such as Windows tile images, are no longer used by any current browser.

Where do I put the files?

Upload them to the root folder of your website, so that favicon.ico is reachable at yourdomain.com/favicon.ico. Then add the HTML lines shown under the preview to the head section of every page, or to your site's shared template.

Why does my favicon not show up after I changed it?

Browsers cache favicons aggressively, often for days. Open the new favicon.ico address directly in the browser and reload it, or test in a private window. Search engines update the icon shown in results on their next crawl, which can take a few weeks.

Why is the Apple touch icon not transparent?

iOS fills transparent areas of home screen icons with black, which makes most logos look broken. The touch icon is therefore always filled with your background colour, or white if you chose a transparent background. iOS rounds the corners itself, so the image should be a plain square.

My favicon looks blurry. What can I do?

At 16 pixels there is room for very little detail. Use a simplified version of your logo, such as a single letter or symbol without fine text or thin lines, and choose "Crop to square" if the logo has lots of empty space around it.

Will Google show my favicon in search results?

Google displays a site's favicon next to its search results. Its guidelines ask for a square icon whose size is a multiple of 48 pixels and which is linked from the home page; the 48 px icon in favicon.ico and the 192 and 512 px PNGs all meet that rule.

Related tools