Favicon generator
Turn a logo, a letter or an emoji into every icon file your website needs, plus the code to use them.
- Processed on your device. Your photos are never uploaded. How we know
- Free, no sign-up, no watermark
Drop your logo or icon
A square image of 512 px or more works best. SVG gives the sharpest result.
PixWrench’s code runs on your device. We don’t receive your files, file names or their contents.
PixWrench’s code runs on your device. We don’t receive your files, file names or their contents. What happens to your files
How to make a favicon for your website
A favicon is the little picture in the browser tab, the bookmarks list and the search results. Phones and installed web apps want bigger versions, each with its own file name. This tool makes the whole set from one source.
Use a square logo for the best result. An SVG is ideal, because it can be drawn sharply at every size and is also saved as favicon.svg. No logo yet? A letter or emoji with your colors makes a tidy stand-in.
- 1
Add a logo or type a letter
Drop in an image, or switch to letter and emoji mode and choose the character, colors and shape.
- 2
Adjust padding and background
Add breathing room around the artwork, pick a background for the opaque icons, and check the tab and home-screen previews.
- 3
Download the zip and paste the code
Upload the files to the root of your site, then paste the HTML snippet into the head of your pages.
What this tool does
- Start from PNG, JPG, WebP, SVG, AVIF or HEIC
- Or build an icon from a letter or emoji, with colors and shape
- Padding control and background color
- favicon.ico with 16, 32 and 48 px images inside
- Apple touch icon and Android manifest icons, including maskable
- site.webmanifest and a ready-to-paste HTML snippet
- Browser-tab and home-screen previews
- Everything in one zip
Worked example: what one 1024 px logo becomes
Start from a 1024 × 1024 PNG logo. The arithmetic shows why small sizes need a simple design:
- At 16 × 16, each favicon pixel stands in for a 64 × 64 block of the original (1024 ÷ 16). A one-pixel-wide detail in your logo simply disappears.
- At 48 × 48, each pixel covers about 21 × 21 original pixels, so a bold letterform survives where fine text does not.
- The maskable icon gets 22% padding on each side: at 512 px, that is about 113 px, leaving the artwork in the central 286 × 286 px, which fits inside the 40% safe circle.
If your full logo turns to mush at 16 px, use just its initial or symbol for the small sizes. The favicon sizes guide explains each size in more depth.
How the icon set is built
Your image, or the letter or emoji you chose, is drawn on your device with your padding and background, then scaled to each size and saved as a PNG. SVG sources are also kept as a vector favicon.svg. The 16, 32 and 48 px images are then packed into favicon.ico as PNG-compressed entries. The manifest file lists the Android icons, and the snippet links everything up.
Every file, and what uses it
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32, 48 px | Browsers, through the first icon link in the snippet |
favicon-16x16.png | 16 × 16 | Browser tab on standard screens |
favicon-32x32.png | 32 × 32 | Browser tab on high-density screens |
favicon-48x48.png | 48 × 48 | Larger tab and shortcut sizes |
apple-touch-icon.png | 180 × 180, opaque | iPhone and iPad home screen |
android-chrome-192x192.png | 192 × 192 | Android home screen, via the manifest |
android-chrome-512x512.png | 512 × 512 | Larger app icon, such as install and splash screens |
maskable-icon-512x512.png | 512 × 512, opaque | Android adaptive icon (manifest purpose “maskable”) |
favicon.svg | Vector | Browsers that accept SVG icons; only when your source is an SVG |
site.webmanifest | Text | Lists the Android icons, name and colors for installable web apps |
The HTML snippet links the ICO, the SVG or 32 px PNG, the Apple icon and the manifest, and sets a theme color.
What browsers, Apple and Google ask for
Browsers: MDN explains that when several rel="icon" links exist, the browser picks using their type and sizes, and uses the last one if several fit equally well.
Apple: iOS uses rel="apple-touch-icon" instead. Apple’s Safari documentation lists 180 × 180 for high-resolution iPhones, and says that without a link the site’s root is searched for apple-touch-icon.png.
Android and Chrome: web.dev says Chromium needs at least a 192 × 192 and a 512 × 512 icon in the manifest. Maskable icons are cropped to the device’s shape, so the important part must fit a centered circle with a radius of 40% of the width.
Google Search: the icon must be square, at least 8 × 8 px, and Google recommends larger than 48 × 48 px. Both the icon file and your home page must be crawlable.
Good to know
- Simplify for small sizes. Thin lines and small text vanish at 16 px.
- Start square. Every icon is square, so a wide logo leaves little room for the artwork; crop it to its symbol first with the crop tool.
- Check the maskable preview. Launchers crop the icon to different shapes, so look at the circular preview to see how much of the background shows around your logo.
- Search results update on Google’s schedule, not instantly after you upload new files.
- Need a high-resolution PNG of an SVG logo first? The SVG to PNG converter renders one at any size.
What happens to your files
Processed on your device. Your photos are never uploaded. PixWrench’s code runs on your device. We don’t receive your files, file names or their contents.
Unreleased logos stay unreleased. Your image is decoded, resized and packed into the zip by code running in this browser tab, and the manifest and HTML are written locally too. We don’t receive the artwork, the site name you type or the finished files.
Related tools and guides
Questions people ask
What sizes does a favicon need?
This set covers 16, 32 and 48 px for browsers, 180 px for Apple devices, and 192 and 512 px for Android and installed web apps. The favicon sizes guide explains each.
Do I still need favicon.ico?
The snippet links it first, giving browsers one classic icon file with 16, 32 and 48 px inside. If you prefer to serve only the PNG and SVG icons you can drop it; either way it is one small file.
Where do I put the files?
In the root folder of your website, next to your home page, so paths like /favicon.ico work. Then paste the snippet into the <head>.
Why is the Apple icon not transparent?
It is made opaque on your chosen background color, so it looks the way you designed it on the home screen.
Why doesn’t Google show my new favicon yet?
Google has to crawl your home page and the icon again. Make sure neither is blocked from crawling, and give it time.
Sources and review
- Google Search Central — Define a favicon to show in search results
- Apple — Safari Web Content Guide: Configuring web applications
- web.dev — Add a web app manifest
- web.dev — Adaptive icon support in PWAs with maskable icons
- MDN — HTML attribute: rel (icon, apple-touch-icon, manifest)
Page reviewed by the PixWrench team · How it works · Changelog · Report a problem