Skip to content
16 pixels is the whole test

The smallest image on your site

Before anyone reads a word, they see the tab. Upload a logo or type a letter, get the nine PNG sizes every browser and phone asks for, a real favicon.ico and the HTML to paste. Nothing is uploaded.

Short answerLast edited October 31, 2026

The Favicon and App Icon Generator builds a full icon set from a letter, an emoji or your own upload, and lets you choose the background, shape and padding. You download every size a browser, a phone and a search result asks for, and the icons are drawn in your browser.

A logo and a favicon are two different designs

A favicon is not a shrunken logo. At 16 by 16 pixels there are 256 squares to draw with, and a wordmark that reads perfectly at 200 pixels becomes a grey smear at 16. Thin strokes disappear, two colours that sit next to each other vibrate, and a detailed mark turns into noise that the eye refuses to resolve.

The icons that survive are almost embarrassingly simple: one letter, one shape, one strong silhouette. Think of the sites whose tab you recognise instantly - they are nearly all a single glyph on a solid background. That is not a lack of branding, it is the format telling you what it can hold.

This tool gives you both routes. If you have a mark that works small, upload it and it is scaled with high quality smoothing to every size a site needs. If you do not, type the first letter - the generated icon is drawn fresh at each size instead of being downscaled, which is why the 16 pixel version stays sharp.

16 × 16the tab strip
9 sizes16 to 512 pixels
1 .ico16, 32 and 48 inside
0 uploadsdrawn in the tab

What survives being shrunk to a stamp

Five rules cover almost every case, and they are all about removing things. One idea per icon: a letter, a monogram, a simple geometric mark. High contrast between the shape and its background, because at 16 pixels the background is most of the image. No thin lines under two pixels at full size - they vanish first. No small text at all: four letters at 16 pixels cannot be read by anyone, including the person who made them. And a shape that reads as a silhouette, so it works on a light tab strip and a dark one.

Square canvas matters too. A wide logo dropped into a square either gets cropped at the ends or shrinks until the middle is all that is left. If the brand mark is wide, upload a square version of it, or let the generator add padding and a background colour so the whole mark lands inside the tab without being cut.

Transparency is a decision, not a default. A transparent PNG adapts to light and dark browser themes, which is an advantage for a single-colour glyph and a problem for a logo that relies on dark details - those disappear on a dark tab strip. When in doubt, give the icon a background colour and let it be the same everywhere.

The five-second check
  • Squint at the 16 pixel preview: is one shape obvious?
  • Does it still work on a white tab strip and a dark one?
  • Is the mark centred, not cropped at the edges?
  • Would you recognise it among fifteen other tabs?
  • Is it square? A wide logo always loses its ends
  • Is the file below a few kilobytes?

From a logo to a set of files

1

Upload, or type a letter

A square PNG or SVG gives the crispest result; a letter is drawn fresh at every size and never goes soft.

2

Set the framing

Fill the square or keep the whole mark with padding, choose a background colour - or leave it transparent.

3

Take the files

Nine PNGs, a real favicon.ico and a ZIP that already contains the HTML snippet, ready to drop into your site.

Which file goes where

Nine files, six places. Everything the generator produces has a purpose; nothing is filler
FileSizeWhere it is used
favicon.ico16, 32, 48 insidethe tab, bookmarks, and the blind request every browser makes for /favicon.ico
favicon-16x16.png16 × 16the tab strip on standard screens
favicon-32x32.png32 × 32the tab strip on retina screens and taskbar pins
favicon-48x48.png48 × 48Windows shortcuts and some Android launchers
favicon-64x64.png64 × 64desktop launchers and site shortcuts
favicon-128x128.png128 × 128Chrome Web Store listings and previews
apple-touch-icon.png180 × 180the home screen icon on iOS and iPadOS
android-chrome-192x192.png192 × 192the web app manifest, Android home screen
android-chrome-512x512.png512 × 512splash screen, install prompt, app stores

The .ico file is the only one that is not optional. Browsers request /favicon.ico from the root of a domain whether or not the page declares it, and so do feed readers, some crawlers and a few link previewers. Without it, those requests become 404s in the access log and a default globe appears in a tab. The format is old, but it is the one file that has to exist.

The manifest icons are what a phone uses when someone adds the site to the home screen. A 512 pixel icon is also what many app stores and install prompts ask for, and the 192 is used on the launcher itself. Skip them and the site still works, but installing it looks unfinished.

