/en/tool/favicon-generator/ works The browser cuts the icons; our server opens other sites
Provide an image, SVG, letter, or emoji — the tool will create a complete icon set, build favicon.ico from five frames, favicon.svg with light and dark variants, site.webmanifest, and a maskable icon for the Android mask. It then packs everything into one archive and writes the code for head. It also shows how the icon looks in a tab, bookmarks, Google search results, and on the home screen. The browser does all this: no file is uploaded anywhere. Only the check of another site in the final section makes an external request — and only when you click the button.
A square image of at least 512 px works best: you can make a large image smaller, but not the other way around. No logo? Use a letter or emoji instead—these are separate modes.
The frames are drawn at natural size using the same colors as real browsers and phones. The 16 × 16 tile in the grid above shows the file; here you can see what its surroundings do to it.
Choose an image, letter, or emoji—the frames will be drawn here.
Tab, light theme
Tab, dark theme
Bookmarks bar
Google results page
iOS home screen
Rounding of 22.37% of the side—the exact shape iOS uses to crop apple-touch-icon. You don’t need to set your own rounding: the system will apply its own on top.
Android home screen
This shows a circular mask—the tightest common one. What remains under the other masks is shown below.
Maskable icon and safe zone
The central 66% is outlined with a dashed line—the area no mask will crop. Anything beyond it may disappear on some firmware versions.
The lines are generated from what was actually sliced: disable the dark variant, and there will be no line for it. Files are placed in the site root; if you put them in another folder, update the paths.
The manifest is already in the archive with the icons, so you don’t need to download it separately.
Without the line rel="manifest" in head, the 192 and 512 icons are not linked to anything and simply sit unused in the root.
Analyzes head pages: which icons are declared as links, whether each one responds, what size it actually returns, whether the manifest can be read, and whether theme-color is set. Useful before changing anything: half of all sites still use a single favicon.ico from the 2000s.
Our server follows redirects, reads the head of the final page, visits each declared link, and reads the manifest. The browser measures the actual frame dimensions: it loads the external image directly, so its natural dimensions are accurate.
Nothing checked
Enter a URL and click “Check.”
Declared in head
Root, manifest, theme
What's missing
Only the exact URL you provided is analyzed—usually the homepage; icons may be declared differently on other pages.
A file located in the root directory but not declared with a link won't appear in the list. The exception is — /favicon.ico
and /apple-touch-icon.png, they are requested even without head, so they are always checked.
Choose what to create it from: an image or SVG, a letter, or an emoji. For an image, a square of at least 512 px is best—you can make a small image from a large one, but not the other way around.
If the image was photographed or scanned, crop the excess with a selection, rotate it, and remove the white background—all in the “Crop, rotate, clean background” panel. The artwork will then fill the frame instead of sinking into empty space.
Look at the 16 × 16 frame and the tab preview. If the image is already hard to make out, simplify it: at this size, use a single letter or silhouette, not the entire logo.
Set the background. Transparent works when the icon needs to appear on both light and dark bars; use a color when the artwork itself is light. The background behind apple-touch-icon is set in a separate field because iOS does not support transparency.
Enter the site name in the manifest panel and check the Android preview: under a circular mask, an icon without padding will have its corners cut off. The maskable version fixes this.
Click “Download everything as an archive,” unpack it into the site root, and paste the code from the “Code for the head” panel. Choose the tab for your system.
A day after publishing, check the last section again: it will read your site’s head and tell you what is declared, which declared resources respond, and what sizes are served—not what you intended to put there.
Artwork side = icon size × (1 − 2 × padding)
The .ico file is assembled manually: a header, a table with five entries, and five PNG frames—16, 24, 32, 48, and 64. This type of .ico works in all browsers that support PNG inside ico, and preserves transparency. The archive is assembled the same way using the “store” method because the PNG files are already compressed, and a second pass would save only fractions of a percent.
The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.
The padding takes 10% from each side: 32 × 0.1 = 3.2 px on the left and the same on the right.
That leaves 32 − 3.2 − 3.2 = 25.6 px for the artwork.
This is the formula: 32 × (1 − 2 × 0.1) = 32 × 0.8 = 25.6.
A maskable icon always has 20% padding: 512 × 0.6 = 307 px for the artwork, with 102 px of clearance on each side—exactly as much as the mask can crop.
The artwork will fit in a centered 25.6 × 25.6 px square within the 32 × 32 frame. The source is reduced exactly twentyfold: 512 ÷ 25.6 = 20.
PNG in all sizes (16, 32, 48, 64, 180, 192, 512), a 512 maskable icon, favicon.ico with five frames, favicon.svg, favicon-dark.svg when dark mode is enabled, site.webmanifest, and readme.txt with the code for the head and a reminder of where to put each file. The archive is built directly in the browser using the “store” method: the PNG files are already compressed.
Some browsers still request \/favicon.ico from the site root out of habit, even when nothing about it is declared in the head. A single file in the root satisfies that request and removes an unnecessary 404 from the logs. It contains 16, 24, 32, 48, and 64 frames—Windows uses 24 and 48 for the taskbar and file list.
It is one file that works at any size: the browser renders it at 16 px and on a display with four times the pixel density. The dark version is linked to it through media="(prefers-color-scheme: dark)". If you provided an SVG, it is included in the set as a vector. If you provided a raster image or emoji, the SVG contains an embedded PNG: the file remains a single file, but that does not make it a vector—this is more honest than promising scaling that is not there.
Android does not display the icon as is: it crops it with its own mask—a circle, squircle, or rounded square, depending on the firmware. A regular icon loses its corners in the process. A maskable icon is drawn with 20% padding and a solid background, so the artwork stays intact under any mask. It is added to the manifest as a separate entry with "purpose": "maskable".
180 × 180 is the icon size Safari uses when a site is added to the iOS Home Screen, via rel="apple-touch-icon". Transparency is not supported there: iOS places black behind it. That is why the background is set in a separate field, even when the main icon is transparent.
It will fit in full: the scale is based on the longer side, while the shorter side retains the background. If the background is transparent, the sides will have transparent padding. You can also crop it: drag across the image in the cropping panel to select a square.
Optional chunks that the browser adds on its own are removed from the PNG. Frames up to 64 px are also tried with a palette: if a frame has no more than 256 colors, it is rebuilt as an eight-bit image; with very few colors, it may use four-, two-, or one-bit color. The smaller of the two versions is used. On a simple icon, this cuts the file size in half.
The image is the source of truth. It is read locally, cropped in canvas, and the .ico, .svg, and .zip files are assembled directly in the tab’s memory. Exactly one thing is sent out, and only when you click the button: the address of an external site in the last section. Our server opens it because the browser cannot read markup from another site. The browser measures the actual frame sizes itself: it can load an image from another domain without permission, but not the markup.
The server follows redirects to the final address, reads the head, and extracts all rel="icon", "shortcut icon", "apple-touch-icon", "mask-icon", and "manifest" links, as well as meta name="theme-color". It sends a request for each link and reports the response code and file size. The manifest is read in full, so it can show whether 192 and 512 icons exist and whether there is an entry with purpose "maskable". It also checks \/favicon.ico in the root separately—the browser requests it even without a head entry. Your browser measures the actual frame sizes separately by loading the images directly from the external site.
First, look at the response code in the row. The usual case is that a link points to an address that no longer exists: the icon is still in your browser cache and displays from memory, but a new visitor gets a 404. The second case is that the icon is declared on a page other than the one whose address you provided. The third is that the file is in the root but has no link to it; only \/favicon.ico and \/apple-touch-icon.png are checked in this case because browsers request them without any head entry.
Calculates the contrast of a color pair and shows whether it passes AA and AAA.
Open
Reduces the file size of JPEG, PNG, and WebP—the file is never uploaded.
Open