Free Favicon Generator
The tiny image that makes a site feel real
Look at the tabs in your browser right now. Each one has a small icon beside the title. That is the favicon, and a site without one looks unfinished: you get a blank page icon, or the browser’s default globe. The same icon shows up in bookmarks, in some search results on mobile, in history lists and, in larger form, on phone home screens. This generator takes one logo or image and produces the whole set, with the code to install it.
From logo to live site, step by step
- Start with a good source. A square image of at least 512 by 512 pixels works best. A simple mark beats a detailed one.
- Drop it in and choose how it fits: Keep the whole image adds space around a wide logo, and Crop to fill the square zooms in.
- Set the background to transparent or a solid colour, and add padding if the icon touches the edges.
- Look at the previews at each size, and judge the smallest one honestly.
- Download the ZIP, or just the favicon.ico.
- Install it using the head code provided, or the WordPress method below.
What each file is for
| File | Size | Where it is used |
|---|---|---|
| favicon.ico | Several sizes in one file | Browsers, including older ones, requested from the site root |
| favicon-16×16.png and 32×32 | 16 and 32 px | Browser tabs, taskbars, bookmarks |
| favicon-48×48.png | 48 px | Some browsers and shortcuts |
| apple-touch-icon.png | 180 px | iPhone and iPad home screens |
| android-chrome-192×192.png and 512×512 | 192 and 512 px | Android home screens and web app manifests |
Installing it on WordPress
The simplest way is Appearance, then Customize, then Site Identity, where you upload one square image of at least 512 by 512 pixels as the Site Icon. WordPress creates the sizes it needs and adds the tags for you. If your theme or a page builder has its own favicon field, use that instead, and avoid setting the icon in two places, because browsers may pick the wrong one. For sites without WordPress, upload the files to the root folder and paste the link tags into the head of your pages.
Designing for sixteen pixels
- Use one bold shape, a letter or a symbol, instead of a whole logo with text.
- Pick high contrast. The icon must stand out on both light and dark browser themes.
- Avoid thin lines and fine details, which vanish at 16 pixels.
- Test it by shrinking your design on screen to thumbnail size. If you cannot tell what it is, simplify it.
- If your logo is an SVG, first export it as a big PNG with the SVG to PNG converter.
Light mode, dark mode
Browsers show tabs on light and dark backgrounds, depending on the theme, and an icon that looks great on white can vanish on black. A dark icon with no background disappears in a dark theme. A white icon disappears in a light one. The safest options are a solid coloured background behind the symbol, or a mark in a mid-tone colour that works on both. Preview your icon on both a light and a dark surface before you decide.
Common mistakes
- Using the entire logo with text, which becomes an unreadable smudge at 16 pixels.
- Uploading a rectangular image and getting a squashed or cut-off icon, so use a square source.
- Setting the icon in the theme and a plugin at once.
- Forgetting the cache and concluding the change did not work.
Why does my old favicon still show?
Browsers keep favicons in a cache for a long time, and they do not always refresh when you change the file. If you do not see the new icon, open the address yoursite.com/favicon.ico directly to confirm the file is the right one, then try a private window, or clear the site’s cached data. Search engines may also take days or weeks to pick up a new icon, so be patient before you assume something is wrong.
FAQ
Browsers mainly use 16 x 16 and 32 x 32 pixels, and phones use 180 x 180 and larger. This tool makes all the common sizes from one image.
Modern browsers can use PNG favicons, but favicon.ico at the site root is still requested by some browsers and tools, so it is worth including.
Yes. Choose Transparent. The Apple touch icon is shown on a solid colour by iOS, so a coloured background often looks better there.
Browsers cache favicons for a long time. Clear the cache, open a private window or visit /favicon.ico directly.
No. All files are created in your browser.
Yes. Use a square source image, because icons are square. A rectangular logo is better placed inside a square with padding.
Yes. Use Download favicon.ico for that one file, or Download all for the full ZIP with every size.
Yes. Use Download favicon.ico for that one file, or Download all for the full ZIP with every size.