How to use it
- Drop in your logo, ideally a square image or SVG.
- Adjust padding, corner rounding and the background.
- Check the previews at each size. Small sizes should still be readable.
- Download the zip and follow the included snippet.
What is in the pack
The zip holds favicon.ico with 16, 32 and 48 px images, favicon-16x16.png and favicon-32x32.png, apple-touch-icon.png at 180 px, icon-192.png and icon-512.png for app installs, a basic site.webmanifest, and add-to-head.html with the lines to paste into your site.
Upload the files to the root of your site and paste the snippet in the head of your pages.
Making a favicon that reads at 16 pixels
A favicon is tiny. Complex logos turn into mush. Use a simple mark or a single letter, give it contrast against the background, and keep padding low so the shape fills the space. If your logo is wide, trace it first with the SVG tracer or crop it to the icon part before you use it here.
What the settings do
- Padding
- Empty space around the logo. Lower values make the mark bigger at small sizes.
- Corner rounding
- Rounds the icon shape. 50 percent makes a circle.
- Background
- Transparent works for most sites. A solid color helps on dark browser tabs.
What people use it for
- Launching a new site
- Replacing an old blurry favicon
- Making app icons for a web app
- Fixing a missing Apple touch icon
Questions
Which sizes do I really need?
favicon.ico and a 32 px PNG cover browsers, 180 px covers iPhones, and 192 and 512 px cover installed web apps. The pack has all of them.
Can I use an SVG favicon?
Modern browsers accept an SVG favicon. You can add it next to these files, and keep the ICO as a fallback.
Why does my favicon look blurry?
The source was small, or the logo has too much detail. Start from a larger, simpler image.
Is my file uploaded anywhere?
No. Tracing and file creation happen in your browser, using code that is part of this page. Your image is not sent to a server. You can check this in your browser's network tab while you use the tool.