How to Make a Favicon Free (ICO, PNG and Apple Icon)
Create a favicon from a letter, an emoji or your logo, download favicon.ico plus every PNG size, and paste in the code. A free favicon generator, no upload.
Published · 5 min read
To make a favicon, start from a square logo, a letter or an emoji, turn it into favicon.ico plus a few PNG sizes, put the files in your website's main folder, and add a few lines of code to your pages. The free favicon generator makes all the files in one ZIP and gives you the code to paste. It runs in your browser, so your logo is never uploaded.
What a favicon is
A favicon is the small icon that shows in the browser tab, in bookmarks, in history and sometimes beside your site in search results. Phones also use a larger version when someone adds your site to their home screen. Without one, browsers show a generic blank icon, which makes a site look unfinished.
Because different places need different sizes, a complete favicon is really a small set of files.
What you get
The ZIP from the favicon generator contains:
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32 and 48 px inside one file | Browser tabs, older browsers, the default /favicon.ico request |
| favicon-16x16.png | 16 × 16 | Browser tabs |
| favicon-32x32.png | 32 × 32 | Browser tabs on high-resolution screens, bookmarks |
| apple-touch-icon.png | 180 × 180 | Home-screen icon on iPhone and iPad |
| android-chrome-192x192.png | 192 × 192 | Android home screen |
| android-chrome-512x512.png | 512 × 512 | Android splash screens and app-style installs |
| site.webmanifest | small text file | Tells Android browsers where the two Android icons are |
Step by step
- Open the free favicon generator.
- Under Make it from, choose Letters, Emoji or An image.
- Letters: type 1 to 3 characters, such as your initials or brand's first letter, and pick a Letter colour.
- Emoji: type or paste an emoji.
- An image: press Choose an image and pick your logo (PNG, JPG or WebP, up to 20 MB). Then choose Fit: Fill the square crops to fill the icon, Show the whole image fits all of it inside.
- Set the Background colour, or tick Transparent background. (Transparent is switched on for you when you choose an image.)
- Pick a Shape: Square, Rounded or Circle.
- Check the previews at 16 px, 32 px and the home-screen size. If it's unreadable at 16 px, simplify it.
- Press Create favicon, then Download favicon files (ZIP).
Add it to your website
- Unzip the files and upload all of them to the main (root) folder of your website, the same folder as your home page, so that yoursite.com/favicon.ico opens the icon.
- Press Copy code under the download and paste these lines into the
<head>section of every page (or your site's shared header 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">
- Reload your site. Browsers cache favicons stubbornly, so if you still see the old icon, open the site in a private window or clear the cache.
On website builders and blogging platforms, you usually don't paste code. Look for a "Site icon" or "Favicon" setting and upload the 512 × 512 PNG or favicon.ico there.
Design tips for a 16-pixel icon
A favicon is tiny: the most common size is 16 × 16 pixels. Detail that looks great at full size turns into mush.
- Use one bold shape or one or two letters. Your full logo with a tagline won't survive. A monogram or the symbol part of your logo usually will.
- Go high-contrast. Dark on light or light on dark. Thin pale lines vanish.
- Fill the square. Don't leave lots of padding; it makes the icon look even smaller in the tab.
- Think about dark mode. A transparent icon with dark lines can disappear on a dark browser tab. A solid background or a rounded square avoids that.
- Start with a square logo at least 512 × 512 pixels. If your logo isn't square, crop it with the free image cropper first, or use Show the whole image.
If your logo is an SVG
The favicon generator works from PNG, JPG or WebP images. If your logo is an SVG file, convert it first with the free SVG to PNG converter at 512 px or more wide with a transparent background, then use that PNG. Our guide to converting SVG to PNG walks through it.
Emoji favicons
Emoji make a quick, friendly favicon for a personal site or side project. One thing to know: every device draws emoji in its own style, and the icon is made with how the emoji looks on your device. Once it's saved as an image, though, it looks the same for every visitor.
If an icon already exists but won't appear, work through favicon not showing. To understand SVG logos, see what an SVG file is.
Private and quick
Everything is drawn on your own device. Your logo isn't uploaded or stored, and you don't need an account.
Make your favicon
Pick letters, an emoji or your logo, check the 16 px preview, and download the ZIP from the free favicon generator.
Frequently asked questions
- What size should a favicon be?
- A complete set covers 16, 32 and 48 pixels for browser tabs, 180 pixels for Apple devices, and 192 and 512 pixels for Android. The generator makes all of them from one design.
- Do I still need favicon.ico?
- It's still worth including. Many browsers and tools request /favicon.ico from your site's root automatically, and the .ico file holds the 16, 32 and 48 pixel sizes in one.
- Where do I put the favicon files?
- In the main (root) folder of your website. Then paste the code shown after you create the favicon into the head of your pages.
- Why isn't my new favicon showing?
- Browsers cache favicons for a long time. Check yoursite.com/favicon.ico opens the new icon, then reload in a private window or clear the browser cache.
- Can I make a favicon with a transparent background?
- Yes. Tick Transparent background. It's on by default when you start from an image.
Image tools
Try the Favicon Generator
Free, no sign-up, and your files stay on your device. Make a favicon for your website from one to three letters, an emoji or your logo, and download favicon.ico, the PNG sizes, the iPhone and Android home-screen icons and a web manifest in one ZIP, with the code to paste into your site.