Which favicon sizes does a website need?

A common set is a favicon.ico containing 16, 32 and 48 px images, a 180×180 apple-touch-icon, and 192×192 plus 512×512 PWA icons referenced from the web manifest. This page generates all of these files together with the matching HTML tags in one step, and when the source is an SVG it also includes favicon.svg for browsers that support vector favicons.

Which sizes are inside the generated favicon.ico?

It contains three sizes, 16×16, 32×32 and 48×48, each embedded as a 32-bit PNG with an alpha channel. The file uses a 6-byte header plus a 16-byte directory entry for each size, a layout recognized since Windows Vista and by current browsers. The browser or operating system then picks whichever size best fits the place where the icon is shown.

Why does my icon get a black background on the iPhone home screen?

Some iOS versions render transparent areas of an apple-touch-icon as black. To avoid this, the 180×180 icon from this page is always filled with the background color and is never rounded, because iOS applies its own rounded mask. The default background is plain white, #ffffff, and you can change it to match your brand color before downloading all of the files.

Favicon generator

Create favicon.ico, Apple and PWA icons, a web manifest and HTML tags from one image

Computed in your browser

Drop a square image to generate every icon; padding, radius and background changes update automatically. Download the ZIP and copy the HTML.

Choose or drop an image You can also paste an image from the clipboard. Images are processed in this browser and never uploaded. PNG, JPG, WebP, SVG and more; a square image of at least 512×512 is recommended.

Padding 0%

Corner radius 0%

Background color

Keep transparency (except the Apple icon)

App name (manifest)

Theme color

Example

Input

icon.png (generated, 512×512 red rounded square with the letter D) · app name Dayeku Demo · theme color #a01e2b

Example result

favicon.zip: favicon.ico (16/32/48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest

Place the files in the site root and paste the generated HTML into each page's <head>. File names match the paths in the code.

Technical details & limits

Each size is scaled separately from the source (halving in steps beyond 2x) and placed proportionally inside the square with the chosen padding. favicon.ico is assembled by the page: a 6-byte header, a 16-byte directory entry per size, and each image embedded as a 32-bit PNG, supported since Windows Vista and by modern browsers. The 180×180 Apple icon is always filled with the background color and never rounded, because some iOS versions show transparency as black and apply their own rounded mask. The manifest lists the 192 and 512 sizes.

About this tool

Generate a full set of website icons from one PNG, JPG, WebP or SVG image: a favicon.ico with 16, 32 and 48 px images, 16 and 32 px PNGs, a 180 px apple-touch-icon, 192 and 512 px PWA icons, a site.webmanifest and HTML tags to paste into <head>; SVG sources also get favicon.svg. Set padding, corner radius, background, app name and theme color, then download everything as a ZIP. Nothing is uploaded.

How to use

Drop, choose or paste an image, ideally a square PNG or SVG of at least 512×512.
Adjust padding, corner radius and background, and enter the app name and theme color.
Download the ZIP, place the files in the site root and copy the HTML into <head>.

Input & output

Input: One JPEG, PNG, WebP, AVIF, BMP, GIF or SVG image up to 50 MB; non-square images are fitted proportionally with blank space.
Output: A ZIP with favicon.ico, five PNGs, site.webmanifest (plus favicon.svg for SVG sources) and the HTML tags.
Limits: No legacy Windows tile or Safari pinned-tab files; the tool does not inspect icons on a live website.

Notes

A 16×16 icon has only 256 pixels, so fine detail and small text become unreadable; use a simple, high-contrast mark. Browsers cache favicons, so a hard refresh may be needed after replacing them.

FAQ

Which favicon sizes does a website need?: A common set is a favicon.ico containing 16, 32 and 48 px images, a 180×180 apple-touch-icon, and 192×192 plus 512×512 PWA icons referenced from the web manifest. This page generates all of these files together with the matching HTML tags in one step, and when the source is an SVG it also includes favicon.svg for browsers that support vector favicons.
Which sizes are inside the generated favicon.ico?: It contains three sizes, 16×16, 32×32 and 48×48, each embedded as a 32-bit PNG with an alpha channel. The file uses a 6-byte header plus a 16-byte directory entry for each size, a layout recognized since Windows Vista and by current browsers. The browser or operating system then picks whichever size best fits the place where the icon is shown.
Why does my icon get a black background on the iPhone home screen?: Some iOS versions render transparent areas of an apple-touch-icon as black. To avoid this, the 180×180 icon from this page is always filled with the background color and is never rounded, because iOS applies its own rounded mask. The default background is plain white, #ffffff, and you can change it to match your brand color before downloading all of the files.

Related tools

Favicon generator — Tool illustration · dayeku.com