Favicon Generator

How the Favicon Package works

A favicon is not one image but a set. A browser tab wants 16 pixels, a high-density tab or the bookmarks bar wants 32, a Windows shortcut wants 48, and a home-screen icon wants something far larger. The ICO format exists to hold several images in one file so the platform can pick the right one. That is what this tool builds: a directory of PNG images wrapped in an ICO container. PNG-in-ICO is a legal variant of the format and has been supported everywhere since Windows Vista.

Why it matters. The favicon is the only piece of branding that shows up in a crowded tab bar, a bookmark list, browser history and, for many searches, Google's mobile results, which show the favicon next to every listing. Google asks for a square icon of at least 48 × 48 pixels and may show a generic globe instead if it cannot fetch a suitable one. A missing favicon.ico also fills server logs with 404s, because browsers request /favicon.ico on their own whether or not a page links to it.

Where each size is used.

• 16 px: the tab and address bar on standard-density screens.
• 32 px: tabs on Retina and other high-density screens, the Windows taskbar and bookmark menus.
• 48 px: Windows desktop shortcuts, and Google's minimum for search results.
• 64 and 128 px: large Windows icon views and some Chromium surfaces.
• 180 px: the Apple touch icon for iOS home screens. It is a separate PNG, not part of the ICO.
• 192 and 512 px: the icons an installable web app lists in its manifest.

Each size is rendered independently. The lazy way to build a multi-size icon is to make the largest one and scale it down. That gives mush at 16 pixels, because a bilinear downscale of a detailed logo averages away exactly the strokes that made it recognisable. Here every entry is drawn straight from your source at its final size with high-quality resampling, which is the best any automated process can do.

16 pixels is not a small logo, it is a different logo. At that size you have 256 pixels in total and room for about three distinguishable shapes. Full wordmarks become illegible, thin outlines vanish and gradients turn to flat colour. If your brand mark is a horizontal logotype, make a separate square mark instead, such as a single letter, a symbol or a strong silhouette, and feed that in. No generator can rescue a source with too much detail to survive.

Choosing a size set. Classic (16, 32, 48) covers every browser and keeps the file small. Modern drops 16 and adds 64 and 128 for high-density screens and larger Windows views. Everything adds 256, the largest size ICO can hold, which Windows uses for its extra-large icon view. Choosing Modern or Everything also adds the Apple touch icon line to the suggested tags.

Background and transparency. A transparent favicon looks clean on a light tab bar and can vanish on a dark one, and a dark mark does the reverse. A white background is the safe default because it works in both places. Choose transparent when your mark has good contrast against both light and dark, or when you will supply a separate dark-mode icon.

Padding. Most browsers draw the favicon with no margin at all, so an icon that fills its square edge to edge looks right in a tab and slightly cramped as a bookmark. Five to ten percent padding is a reasonable compromise, and the tool caps it at 25 %. If your source is noticeably non-square and you left padding at zero, it adds 2 % so the mark is not flush against two edges once it is fitted into the square.

Reading the favicon generator result

• Source shows the size of the image you gave it. Anything smaller than the largest size in your set will be scaled up and look soft, so start from at least 256 pixels, or from an SVG exported large.
• Sizes in the file lists the entries inside the ICO.
• Background and Padding confirm what was applied, including the automatic 2 %.
• Output gives the total file size. Classic sets usually come in at a few kilobytes, and anything over about 100 KB suggests a noisy photo-like source.
• Per-size entries show each PNG's weight, which helps you see where the bytes went.

The note under the preview gives the <link> tags to paste into your page's head. Put favicon.ico at the site root. The tags also point at icon.png, an Apple touch icon and a web manifest; export those files separately if you want the full modern set. The guide from an SVG logo to a complete favicon set covers each file.

Tips and pitfalls.

• Browsers cache favicons aggressively, sometimes for days. After replacing one, test in a private window or add a version query such as ?v=2 to the link.
• Check the result against both light and dark tab bars before you ship.
• Keep the same mark at every size. A favicon that changes design between 16 and 32 pixels looks like a different site on different screens.

No upload. Favicon generators are one of the most common reasons people hand a logo to a random website. There is no need to: resizing an image and assembling a container format are both things a browser does perfectly well on its own, so nothing here leaves your machine.

Related tools