Skip to content
Dogu SangjaToolboxAll tools

Favicon Generator (ICO & PNG)

Make a favicon from an image, text or emoji. Get favicon.ico (16, 32, 48px), an Apple touch icon (180px), 192 and 512px web app PNGs and HTML code in one go.

Result

Add an image and your favicon.ico, PNG icons and HTML code appear here.

Files are processed only on this device and are never uploaded to a server. How it works

A star icon converted into ICO, PNG and a small favicon size

How to use

Pick one of two ways to create your favicon.

  • From an image: drag in your logo, click to pick a file, or paste a copied image with Ctrl+V (⌘+V on a Mac). PNG, JPG, WebP and SVG files up to 10MB are supported. If the image isn’t square, choose “Fit with padding” to keep the whole image or “Crop to center” to use only the middle. Padding and transparent areas can stay transparent or be filled with a color of your choice.
  • From text or emoji: enter 1–2 characters and choose a background color, text color and shape (square, rounded or circle). The text uses your device’s system font, so emoji may look slightly different from device to device.

The result shows the 16, 32, 48 and 180px icons at actual size, with the 16, 32 and 48px ones also shown enlarged, along with how the icon looks in a browser tab with a light and a dark theme. You can download each file separately or get them all at once with “Download all (ZIP)”.

A source image of 512px or larger is recommended. If it’s smaller, icons larger than the source are stretched and may look blurry, so you’ll see a warning. Which side the warning looks at depends on the “Make it square” setting: the longer side with “Fit with padding”, the shorter side with “Crop to center”. For example, an 800 × 400px image gets no warning with “Fit with padding”, but with “Crop to center” 400px becomes the reference and the warning appears. In that case only the 512px icon is stretched; the other five sizes are scaled down from 400px. An SVG is drawn fresh at each size, so no warning appears for it. If your SVG loads external fonts or images, though, those parts may be missing from the ICO and PNG files, so check the “Preview”. Large images are scaled down in steps, halving each time, so the small sizes don’t turn out jagged.

SVGs are rendered through an img element, so scripts inside the SVG are not executed.

Shape options in image and text modes: The “Shape” setting (Square, Rounded, Circle) exists only under “From text or emoji”. “From an image” just fits the image into a square and doesn’t trim the corners. If you need a round icon, upload an image whose corners outside the round shape are transparent and leave “Background for padding and transparency” on “Transparent”. The transparent parts of your image are kept in favicon.ico, icon-192.png and icon-512.png.

Files and sizes you get

File Size Used for
favicon.ico 16, 32, 48px Browser tabs
favicon.svg Original Browser tabs (only when you upload an SVG)
apple-touch-icon.png 180×180px iPhone and iPad home screen
icon-192.png, icon-512.png 192, 512px Web app manifest (Android home screen and more)
site.webmanifest — Web app manifest file

Microsoft’s documentation of the ICO format lists 16, 32 and 48px as common icon sizes, so favicon.ico contains these three. These three icons aren’t exported as separate PNGs and exist only inside favicon.ico. Apple’s documentation uses 180×180px as its example of the apple-touch-icon size for iPhone Retina screens and explains that without a <link>, the site root is searched for files named like apple-touch-icon.png. According to web.dev, Chromium-based browsers need at least a 192×192px and a 512×512px icon in the web app manifest, and the manifest file uses the .webmanifest extension suggested by the specification.

The apple-touch-icon sits on the home screen, so it’s made without transparency, with the background filled in. If you chose “Transparent” under “Background for padding and transparency” for an image, it’s filled with white. For text or emoji, the whole square is filled with the background color, whatever shape you picked.

How ICO files hold PNG images

An ICO file holds images in several sizes in a single file. It starts with a 6-byte header (ICONDIR) containing a reserved value of 0, a type of 1 (icon) and the number of images. After that comes a 16-byte entry (ICONDIRENTRY) for each image with its width, height, data length and the position where its data starts. That’s why every ICO file begins with the bytes 00 00 01 00.

ICO files originally held bitmap data, but since Windows Vista an image slot can also hold a complete PNG file. In that case the data is a 32-bit ARGB PNG image that starts with the PNG signature, and transparency comes from the PNG’s alpha channel. This tool builds favicon.ico this way from 16, 32 and 48px PNGs. It writes the file structure itself in the browser, without any extra library.

