How to use the Favicon Generator
- Drop a square logo (SVG or a large PNG works best), or switch to Text or emoji and type your initials.
- Adjust padding, corner rounding and the background (solid, gradient or transparent), and preview it in light and dark browser tabs.
- Download all icons as a ZIP and copy the HTML tags into your page's <head>.
Favicon Generator features
- favicon.ico with 16, 32 and 48 px inside one file
- PNG icons at 16, 32, 48, 180 (Apple touch icon), 192 and 512 px
- site.webmanifest and ready-to-paste HTML tags
- Make an icon from an image, letters or an emoji, with five font styles
- Padding, corner radius, and solid, gradient or transparent backgrounds
- Live preview in light and dark browser tabs
- ZIP download, single-size downloads, settings remembered
Create a complete favicon set in one go
A favicon is the small icon that appears in browser tabs, bookmarks, search results, history lists and on phone home screens when someone saves your site. This favicon generator turns a logo, an image, a few letters or an emoji into every file a modern website needs: favicon.ico, PNG icons from 16 to 512 pixels, the Apple touch icon, a web app manifest and the HTML tags to link them. Download everything as a single ZIP and copy the code into your page.
It all happens in your browser. Your logo is never uploaded, and your settings are remembered for next time.
Files you get
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32 and 48 px in one file | All browsers, plus tools that request /favicon.ico directly |
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png | 16, 32, 48 px | Browser tabs and bookmarks, including high-resolution screens |
apple-touch-icon.png | 180 × 180 px | iPhone and iPad home screens and Safari |
android-chrome-192x192.png, android-chrome-512x512.png | 192, 512 px | Android home screens, installable web apps and splash screens |
site.webmanifest | – | Tells Android and Chrome about your icons, site name and theme color |
Click any size in the preview to download that PNG on its own, or grab just favicon.ico if that is all you need.
Make a favicon from text or an emoji
No logo yet? Switch the source to Text or emoji and type one to three characters, such as your initials, or paste an emoji like 🚀 or 🍕. Choose a sans serif, serif, rounded, monospace or handwritten font and a weight from regular to extra bold, then pick a background color or a gradient. It is a fast way to give a side project, a portfolio or an internal tool a recognisable icon.
Style options
- Padding adds space around your image so it does not touch the edges, which matters for rounded icons on phones.
- Corner radius rounds the corners, from a sharp square to a full circle.
- Background can be a solid color, a gradient or transparent. The Apple touch icon always gets square corners and a solid background (white if you chose transparent), because iOS rounds the corners itself and shows transparent areas as black.
A live preview shows your icon in a browser tab in light and dark mode, so you can check that it stands out on both.
How to add the favicon to your website
- Download the ZIP and put the files in the root folder of your website (the same folder as your home page), so
/favicon.icoworks. - Copy the HTML tags and paste them inside the
<head>of every page, or in your site's main layout or template:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">On WordPress, you can instead upload the 512 px PNG under Appearance → Customize → Site Identity → Site Icon. Browsers cache favicons aggressively, so if you do not see the new icon straight away, open the site in a private window or clear the cache.
Tips for a favicon that works at 16 pixels
- Start big and simple. Use a square SVG or a PNG of at least 512 × 512 px. If your logo is wide, use just the symbol or the first letter.
- Drop the detail. Thin lines, small text and taglines vanish at 16 × 16. Bold shapes and high contrast survive.
- Test both themes. A dark logo on a transparent background can disappear in a dark browser tab; add a background or padding if needed.
- Favicons in Google results. Google shows your favicon next to your pages in search. It needs to be square, at least 48 × 48 px and linked from your home page, which the tags above take care of.
Need to crop your logo square first? Use the Image Resizer & Cropper. To pull your brand colors from the logo for the background, use the Image Color Extractor.
Favicon Generator: frequently asked questions
Do I still need favicon.ico?
It is still a good idea. Some tools and browsers request /favicon.ico directly, even when your HTML points elsewhere.
What image should I start from?
A square SVG or a PNG of at least 512×512 px with a simple shape. Fine detail disappears at 16×16.
What size should a favicon be?
favicon.ico should contain 16, 32 and 48 px. Add a 180 px Apple touch icon and 192 and 512 px PNGs for Android and web apps. This generator creates all of them.
How do I add a favicon to my website?
Upload the files to your site's root folder and paste the HTML tags into the <head> of your pages. On WordPress, upload the 512 px PNG as the Site Icon instead.
Can I make a favicon from an emoji?
Yes. Choose Text or emoji as the source and paste any emoji. It is drawn with your device's emoji font, so it may look slightly different on other systems.
Why is my new favicon not showing?
Browsers cache favicons for a long time. Open the site in a private window or clear the cache, and check that the files are in the root folder.