squishmypic.com Runs in your browser
One image → every icon

Generate a favicon from any image

Drop in a logo and get favicon.ico, every PNG size down to the tab strip, and the head markup to wire it up. Nothing leaves your browser.

Favicon generator

Choose an image, or drag one here

JPEG, PNG, WebP, GIF, or BMP — ideally square and at least 512px. Non-square images are center-cropped. Nothing is uploaded.

iOS composites transparent home-screen icons onto black, so the 180px icon is flattened onto this colour. Every other size keeps its transparency.

Choose an image to build the full favicon set.
Source
—
Crop
—
Sharpness
—
Preview
16
32
48
180 · apple
Head markup 
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

What a complete favicon set contains

The list of icons a site needs has finally stabilised. After a decade of ever-growing apple-touch checklists, seven files now cover every current browser, launcher, and crawler:

  • favicon.ico — 16, 32, and 48px packed into one file at the site root. The 16 draws the tab, the 32 covers high-DPI tabs and the Windows taskbar, the 48 covers desktop shortcuts, and the file's mere existence satisfies everything that requests /favicon.ico blind.
  • favicon-16.png, favicon-32.png, favicon-48.png — the same pixels as standalone files, declared with sizes attributes so browsers can pick one without parsing an ICO directory. Google Search reads these when it shows your icon next to results.
  • apple-touch-icon.png — 180px, the one size iOS has asked for since the iPhone 6, flattened onto a solid background because iOS renders no transparency here.
  • icon-192.png and icon-512.png — referenced from the web app manifest, not the head. Android uses the 192 on the home screen and the 512 for the install prompt and splash screen.

The hard part is not the container formats, it is the shrink. Scaling a logo to 16px in one jump skips most of the source pixels and produces the jagged, sparkly icons you see in many tab strips — so this generator shrinks through repeated halvings, the same anti-aliasing chain the image compressor on the homepage uses. Even so, 16px cannot carry a wordmark or fine line-work: check the preview above at actual size, and if it reads as noise, simplify the mark rather than fighting the resolution.

Wiring the files into your site

Upload all seven files to the site root — not a subdirectory, because the blind /favicon.ico request and the default apple-touch probe both go to the root — and paste the head markup from the panel above into every page's <head>. The manifest line points at a site.webmanifest file that declares the two big PNGs: 

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

If your logo exists as an SVG, keep that as the master and export a large PNG to feed this page. You can also declare the SVG itself as an icon — Chrome and Firefox will prefer it and it stays sharp at every size — but keep the raster set underneath it for Safari and for everything that never reads link tags. And once the icons are in place, the images your pages actually serve are the far bigger payload: the compressor on the homepage squeezes those with the same no-upload approach.

Common questions

Which favicon sizes actually matter in 2026?

Seven files cover everything current: a favicon.ico holding 16, 32, and 48px; standalone 16, 32, and 48px PNGs; a 180px apple-touch-icon; and 192 and 512px PNGs referenced from the web app manifest. The sprawling checklists of 57, 72, 114, and 144px apple-touch variants are a relic of iOS 6 — modern iOS scales the single 180px icon to whatever it needs, and Android does the same from the manifest pair.

Why does favicon.ico still matter?

Because /favicon.ico is the one location every client checks without being told. Browsers request it automatically for any page that declares no icon links, and feed readers, link-preview bots, and older crawlers ask for it by path and nothing else. It is also the only common icon format that packs multiple resolutions into a single file, which is why a three-entry ICO at the site root remains the reliable baseline underneath any newer additions.

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

iOS does not render transparency in home-screen icons — the alpha channel of an apple-touch-icon is composited onto black, which makes most transparent logos look broken. That is why this generator flattens the 180px icon onto a background colour of your choice, defaulting to white. Every other size keeps its transparency, because browser tabs and Android launchers render alpha correctly.

Should I keep an SVG version of my icon?

Yes — keep the SVG as the master file even though this page works from raster input. A vector regenerates cleanly at any future size, and you can additionally ship it as a link rel="icon" with type image/svg+xml, which Chrome and Firefox will prefer over the PNGs. Safari's SVG-favicon support is still partial, so the SVG supplements this set rather than replacing it.

Will a PNG-in-ICO favicon work in old browsers?

PNG entries inside an ICO have been valid since Windows Vista in 2007, and every browser released since then reads them. The one reader that cannot is Internet Explorer on Windows XP, which predates PNG-in-ICO entirely and shows a blank tab icon instead. If XP-era IE genuinely matters to your audience you need an ICO with uncompressed BMP entries; for everyone else, PNG entries are much smaller and identical on screen.

What happens if my image is not square?

It is cropped to the largest centred square before any scaling — a 1200×800 image becomes its middle 800×800. The crop that was taken is reported next to the result, so nothing happens silently. If your subject sits off-centre, crop the image to a square in an editor first and drop the result here.

Is my logo uploaded anywhere?

No. The cropping, the scaling, and the ICO assembly all run in your browser — the resizing is canvas work and the ICO container is built byte by byte in JavaScript on your machine. Nothing is sent to a server, and the page keeps working with no network connection at all.