Questions before you replace the globe

Why does my icon look blurry in the tab?
Either only one large file was uploaded and the browser shrank it badly, or the icon is cached. Browsers keep a favicon for hours and sometimes days; after replacing the files, open the site in a new tab, hard-reload, or check in a private window. On a retina screen the 32 pixel file is the one that matters.
Do I still need the .ico file in 2026?
Yes, as a fallback. Browsers prefer the PNG sizes declared in the page, but they still ask for /favicon.ico when no declaration is found, and other software - feed readers, link checkers, older Windows shortcuts - only understands that format. It is a few kilobytes and it prevents 404s.
Why is the 16 pixel version so rough?
Because 16 pixels is genuinely small: sixteen dots across, and most of them are background. The fix is not a higher resolution file - it is a simpler drawing. A letter, a monogram or a single shape reads at that size; a detailed logo never will, no matter how good the source image is.
Should I use a transparent background?
For a single-colour glyph, yes: it looks correct on both light and dark tab strips. For anything with thin dark details, no - they vanish on a dark theme. A solid background guarantees the same icon everywhere, which is usually the safer choice.
Where do I put the files?
In the site root, next to index.html, and the snippet in the tool points there: /favicon.ico, /favicon-32x32.png and so on. Keeping them at the root is also what makes the blind /favicon.ico request work. If the site lives in a subfolder, adjust the paths in the snippet.
Does a favicon help SEO?
Not directly, but it appears in Google's mobile results next to the site name, in browser tabs, in bookmarks and in link previews - all places where a default globe looks like an unfinished site. It is a trust signal, not a ranking factor.
Can I use an emoji?
Yes, and it renders in colour because the browser draws it with the system emoji font. It looks the same on every device of the same platform, but not across platforms: the same emoji is drawn differently on Apple, Google and Windows. Fine for a personal project, risky for a brand.

Nine files in one download

Upload the logo or type a letter, check the 16 pixel preview, take the ZIP.

Make my favicon

Quick facts

  1. Google asks for an icon that is square, whose size is a multiple of 48 pixels, and reachable by its crawler.
  2. A browser tab shows the icon at 16 × 16, so a detailed logo turns into a smudge; a single letter or mark survives.
  3. The icon must be reachable by Googlebot and declared with rel="icon", otherwise the search result shows a generic globe.Google Search Central
  4. PNG compresses with DEFLATE, so decoding always returns exactly the pixels that were saved.W3C
  5. PNG carries a full alpha channel, which is why it is the format for logos, screenshots and cut-out images.W3C

Questions people ask

What size should a favicon be?
Browsers use 16 × 16 and 32 × 32 pixels for tabs and bookmarks, and phones use larger icons such as 180 × 180 for the home screen. Google asks for a square icon whose size is a multiple of 48 pixels, such as 48, 96 or 192.
How do I make a favicon from my logo?
Upload the logo as a square image with a plain background, or use a single letter in place of it. Check it at 16 × 16 pixels, because complex logos become unreadable at that size.
Why does my favicon not appear in Google search?
Google needs the icon to be reachable by its crawler, square and a multiple of 48 pixels, and it can take days to update after a change. Check that the icon file is in the page’s head and that robots.txt does not block it.

What this page is about

  • Favicon

    The small icon a browser and a search result show for a site, declared with a link element and fetched from a crawlable URL.

  • PNG

    A lossless image format defined by the W3C with an 8-bit alpha channel and gamma information, designed for the web in 1996.

  • Canvas

    The HTML element that gives a page a pixel buffer to draw on and export as PNG, JPEG or WebP.

Official sources cited on this page

  1. Define a favicon to show in search resultsGoogle Search Central
  2. PNG (Portable Network Graphics) Specification, Third EditionW3C
  3. HTML Living Standard (canvas, file input, media elements)WHATWG

Continue with the same file

Each of these opens what the tool above produces. Use “Use in another tool” under the result to carry the file over — it moves from tab to tab inside your browser, never to a server.

Image CompressorShrink photos to a target size for a form, an email or a shop page, witho…ImageNo uploadFreeAI Background RemoverRemove backgrounds from images instantly with AI.ImageAIFreeImage to Video MakerImage → VideoImageNo uploadFreeAI Image UpscalerUpscale images up to 4x while enhancing details with AI.ImageAIFree

Switched-off tools are not listed here: only what works right now.

How would you rate Favicon & App Icon Generator?Be the first to rate it