CapyResize · tool no. 8
.
Drop a logo, get the whole icon pack and the HTML to paste. Nothing uploaded.
Drop one logo and get every favicon a site needs — favicon.ico, the Apple touch icon, Android and maskable icons and a web manifest — plus the HTML, in one ZIP.
Updated · by Unfolding Dimensions
01 · The drop
The guide
How to make a favicon for your website
- Step 1
Drop one square-ish logo — PNG, JPEG, WebP or SVG.
- Step 2
Name the site and pick a background colour for the icons that need one, then check the 16 and 32 px preview strip.
- Step 3
Download the ZIP, put the files at your site's root, and paste the four lines of HTML into your page's head.
A modern site needs more than one favicon.ico. Browsers, iPhones, Android home screens and installable web apps each look for a different file at a different size.
The pack holds favicon.ico with 16, 32 and 48 px frames, a 180 px apple-touch-icon.png, the 192 and 512 px icons Chrome needs before it offers to install a site, a separate maskable 512 px icon with the art inside the safe zone, manifest.webmanifest, and the exact HTML that links them. Drop an SVG and it's included as favicon.svg too.
The 16 and 32 px strip shows how the logo looks at browser-tab size, where fine detail disappears, before you ship it.
Questions
What favicon sizes do I need?
favicon.ico (16, 32 and 48 px), a 180 px Apple touch icon, and 192 and 512 px PNGs in a web manifest. A maskable 512 px icon lets Android crop it to any shape.
What is a maskable icon?
An icon whose art sits inside a central safe zone, so Android can crop it into a circle, squircle or rounded square without cutting the logo off.
Where do the files go?
At the root of your site, next to your homepage, so /favicon.ico resolves. The HTML snippet assumes that location.
Is my logo uploaded?
No. Every icon is drawn and zipped in your browser. Nothing is uploaded or stored.