How to use the Favicon Generator

Choose letters or an image as the starting point.
Set the background, shape and padding. Check the 16 px preview: that is how small most tabs show it.
Select Create favicons, download the ZIP, upload the files to your site's root folder and paste the HTML into the <head> of your pages.

Example

Input

Letters: “T”, lime background, rounded square

Result

favicon.ico (16, 32 and 48 px)
favicon-16x16.png, favicon-32x32.png
apple-touch-icon.png (180 px)
android-chrome-192x192.png, android-chrome-512x512.png
site.webmanifest, favicon-html.txt

About this tool

favicon.ico holds 16, 32 and 48 pixel versions in one file, stored as PNG inside the ICO container. Every current browser reads that format. The PNG files cover browsers that prefer them, the Apple touch icon is used when someone adds your site to an iPhone home screen, and the 192 and 512 pixel icons are listed in the web manifest for Android.

If your site uses a framework such as Next.js, check its documentation: some frameworks pick up favicon.ico or icon.png from a specific folder automatically.

Known limitations

No SVG favicon is generated: drawing your image as vector paths is not possible from a raster image.
The Apple touch icon is always a square with a solid background, because iOS shows transparent areas as black and rounds the corners itself.
Detailed logos become unreadable at 16 px. A single letter or a simplified mark works better.
Emoji use your device's emoji font when the icon is drawn.

Frequently asked questions

Where do I put the favicon files?

In the root folder of your website, next to the home page, so that /favicon.ico opens the icon. Then paste the HTML lines into the <head> of every page, or your site template.

Why does my old favicon still show?

Browsers cache favicons for a long time. Open the icon's URL directly, or test in a private window, to see the new one.

Is my logo uploaded?

No. The icons are drawn and packed into the ZIP by your browser.