How to use the Favicon Generator tool
- Choose a sourceDrop your logo (PNG, SVG, JPG or WebP), or switch to “From text or emoji” and type one to three characters.
- Style the iconPick a transparent or solid background, round the corners and add padding. Previews update instantly.
- Download the packageClick “Download favicon package” to get every icon size, a web manifest and a README in one ZIP.
- Add it to your siteUpload the files to your website’s root folder and paste the HTML code into the <head> of your pages.
What’s in the package
- favicon.icoA multi-size ICO file (16, 32 and 48 px) for browser tabs, bookmarks and older browsers.
- PNG favicons16×16 and 32×32 PNG icons for modern browsers, plus your original SVG when you upload one.
- Apple touch iconA 180×180 icon with a solid background for iPhone and iPad home screens.
- Android & PWA icons192×192 and 512×512 icons with a site.webmanifest file for Android and installable web apps.
- HTML snippetThe exact link tags to paste into your page, with a copy button.
What is a favicon?
A favicon is the small icon that represents your website in browser tabs, bookmarks, history, search results and on phone home screens. It helps visitors find your tab among many others and makes your site look finished and trustworthy. Google also shows favicons next to results in mobile search.
Which sizes do you need?
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32, 48 px | All browsers, Windows shortcuts, the default /favicon.ico request |
| favicon-32x32.png | 32 px | Browser tabs on high-resolution screens |
| favicon-16x16.png | 16 px | Browser tabs on standard screens |
| apple-touch-icon.png | 180 px | iPhone and iPad “Add to Home Screen” |
| android-chrome-192/512.png | 192 and 512 px | Android home screen, installable web apps (PWA) |
Design tips for a good favicon
- Keep it simple. At 16×16 pixels, detailed logos turn into a blur. Use your logo mark, a single letter or a simple shape rather than the full logo with text.
- Use strong contrast. Browser tabs can be light or dark. A solid background behind your icon keeps it visible in both.
- Start big. Upload a square image of at least 512×512 pixels, or an SVG, so the large icons stay sharp.
- Check the small previews. If the 16-pixel version is unreadable, add less padding or simplify the image.
How to install your favicon
- Unzip the package and upload all files to the root folder of your website, the same folder as your home page.
- Paste the HTML code into the
<head>section of every page, or your site template. - Open the site in a new private window to check it. Browsers cache favicons aggressively, so it can take a while to update in your normal window.
Using WordPress? Go to Appearance → Customize → Site Identity and upload the 512×512 PNG as your Site Icon. WordPress then generates the sizes itself.
Need to resize or crop your logo first? Try Crop Image or Image Resizer. For an SVG logo, the SVG to PNG converter creates high-resolution PNGs.
Frequently asked questions
How do I make a favicon for my website?+
Upload your logo or type a letter, adjust the background and corners, then download the package. Upload the files to your site’s root folder and paste the HTML into the head of your pages.
What size should a favicon be?+
Provide several: a favicon.ico with 16, 32 and 48 px, PNGs at 16 and 32 px, a 180 px Apple touch icon and 192 and 512 px icons for Android. This generator creates all of them.
Can I create a favicon from an emoji?+
Yes. Choose “From text or emoji” and type an emoji or up to three letters. Pick the colors and corner rounding you like.
Why doesn’t my new favicon show up?+
Browsers cache favicons for a long time. Check the HTML code is in the head, then test in a private window or clear the browser cache.
Is my logo uploaded?+
No. All icons are created in your browser and your image never leaves your device.