Favicon pack in the browser: one image in, nine files out

Every site needs a favicon, and most projects end up with a folder of near-duplicates that somebody has to resize by hand: a 16×16, a 32×32, a 48×48, an Apple touch icon, two Android sizes, an .ico, a web manifest, and an HTML snippet to paste into the page head. Nine files, one source image.

Full disclosure first: I work on OnePassApps. The Icon Studio of app.onepassapps.com does that conversion in the browser tab, so the source image is read and written on your own machine and never uploaded.

What the panel says before you start

The Favicon pack tab opens with two honest limits and one instruction:

• 01 Source — "No SVG or PNG yet. Drop one on the stage or browse for it. SVG up to 5 MiB, PNG up to 24 MiB."
• 02 Pack details — "Name the app for the manifest once an image is open. The pack covers 16 to 512 pixels."

So one image, SVG or PNG, and the pack covers the 16-to-512-pixel range. The action button is called Create favicon pack.

What came out

I ran it on a real 512×512 PNG (2.2 KiB) and read the result panel back:

Ready
Before
2.2 KiB PNG
After
13.0 KiB ZIP
Contents
9 files
File name
probe-favicon-favicon-pack.zip
Created in 0.7 s

The listing below the result is the actual archive contents:

16 × 16
favicon-16x16.png
32 × 32
favicon-32x32.png
48 × 48
favicon-48x48.png
180 × 180
apple-touch-icon.png
192 × 192
android-chrome-192x192.png
512 × 512
android-chrome-512x512.png

And the part that saves the most fiddling is also in the ZIP:

ALSO IN THE ZIP
favicon.ico
624 B
site.webmanifest
414 B
html-snippet.txt
381 B

That is the whole nine: six PNGs, an ICO, a web manifest, and a text file with the markup for your <head>.

The HTML snippet is generated for you

The panel prints the exact tags to paste, and offers to copy them:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

No guessing which rel goes with which size, and no forgetting the Apple touch icon.

There is also a Dark / Light preview above the list, so you can see how the mark reads on a dark toolbar before you commit to it.

Where it does not fit

A browser tab holds the file in memory, so this is a good fit for icon-sized art and a bad one for anything huge. The pack is handed to you as a ZIP, which means you still unzip it and copy the files into your project — it replaces the resizing and the markup, not the deployment step. And if you need a bespoke set of sizes that is not in the 16-to-512 range, you would still reach for an image editor.

The rest of the Icon Studio follows the same rule as the other studios: SVG to PNG, PNG to ICO, a resize set, SVG optimisation, SVG recolouring and PNG trimming all run in the tab. The guides explain how the browser-local tools work and what the boundary is.

Standard is free right now: $0 a month, 100,000 credits every 30 days, no card required, and browser-local work like this uses no credits at all.

Full disclosure again: I work on OnePassApps. If you want the favicon pack without the rest of the suite, the tool is on the Icon Studio page.