Favicon Generator — Create Every Icon Size
Render a favicon at 16, 32, 48, 180, 192 and 512 pixels from an image, a letter or an emoji, then download the PNG and SVG and copy the matching HTML link tags. Runs entirely in your browser.
What is a favicon? A favicon is the small square icon a browser shows on a tab, in the bookmark list and in history, and that phones use when a site is saved to the home screen. A modern site ships several: 16 and 32 pixels for tabs, 180 for the Apple touch icon, and 192 and 512 for Android and the web app manifest. This generator draws every one of those sizes from a single source on an HTML canvas.
How to Use the Favicon Generator
- Pick an input method — Image takes a PNG, JPG or SVG file and centres it over the background. Text/Emoji draws up to two characters — a monogram, an initial or a single emoji — which is the quickest way to get a usable icon before a logo exists.
-
Set the background colour — The background is always painted, so a logo with a transparent surround will sit on this colour. Use the swatch or type a hex value such as
#3b82f6into the field beside it; both stay in sync. - Choose the shape — Square fills the whole canvas, Rounded uses a corner radius of 20% of the icon size, and Circle inscribes a full circle. Browsers do not crop tab icons, so the shape is a design choice rather than a requirement.
-
Check the small sizes first — Each preview is a canvas at its true pixel size, drawn with
image-rendering: pixelatedso you see the real result rather than a smooth downscale. If the 16×16 tile is unreadable, simplify the mark before going any further. - Download the images — Download PNG saves the 512×512 master, Download SVG saves a vector version of the shape and text, and Download ZIP bundles every rendered size together in one file.
-
Copy the link tags — Copy HTML puts the five
<link>elements on your clipboard. Paste them into<head>and upload the icons to your site root so the paths in the snippet resolve.
How the Generator Draws Each Icon
Everything is drawn with the browser's 2D canvas API. For each of the six sizes the tool creates a canvas of exactly
that many pixels, paints the background, then composites your artwork on top — so the 16×16 preview is a genuine
sixteen-pixel render, not a scaled-down picture of a large one. The preview tiles use
image-rendering: pixelated, which means the blocky look on screen is the icon's real pixel grid rather
than a rendering artefact.
The background comes first: fillRect for a square, roundRect with a radius of one fifth of the
icon size for the rounded shape, and an arc of half the icon size for a circle. In image mode your upload
is then drawn centred at 75% of the canvas width, which leaves a consistent margin so the artwork does not touch a
rounded corner or spill outside the circle. In text mode the characters are drawn bold at 55% of the icon size, centred
on both axes, in the system UI font of whichever device is rendering the page.
Because the background is always painted, there is no transparent output. If you need a transparent favicon, export your artwork as a PNG with alpha elsewhere and reference it directly — this tool is built around a solid tile, which is what makes small sizes legible on both light and dark tab strips.
What Each Size Is For
The six sizes are not arbitrary; each one is the size a specific surface asks for. You rarely need more than these, and shipping fewer mostly means some platform picks the nearest icon and scales it badly.
| Size | Where it is used |
|---|---|
| 16×16 | The browser tab and the address-bar entry on standard-density displays |
| 32×32 | Tabs on high-density screens, Windows taskbar pins and desktop shortcuts |
| 48×48 | Windows site shortcuts and some bookmark managers |
| 180×180 | apple-touch-icon — the tile iOS uses when a page is added to the home screen |
| 192×192 | The Android home-screen icon, referenced from the web app manifest |
| 512×512 | The manifest's large icon, used for install prompts and splash screens, and the source for a maskable icon |
A maskable icon deserves one caution. Android may crop a 512 icon to a circle, a squircle or a rounded square depending
on the launcher, and it only keeps the middle ~80% of the image. If you mark an icon "purpose": "maskable"
in your manifest, keep the important part of the design well inside that safe zone — the 75% inset this tool applies to
uploaded artwork is a reasonable starting point.
The Link Tags, Line by Line
The snippet in the panel is the standard set of declarations, with root-relative paths. It is fixed rather than generated from your settings, so it assumes you upload the files under the names it references.
rel="icon" type="image/x-icon"points at/favicon.ico. Browsers also request that path automatically even with no tag at all, which is why it is worth having something there.- The two
sizes="16x16"andsizes="32x32"PNG entries let the browser choose the right file instead of resampling one. rel="apple-touch-icon" sizes="180x180"is read by iOS Safari when a page is added to the home screen.rel="manifest"points at asite.webmanifestfile, which is where the 192 and 512 icons are declared along with the app name, theme colour and display mode.
Two files in that list are not produced here. This tool exports PNG and SVG, so you will need to convert the 32×32 PNG
to favicon.ico if you want one, and write the manifest yourself. Neither is strictly required: every
current browser accepts a PNG through rel="icon", and the manifest only matters if you want the site to be
installable.
An SVG favicon is worth adding when you have one, because it stays sharp at any density and can respond to
prefers-color-scheme inside the file. Note what the SVG export here contains: the background shape plus the
text or emoji if you are in text mode. An uploaded raster image is not embedded, so in image mode the downloaded SVG is
the coloured tile on its own.
Designing Something That Survives 16 Pixels
A 16×16 favicon is 256 pixels in total — roughly the information budget of a single character of text. Almost every favicon that reads as a smudge in the tab strip is a logo that was never simplified for that budget. A few habits help.
Drop the wordmark. Company names disappear below about 48 pixels, so use one glyph, one initial or the most recognisable fragment of the logo. Push contrast harder than feels right at full size: a mid-grey mark on a white tile is invisible at tab size, while the same mark in white on a saturated tile stays readable. Avoid hairlines and one-pixel gaps, since anti-aliasing turns them to grey mush. And check the icon against both a light and a dark browser theme — this is exactly why a solid background tile usually beats a transparent icon.
The practical test is on this page: set your colours, then look only at the 16×16 and 32×32 tiles. If you can still tell what it is with the page at arm's length, it will work in a row of twenty open tabs.
Frequently Asked Questions
For a plain website, 32×32 plus 180×180 covers almost everything: browsers scale 32 down for the tab and iOS uses the 180 for home-screen bookmarks. Add 16×16 if you want the tab icon to be pixel-exact rather than resampled, and 192×192 and 512×512 only if you ship a web app manifest. The 48×48 file is useful for Windows shortcuts and harmless otherwise.
PNG is the safe default and is accepted by every current browser through rel="icon". SVG is a good addition because it stays sharp at any pixel density and can adapt to dark mode inside the file, but not every browser reads it, so pair it with a PNG. .ico is a legacy container format that this tool does not produce; browsers still probe /favicon.ico automatically, so it is worth having one if you can convert.
No. The file is read into an Image object and drawn on a canvas entirely inside your tab, and no request carries it anywhere. Note that the text, background colour and text colour are written into the page URL so a design can be bookmarked or reloaded — that rewrite is local, but the values are visible in the address bar. An uploaded image is never included in the URL.
The SVG export is built from the shape, the colours and the text, not from the canvas pixels, so a raster upload has nothing to translate into vector paths. In image mode the SVG you get is the coloured tile on its own. Use Download PNG for uploaded artwork, and reserve the SVG export for letter or emoji icons — or optimise your own vector file with the SVG Optimizer.
Not here. The tool paints the chosen background on every canvas before drawing anything on top, and the colour input has no alpha channel. That is a deliberate trade-off: a solid tile stays legible against both a white and a dark tab strip, whereas a transparent dark logo vanishes in dark mode. If you need transparency, prepare the PNG in an image editor instead.
That download is written as a single bundled container rather than a standard ZIP archive, so unzip utilities reject it. Take the files individually instead: Download PNG gives the 512×512 master and Download SVG the vector version, and you can produce the smaller PNGs from the master with the Image Resizer.
No. An emoji is drawn with whatever font the rendering device supplies, so the same character looks different on Windows, macOS, Android and Linux — and the PNG you download freezes your machine's version, which is usually what you want. The text field accepts up to two characters, which is enough for one emoji or a two-letter monogram.
The rounded option calls the canvas roundRect method, which older browser versions do not implement — where it is missing the draw call fails and the previews stop updating. Square and circle use fillRect and arc, which have been supported for far longer, so switch back to one of those or update the browser. The SVG export uses a plain rx attribute and is unaffected.
Use Cases
Turning a Logo into a Tab Icon
Drop in the square version of a brand mark, check it at 16 and 32 pixels, and adjust the background colour until the shape still reads when the tab is one of twenty open in a window.
A Placeholder Before the Logo Exists
Ship a side project this weekend with a single-letter monogram on a brand colour instead of the framework's default icon, and swap in real artwork once a designer has been near it.
Fixing a Blurry iOS Home-Screen Tile
When a site added to an iPhone home screen shows a screenshot or a stretched icon, it usually has no 180×180 apple-touch-icon. Generate one, upload it, and reference it from the head.
Manifest Icons for an Installable App
Produce the 192 and 512 pixel PNGs a web app manifest needs so the install prompt and the Android home screen show your icon rather than a cropped screenshot of the page.
Telling Internal Environments Apart
Give local, staging and production copies of the same admin tool different coloured letter icons so you can see at a glance which tab is pointed at the live database before you click delete.
Testing a Brand Colour at Icon Scale
Try a palette candidate as the tile background with the same glyph on top, and see which pairing keeps its contrast once the artwork is only sixteen pixels wide.