A favicon is the small picture in a browser tab, next to your site's name. Browsers, phones and home screens each want it at a different size, so one picture is not enough. To create a favicon for your website, this favicon maker turns one logo into favicon.ico and the app icons, and gives you the HTML to paste into your page.
You see the icons at their real sizes, on light and dark, before you make them. Everything runs in your browser, so your logo is never uploaded. It is free, with no account and no watermark.
What the favicon maker makes
With everything switched on under Make, which is how the page starts, you get nine files. Save all as ZIP saves them as favicon.zip, with the files at the top level, ready to copy to your site.
| File | Size | What it is for |
|---|---|---|
| favicon.ico | 16, 32 and 48 px inside, by default | Browser tabs, bookmarks and older browsers |
| favicon-16x16.png, favicon-32x32.png, favicon-48x48.png | 16, 32 and 48 px | Browser tabs on current browsers |
| apple-touch-icon.png | 180 px | An iPhone or iPad home screen |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 and 512 px | Android home screens, through the web manifest |
| site.webmanifest | A short text file | Tells phones which icons to use |
| favicon-snippet.html | A few lines | The tags to paste into your page |
Each size inside favicon.ico is stored as a small PNG, so it keeps transparency. Switch any part off under Make if you do not need it: favicon.ico, PNG icons, Apple touch icon or Web manifest. The two Android app icons come with PNG icons or with the web manifest, whichever is on, because the manifest points at them.
How to make a favicon from your logo
- Press Select image and pick your logo. PNG, JPG, WebP, AVIF, GIF and SVG all open.
- Under Make, keep everything on, or pick only what you need.
- If the logo is not square, choose Fit inside or Fill and crop under Fit to a square.
- Set Space around and the Background, and check the previews on the stage.
- Press Make icons. When the screen says Your icons are ready, press Save all as ZIP.
The stage shows your icon at 16, 32, 48 and 180 px, on a light tile and on a dark one, and in a drawn browser tab next to the words Your site. At 100% zoom the icons are shown at their real size, so you can judge whether the logo still reads at 16 pixels.
Favicon size, shape and background
Which favicon size you need depends on where it shows: favicon.ico with 16, 32 and 48 px inside covers browser tabs and bookmarks, and the full set adds 180 px for the Apple touch icon and 192 and 512 px for Android home screens. The settings below decide how your picture sits in the square every icon needs.
Sizes in favicon.ico
favicon.ico can hold several favicon sizes in one file: 16, 24, 32, 48, 64, 128 and 256 pixels. It starts with 16, 32 and 48, which covers browser tabs and bookmarks. Add bigger sizes if the same file will be used somewhere that shows icons large.
Fit to a square and Space around
A wide or tall logo has to fit a square. Fit inside keeps all of it, with empty space at the sides or above and below; Fill and crop fills the square and cuts the edges. Space around adds 0 to 20 % of empty space all round. A little helps, because Android may crop icons to a circle, and the space keeps the logo whole.
Background and the Apple touch icon
Background is Transparent at first, with White, Ink and any colour from the + swatch. The Apple touch icon always gets a solid background, white when you pick Transparent, because iPhones show transparent areas as black. The 180 px preview shows it that way.
Start from a big enough picture
The largest icon in the set is 512 pixels, so start from a logo at least that size if you can. Under 180 pixels, the panel warns that the bigger icons will look soft. Below 16 pixels it cannot make icons at all.
Adding the favicon to your website
- Unzip favicon.zip and copy the files to the top folder of your site, where your home page lives. The tags point at /favicon.ico, /apple-touch-icon.png and so on.
- On the done screen, press Copy the HTML, then paste the tags into the head of your pages. The same tags are in favicon-snippet.html.
- Open site.webmanifest and fill in name and short_name with your site's name. They are left empty for you to complete.
The web manifest also sets a white theme and background colour, which you can change in the same file. If your site builder has its own favicon setting, upload favicon.ico or a PNG icon there instead of pasting the favicon HTML tags.
Want to check the result first? Open one of the PNG icons from the ZIP in your browser, or put the files on a test copy of your site. The tab preview on the stage already shows what visitors will see at 16 pixels, so there should be no surprises.
Browsers keep favicons for a long time, so a new one can take a while to show. A hard refresh or a private window usually shows it straight away.
Just one favicon.ico, and privacy
Only need the ICO file? Switch everything else off under Make, or open PNG to ICO, which starts that way. A logo with a white box around it? Make that white see-through first with Make background transparent. To choose exactly which square of a picture becomes the icon, crop it to a square before you start.
- Nothing is uploaded. The icons are made in your browser, and our server does no picture work.
- It is free, with no account and no watermark. Image tools are not counted in the free daily limit, which applies to document conversions only.
- It works in current Chrome, Edge and Firefox.
Read how we treat files on the privacy page.
Give your site its icon
To create a favicon, open your logo, check the previews at 16, 32, 48 and 180 px, set the space and background, and press Make icons. Save favicon.zip, copy the files to your site and paste the tags from Copy the HTML.
This favicon maker is free and private. Select your logo above to start.
