How to make a favicon
- Type a letter or emoji, or switch to "An image" and choose your logo.
- Pick a shape and colors. The preview shows every file as it will look.
- Press "Download all as ZIP" and put the files in the root folder of your site.
- Copy the tags into the head of your pages.
The ZIP holds favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, and a favicon-tags.html file with the tags. If you start from a logo, a square PNG or SVG at least 512 px wide gives the sharpest result.
Questions
Is my image uploaded?
No. The icons are drawn and packed into a ZIP file inside your browser. Your logo never leaves your device.
Which favicon files do I need?
Most sites need favicon.ico (16, 32, and 48 px in one file), a 180 px apple-touch-icon.png for iPhones and iPads, and the 192 and 512 px PNGs listed in site.webmanifest for Android and installed web apps. The 16 and 32 px PNGs help modern browsers pick a sharp tab icon. This tool makes all of them.
Where do I put the files?
Upload them to the root folder of your website, so /favicon.ico and /apple-touch-icon.png work. Then paste the copied tags inside the <head> of every page, or of your shared layout.
What makes a good favicon?
Keep it simple. A tab icon is only 16 px wide, so thin lines and small text disappear. One bold letter, a simple symbol, or an emoji on a solid color works best. Use a square image with plenty of contrast.
Why does the Apple icon have a solid background?
iOS fills transparent areas of the home-screen icon with black, so this tool paints your background color (or white) behind it and skips rounded corners; iOS rounds them itself.
Credits
Built on fflate (MIT). OneTooling is not affiliated with that project.