The ZIP file from “Download all” is also created in the browser. PNG and ICO files are already compressed, so they aren’t compressed again: they’re packed with the uncompressed (store) method and CRC-32 checksums from the PKWARE ZIP specification.

Adding it to your HTML

  1. Upload the downloaded files to the top-level (root) folder of your site.
  2. Copy the “Code for your HTML <head>” from the result and paste it inside the <head> of every page.
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

If you uploaded an SVG, <link rel="icon" href="/favicon.svg" type="image/svg+xml"> is added on the line after favicon.ico. According to MDN, when there are several rel="icon" links, the browser picks the most suitable one based on type, sizes and media, and if several are equally suitable, it uses the last one. Browsers that don’t support SVG use favicon.ico. The favicon.svg file is your uploaded file exactly as it is: cropping and background settings (“Crop to center”, “Fill with color”) apply only to the ICO and PNG files, never to favicon.svg. To make every icon look the same, delete the favicon.svg line from the HTML code and don’t upload that file.

This code links just two files with rel="icon": favicon.ico and (only after an SVG upload) favicon.svg. So for a favicon made from text, emoji or a PNG, JPG or WebP image, deleting the favicon.ico line from the HTML code means no rel="icon" line is left. The apple-touch-icon.png file is linked only through rel="apple-touch-icon", and icon-192.png and icon-512.png only through site.webmanifest.

The HTML Standard says that when a page has no rel="icon" link, the browser may request /favicon.ico instead. Even with the links in place, it’s safest to keep favicon.ico in the root. If you already have a web app manifest, copy just the icons part from the result into it instead of using the new file.

Sources

Frequently asked questions

Why can't I click the "Make it square" options?

When the image you add has the same width and height, both "Fit with padding" and "Crop to center" are turned off. The image is already square, so either option would give the same result. An SVG whose size next to the file name shows "—" instead of a number is also treated as square, and both options are turned off for it too. "Background for padding and transparency" can still be changed in that case.

I entered three characters and the preview disappeared.

With more than 2 characters you see the message "You can use up to 2 characters.", and no files are created until you're back to 2 or fewer. Characters are counted the way they appear on screen: a family emoji such as 👨‍👩‍👧 or a flag emoji such as 🇰🇷 is one character, so you can combine it with one more. Spaces at the start and end aren't counted, but a space between characters counts as one, so "A B" is 3 characters.

Can I put the files in a folder other than the site root?

Yes, but the tool has no setting for the path, so you have to edit the addresses yourself. Every href in the HTML code and every src in site.webmanifest is a root-based address that starts with /, such as /favicon.ico. If you upload the files to an /assets/ folder, for example, change the href on each line of the HTML code to the form /assets/favicon.ico, and change the two src entries in site.webmanifest to /assets/icon-192.png and /assets/icon-512.png.

My logo has a transparent background and is hard to see in a dark tab.

Switch "Background for padding and transparency" to "Fill with color" and pick a "Background color"; it starts out as white (#ffffff). That color is painted behind the transparent areas of favicon.ico and every PNG, and the "Dark theme" tab picture in the preview shows the result. If you leave the setting on "Transparent", only apple-touch-icon.png gets a white background and the other files stay transparent.

What should I do if the old favicon still appears after replacement?

Browsers cache favicons separately from the page, so after you upload a new file, the old icon may keep showing for a while. If that happens, try the following: • Add a version to the URL in your HTML, for example href="/favicon.ico?v=2". A different URL makes the browser fetch the new file. The HTML code this tool produces carries no version, so you have to type it in yourself. After an SVG upload there are two rel="icon" lines, favicon.ico and favicon.svg, and both need the version. The addresses of icon-192.png and icon-512.png aren't in the HTML but in the src entries of site.webmanifest, so if you replaced those two files, change the addresses there. • Do a hard refresh (Ctrl+Shift+R on Windows, ⌘+Shift+R on a Mac) or open the page in a private window. • Check that your server or CDN cache settings aren't still serving the old file.

Last updated: