Free Favicon Generator
Create a complete favicon package from an image, logo, text, or emoji — including favicon.ico, PNG icons, Apple Touch, PWA icons, and HTML code.
- Free
- No Signup
- 100% Browser-Based
Favicon generator
Choose an image, initials, or an emoji.
Drop a PNG, JPG, WEBP, GIF, or SVG. 512×512 or larger is ideal. Your image stays in this browser.
App name and manifest colors
Preview
Previews stay empty until you choose a source.
Advertisement
Favicon generator quick answer
Create a favicon for your website from a logo, a PNG or JPG, an SVG, a few initials, or an emoji. The page builds favicon.ico, PNG icons, an Apple Touch icon, Android and PWA icons, site.webmanifest, and HTML you can paste into the head.
A favicon is not one file size. A browser tab uses 16×16 or 32×32. A phone home screen uses 180×180. An installed web app expects 192×192 and 512×512. This generator makes those sizes from the same square artwork so you do not export them one by one.
Your image stays in your browser during normal use. Nothing is sent to EverydayTools to be converted.
How to use this favicon maker
- Choose your source. Upload a PNG, JPG, WEBP, GIF, or SVG logo, or switch to text or emoji.
- Customize the icon. Set fit, padding, background, and shape. Check the 16×16 preview before you download.
- Generate your favicon. The previews, HTML snippet, and site.webmanifest update from the same settings.
- Download the package. Download the ZIP, favicon.ico, or the 32×32 PNG, then copy the HTML into your site head.
How the favicon package is built
The source is drawn into a square. Contain keeps the whole logo and adds empty space when the image is not square. Crop fills the square and trims the edges. Padding pulls the artwork inward so a circle mask or a 16×16 tab does not cut off the mark. Shape then clips that square to a square, a rounded square, or a circle.
That square is painted again at each target size. Small sizes are redrawn, not stretched from a tiny file, so a 512×512 logo stays as sharp as the browser can make 16×16. favicon.ico is a real icon container: it stores the 16, 32, and 48 pixel PNG images inside one .ico file. It is not a PNG that was only renamed.
PNG files cover the sizes below. site.webmanifest points at the 192 and 512 icons and a maskable 512 icon whose artwork sits inside the center safe area. The HTML snippet uses the same filenames as the ZIP.
| File | Size | Typical use |
|---|---|---|
favicon.ico | 16, 32, 48 | Browser tabs, bookmarks, default /favicon.ico |
favicon-16x16.png | 16×16 | Tab icon on standard screens |
favicon-32x32.png | 32×32 | Tab icon on high-density screens |
apple-touch-icon.png | 180×180 | Apple home screen |
android-chrome-192x192.png | 192×192 | Android and PWA icon |
android-chrome-512x512.png | 512×512 | PWA splash and install icon |
Example: logo to a website favicon
A 1024×1024 PNG logo is a strong source. Contain keeps the whole mark. About 10% padding keeps it off the edge. The download then includes 16×16, 32×32, 48×48, 64×64, 180×180, 192×192, and 512×512 PNGs, plus favicon.ico, site.webmanifest, and the HTML snippet.
The same path works for JPG and WEBP. JPG has no transparency, so a transparent setting only affects the padding around the photo. An SVG logo is drawn locally and, when it has no scripts, is also saved as favicon.svg. GIF uses the first frame only.
Check the 16×16 tab preview before you ship it. If the wordmark disappears, switch to initials or crop to the symbol.
Ways to create a favicon
From a logo or image
Upload the master logo when you already have artwork. Square PNG is the easiest source. A wide logo should use contain, or crop if only the symbol matters.
PNG, JPG, or WEBP to ICO
The ICO holds three sizes so a browser can pick a tab icon without downloading the 512 pixel file. Keep the PNG link tags as well. Modern browsers use those, and the ICO covers the older request for /favicon.ico.
SVG to favicon
SVG stays sharp when it is redrawn at each size. This page rasterizes it for ICO and PNG, which is what favicon.ico can store. A plain SVG is also copied to favicon.svg. For a single icon you want to recolor first, use the SVG Icon Customizer, then bring the result back here.
Apple Touch, Android, and PWA icons
apple-touch-icon.png is 180×180. The manifest lists 192 and 512 PNG icons, plus a maskable 512 icon with extra margin so Android can crop a circle without cutting the mark. Set the site name, short name, theme color, and background in the optional manifest section. Those values are written into site.webmanifest.
Initials or emoji
Text mode is for a new site that does not have a logo yet. One to three characters, a heavy font, and a plain background stay readable at 16×16. Emoji mode uses a preset or an emoji you paste. The system draws it, so the exact picture can differ between phones and desktops.
HTML for the head
Copy HTML after the filenames match the files you will upload. Point every href at the public path on your site. A manifest link only works after site.webmanifest is deployed next to the icons.
Common favicon mistakes
- Starting from a 32×32 export. It cannot grow into a sharp 512×512 icon.
- Putting a full wordmark in the square. At tab size it becomes a blur.
- Leaving padding at zero, then losing the edges when a platform crops a circle.
- Placing the mark against the edge. Keep important shapes inside the center.
- Judging the icon only at 512. The 16×16 preview is the one visitors see in a tab.
- Uploading only favicon.ico and skipping the Apple Touch and PWA PNGs.
- Using a link tag whose path does not match the file you deployed.
- Forgetting to reload without cache. Browsers keep old favicons for a long time.
Add the favicon to your site
Put favicon.ico, the PNG files, and site.webmanifest in the public root. The HTML snippet assumes those paths, including /favicon.ico and /site.webmanifest. If the site is served from a subfolder, change every href to that folder before you paste the snippet into the head.
On a Next.js site, files in the public folder are served from the root. You can also use the App Router icon file, but do not leave a second, older favicon.ico in public with different artwork. Browsers will pick one and then remember it.
Open the deployed page in a private window. A normal reload often keeps the previous tab icon. If the new icon does not appear, the browser is using its favicon cache. Changing the file path, or waiting out that cache, is more reliable than refreshing once.
Current Chrome, Edge, Firefox, and Safari read this favicon.ico. The three sizes inside it are PNG images in a real icon container. Icon viewers from before Windows Vista may not open that PNG-style ICO. Browsers people use today do.
Related design tools
- Need to recolor an SVG mark before you export icons? Use the SVG Icon Customizer.
- Need the SVG as a React component? Use SVG to JSX.
- Need colors for the icon background and theme color? Use the Color Palette Generator.
- Need a CSS background that matches the icon? Use the CSS Gradient Generator.
- Need to see how a PNG sits on another layer? Use the Image Blend Mode Tool.
- Browse the rest of the set on Design & UI Tools.
Frequently asked questions
What is a favicon?
A favicon is the small icon browsers show in tabs, bookmarks, and history. Phones also use larger versions for home-screen and installed-app icons.
What size should a favicon be?
Start from a square image at 512×512 or larger. Browsers still request 16×16 and 32×32. Apple uses 180×180. Android and PWAs use 192×192 and 512×512.
Can I create a favicon from PNG?
Yes. Choose Image / Logo and drop a PNG. Transparency is kept when the background is set to transparent. A 512×512 PNG is a practical source size.
Can I convert PNG to ICO?
Yes. The download includes favicon.ico, a real icon file that contains 16×16, 32×32, and 48×48 images. It is not a PNG renamed to .ico.
Can I create a favicon from SVG?
Yes. An SVG is drawn in the browser and exported as ICO and PNG sizes. A safe SVG is also included as favicon.svg. SVG that contains scripts is rasterized only.
What files are included?
The ZIP contains favicon.ico, PNG icons from 16×16 through 512×512, apple-touch-icon.png, Android icons, a maskable 512×512 icon, site.webmanifest, and a Windows tile file. Text and emoji also add favicon.svg.
Do I need favicon.ico?
Keep it. Modern browsers can use PNG link tags, and favicon.ico still covers older clients and the default /favicon.ico request many servers expect.
How do I add a favicon to HTML?
Copy the HTML snippet into the head. Put the files in the same public paths the snippet uses, usually the site root, so /favicon.ico and /site.webmanifest resolve.
Can I create a favicon from text?
Yes. Text / Initials takes one to three characters. Set the font, weight, size, colors, shape, and padding, then download the same package.
Can I create a favicon from emoji?
Yes. Paste one emoji or pick a preset. The emoji is drawn with the system emoji font and exported locally. Appearance can vary slightly by operating system.
Is the favicon generator free?
Yes. There is no signup and no charge. Generation, copy, and download run in the page you already have open.
Are my images uploaded?
No. The image, text, or emoji is processed in your browser. EverydayTools does not receive the file for favicon generation.
Does it work on mobile?
Yes. You can pick a photo, type initials, or choose an emoji on a phone. Download the ZIP from the same screen. A larger screen makes the 16×16 check easier.
Privacy and accuracy
Your image stays in your browser during normal use. Reading the file, drawing the sizes, building favicon.ico, and creating the ZIP do not send the artwork to EverydayTools.
Put the files on your own server and reload the tab before you treat the icon as final. iOS still masks the Apple Touch icon. Emoji pictures depend on the device font. A GIF contributes its first frame only.