ES

Favicon Generator

Make a favicon from an image, text or emoji: favicon.ico, every PNG size, the Apple touch icon and a web manifest.

Drop an image here or click to choose a file PNG, JPG, SVG or WebP. A square image of 512 px or more works best.

Style

Shape

Web app manifest

Choose an image to start

Your favicon shows up here at every size, with the files to download.

Everything is drawn in your browser with canvas. Your image is not uploaded.

About the Favicon Generator

A favicon is the small icon browsers show in tabs, bookmarks and history, and phones use a larger version when someone adds your site to the home screen. Start from your logo, a letter or an emoji, choose the background, shape and padding, and the generator draws every file a site needs in your browser, ready to download as a ZIP.

How to use the Favicon Generator

  1. Choose the source

    Drop an image in the Image tab, type 1 to 3 characters in the Text tab and pick a font and weight, or choose an emoji in the Emoji tab.

  2. Adjust the style

    Pick a background color or make it transparent, choose a square, rounded or circle shape and set the padding. The preview shows every size and how the icon looks in a browser tab.

  3. Download and add it to your site

    Click Download all (.zip), upload the files to the root of your site and paste the HTML snippet into the <head> of your pages.

When to use it

A favicon for a new website

Turn your logo into favicon.ico, the PNG sizes and the Apple touch icon in one go, instead of exporting each size by hand.

A quick icon without a logo

Side projects, docs and internal tools still need a tab icon. Your initials or an emoji on a colored background stay readable at 16 px.

Web apps people can install

The 192 and 512 px icons and site.webmanifest are the icons and colors Android and Chrome use when someone installs your site or adds it to the home screen.

Frequently asked questions

Which favicon files do I really need?

favicon.ico works in every browser, old ones included, and is the file browsers request at /favicon.ico when a page links no icon. Add apple-touch-icon.png (180 px) for iPhone and iPad home screens, and site.webmanifest with the 192 and 512 px icons for Android. The 16 and 32 px PNGs and favicon.svg are extras that current browsers can pick instead.

Why is the Apple touch icon never transparent or round?

iOS rounds the corners of home screen icons itself and fills transparent areas with black, so the generator always draws apple-touch-icon.png as an opaque square: with your background color, or white when the background is transparent.

Why is there no favicon.svg when I use an image?

The SVG favicon is generated only for text and emoji, which it can describe as vector text. An image is drawn into the PNG and ICO files. If your logo is already an SVG, you can upload that file as favicon.svg yourself.

Will my favicon look the same everywhere?

The PNG and ICO files are pixels, so they look the same everywhere. favicon.svg is drawn by each visitor's browser with the fonts and emoji of their device, so a letter or an emoji can look slightly different, and browsers without SVG favicon support use the ICO or PNG files instead.

Is my image uploaded?

No. The image is read and drawn with canvas in your browser, and the ICO and ZIP files are built there too. Only your settings, not the image, are remembered in this browser for your next visit.

Related tools

Browse all free online tools on Tooly — every one runs in your browser, with no account required.