Favicon Generator
Make favicon.ico, PNGs in every size and icons for iPhone and Android from text, emoji or your logo, all in one go.
1. Enter text or add an image
Type the letters (or emoji) for your icon, or choose an image such as your logo.
Make from
Up to 3 characters. Icons are shown very small, so 1–2 characters work best.
Font
2. Choose shape and color
Pick the background shape and color, and the size of the content. The preview updates right away.
Shape
Background color
The iPhone home screen icon (apple-touch-icon) turns transparent areas black, so it gets the background color you picked above instead.
Text color
Dark mode colors
Only favicon.svg changes. Auto flips the brightness only when a color would be hard to see on a dark screen.
3. Preview and save
Check how it looks in a browser tab and on a home screen, then save everything as one ZIP.
Enter some text to see a preview here
In a browser tab (light and dark)
Added to site.webmanifest as the name shown when the site is added to a home screen.
Adds 64, 128 and 256 px, used when the icon is shown large, for example in Windows desktop shortcuts. The file gets bigger.
HTML for your site
Put the files from the ZIP in your site’s root folder (/), then paste this HTML inside <head>.
Show HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<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">Files in the ZIP
- favicon.ico (16 / 32 / 48)
- favicon.svg
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest
- favicon-html.txt
Everything happens on this device. Your images are never uploaded.
Found it useful? We'd love a share
Something not working, or an idea to make it better?
How to use
1. Enter text
With “Text” selected, tap the “Icon text” box and type 1–3 characters. Emoji work too. You can change the lettering with “Font” just below.
With “Text” selected in the left panel, click the “Icon text” box and type 1–3 characters. Emoji work too. The preview in the right panel updates right away. You can change the lettering with “Font” just below.
2. Choose shape and color
Tap “Choose shape and color in full screen” to open the full-screen editor. In the bar at the bottom, tap “Circle” on the “Shape” tab, then a background color swatch on the “Color” tab. The preview in the middle shows right away how it looks on light and dark screens.
In the “Choose shape and color” section, click “Circle” under “Shape”, then click a color swatch under “Background color”. The preview in the right panel shows right away how it looks on light and dark screens and in a browser tab. Click “Edit full screen” above the preview to choose while looking at a large preview.
3. Making it from an image
To use an image such as a logo, tap “Image” at the top, then pick your image with “Choose files”. The full-screen editor opens and the whole image fits inside the icon. To fill it edge to edge, tap “Crop to fill” under “Fit” in the bar at the bottom.
To use an image such as a logo, click “Image” at the top of the left panel and drag and drop your image (or use “Choose files”). The whole image fits inside the icon. To fill it edge to edge, click “Crop to fill” under “Fit” in the “Choose shape and color” section.
4. Save everything at once
In the “Preview and save” section, tap “Download all as ZIP” to save the full set of files in a single ZIP. To copy the HTML for your site, tap “Copy HTML” just below.
Click “Download all as ZIP” in the right panel to save favicon.ico, favicon.svg, PNGs in each size and site.webmanifest in a single ZIP. To copy the HTML for your site, click “Copy HTML” just below.
Great for
A quick icon for your new site
Make the icon that shows in the tab of your blog, personal site or web app from a single letter or emoji in seconds. No design software needed.
People building their own sites
Every size you need, at once
Create favicon.ico, 16/32 px PNGs and icons for iPhone and Android in one go, bundled in a ZIP. No more exporting each size by hand.
Web designers and developers
From your shop or company logo
Just choose your logo image and it’s resized to fit tabs and home screens. Transparent backgrounds are kept as they are.
Shops and small businesses
For HTML practice pages
The ready-to-paste HTML shows which file goes where, so it works well for pages made in class or for practice.
Coding learners and teachers
Good to know before you start
- Fine text or photos get squashed at 16 px and become unreadable. A bold mark or 1–2 characters works best.
- It doesn’t make Windows tile images. Today’s browsers and phones display the files this tool makes just fine.
- To trim the empty space around a logo first, try “Crop images”.
Which favicon files and sizes you need
A favicon is the site icon shown in browser tabs, bookmarks, search results and on phone home screens. Each place uses a different size, so you usually prepare several files from one picture. This tool makes everything today’s browsers and phones need, along with the HTML to paste into your site.
favicon.ico is a format that holds three sizes (16, 32 and 48 px) in one file, and it also shows up in older browsers and Windows shortcuts. The iPhone home screen icon (apple-touch-icon) can’t be transparent, and the iPhone rounds the corners itself, so this tool makes it as a square with a filled background. favicon.svg can change its colors to match dark mode, and Chrome, Firefox and Edge use it in tabs.
FAQ
Common questions about making and setting up favicons.
Are my images uploaded anywhere?
No. Everything from loading the image to drawing the icons and building the ZIP happens inside the browser on this device. The images you choose and the text you enter are never sent anywhere.
What kind of image works best?
Square images with clear shapes. At 16 px an icon is tiny, so fine text and photos get squashed. Use just the mark from your logo, or make a 1–2 character icon with “Text”. For wide images, choose “Fit whole image” or “Crop to fill” under “Fit”.
Can I make a favicon from an emoji?
Yes. Enter an emoji in “Icon text” and it becomes an emoji icon. The emoji design comes from the device you’re using (iPhone, Android, Windows and so on).
Where do I put the files?
Unzip the ZIP and put all the files in your site’s root folder (where https://example.com/favicon.ico would open). Then copy the “HTML for your site” and paste it inside the <head> of each page.
Is favicon.ico alone enough?
For browser tabs, favicon.ico on its own is enough. If you also want a sharp icon when the site is added to a phone’s home screen, upload all the files from the ZIP and paste the HTML.
Can the background be transparent?
Yes. Turn on “Transparent background” and the background and the area outside the shape become transparent. The iPhone home screen icon (apple-touch-icon.png) is the exception: transparent areas show up black there, so it’s filled with the color chosen in “Background color”.
Does it work with WordPress?
Yes. In WordPress, go to Appearance → Customize → Site Identity, and under Site Icon choose android-chrome-512x512.png from the ZIP (WordPress needs an image of at least 512 px).
I changed my favicon, but the old one still shows
Browsers can keep favicons cached for a long time. If reloading the page doesn’t help, clear your browser cache or check again after a while.
Can it make SVG favicons?
Yes. The ZIP includes favicon.svg. In dark mode it switches to the colors set in “Dark mode colors” (Auto flips the brightness only when a color would be hard to see). Text is embedded as an image in the chosen font, and the SVG paints only its color.
Is it free?
Yes, it’s free. No sign-up and no ads. There’s no limit on how many icons you make.
More tools
- QR Code Generator
Make QR codes from links, text or Wi-Fi details, with your choice of shapes, colors, a center icon or a photo.
- Convert images to WebP
Turn PNG or JPEG into WebP, a lighter format that still looks great.
- Convert images to PNG
Turn JPEG or WebP into PNG, a format that never loses quality.
- Convert images to JPG
Turn PNG or WebP into JPG (JPEG), a format that opens anywhere.
- Convert HEIC to WebP
Turn iPhone HEIC photos into WebP, a lighter format that's easy to use.
- Convert HEIC to PNG
Turn iPhone HEIC photos into PNG, which opens anywhere, with no loss of quality.