Favicon generator
Turn a logo into a complete favicon package for your website.
Runs in your browser. Your files never leave your device.
- ICO plus every PNG size
- Ready HTML snippet
- Adjustable padding
How to generate a favicon
- Drop a square logo or image here.
- Adjust the padding and background if needed.
- Download the ZIP and paste the HTML snippet.
What's inside the ZIP
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Older browsers, bookmarks |
| favicon-16x16.png | 16 x 16 | Browser tabs |
| favicon-32x32.png | 32 x 32 | Browser tabs, taskbars |
| apple-touch-icon.png | 180 x 180 | iPhone and iPad home screen |
| android-chrome-192x192.png | 192 x 192 | Android home screen |
| android-chrome-512x512.png | 512 x 512 | Android splash and app icon |
| site.webmanifest | Text file | Tells Android which icon to use |
Where the files go
Upload every file from the ZIP to the root folder of your website, the same folder as index.html, not a subfolder. Then paste the provided HTML snippet inside the head of every page, or into your site's shared header template if it has one.
Padding and background tips
- Add 10 to 15 percent padding for logos that touch the edges of their square, so they do not look cropped at 16 pixel size.
- Turn on a background fill if your logo has transparency and looks odd against a browser's own tab color.
- A simple, high contrast logo reads better at 16x16 than one with fine detail or thin text.
Favicon generator FAQ
What is inside the ZIP?
favicon.ico with 16, 32 and 48 pixel sizes, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, two android-chrome PNGs and a site.webmanifest file.
Where do these files go?
Upload them to the root folder of your website, then paste the HTML snippet into the head of every page.
Should my image already be square?
A square logo gives the cleanest result. Non-square images are fit inside a square with padding, so nothing gets stretched.
What does padding do?
It adds empty space around your logo inside the square, which stops the design from touching the edges at small icon sizes.
Is my image uploaded?
No. Every icon size is generated in your browser, so the image never leaves your device.
Do I need all six files, or just favicon.ico?
Modern browsers mostly use the PNG files and site.webmanifest. favicon.ico is kept for older browsers and some bookmark bars, so upload all of them for the widest support.
What image size should I start with?
At least 512 by 512 pixels. The master icon is generated at that size, so a smaller source image gets stretched up to fit and can look soft.
Does the manifest file need editing?
The generated site.webmanifest uses placeholder text for the site name. Open it in a text editor afterward and update the name and short_name fields to match your site.