Favicon from Image
Upload a logo or image and get a complete favicon set: favicon.ico (16, 32 and 48 px), PNG icons from 16 to 512 px, an Apple touch icon, Android icons and a site.webmanifest, plus the HTML to paste into your page. Everything is generated in your browser — your image is never uploaded.
Or drag an image here. PNG, JPG, WebP, GIF or SVG — ideally square and at least 512 × 512 px.
What you'll get:
- • favicon.ico with 16, 32 and 48 px icons
- • PNG favicons from 16×16 to 256×256
- • Apple touch icon (180×180)
- • Android Chrome icons (192×192 and 512×512) and site.webmanifest
- • Transparency kept (except the Apple touch icon, which iOS needs opaque)
Best practices:
- • Use simple, recognizable designs
- • Logos and icons work better than photos
- • High contrast for visibility at small sizes
- • Square or circular designs work best
Summary: How to Make a Favicon from an Image, Free and Privately
A favicon is the small icon that browsers show in tabs, bookmarks and history. To make a favicon from an image, upload a logo (PNG, JPG, WebP, GIF or SVG) and this tool builds a full set in your browser: favicon.ico with 16, 32 and 48 px images, nine PNGs from 16 to 512 px (including the 180 px Apple touch icon and the 192 and 512 px Android icons) and a site.webmanifest. Download them singly or as favicons.zip.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools).
Start from a square logo of at least 512 × 512 pixels, or an SVG. If the artwork needs tidying first, trim it with the image cropper, strip its backdrop with the background remover, crisp up a soft logo with the image sharpener or set its size with the image resizer.
Table of Use: The Files You Get and What Each Is For
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Site root. Browsers request /favicon.ico when a page declares no icon. |
| favicon-16x16.png, favicon-32x32.png | 16, 32 | Browser tabs; 32 px for high-DPI screens and the taskbar. |
| favicon-48x48.png, favicon-64x64.png, favicon-128x128.png, favicon-256x256.png | 48 to 256 | Windows site icon, high-DPI desktops and large shortcuts. |
| apple-touch-icon.png | 180 | iPhone and iPad home screen. Always opaque. |
| android-chrome-192x192.png, android-chrome-512x512.png | 192, 512 | Android home screen and installable web apps, linked from the manifest. |
| site.webmanifest | JSON | Your site name, theme and background color, and the two Android icons. |
| Your image | Result |
|---|---|
| SVG logo | Rendered at 1,024 px on the long side, so it stays crisp from 16 to 512 px. |
| Wide or tall logo, Crop to square | Center square; the ends of the longer side are trimmed. |
| Wide or tall logo, Fit whole image | Whole image, padded with transparency or your background color. |
| Transparent PNG | Transparency kept everywhere except the Apple touch icon. |
| Image smaller than 512 px | A warning appears; larger icons are upscaled and look soft. |
Features
- One upload, the whole set. Changing any option regenerates every file, so the previews always match what you download.
- Optional solid background. Pick any color, for example one read with the color picker. Left off, the icons stay transparent, except the Apple touch icon.
- Sharper small icons. Large images are halved in steps before the final draw, so 16 and 32 px icons stay cleaner.
- Broadly compatible ICO. favicon.ico uses 32-bit entries with a transparency mask. For other sizes, such as 256 px, use the PNG to ICO converter.
- Manifest and HTML included. The site name you type (up to 60 characters) goes into site.webmanifest, and Copy HTML puts the tags below on your clipboard.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 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">How to Use the Favicon Maker
- Click Upload Image, or drag one image onto the box. The tool handles one image at a time.
- Check Image Info for dimensions and transparency, and any upscaling warning.
- Under Options, choose Crop to square or Fit whole image, tick Solid background if you want one, and type your Site name.
- Click Download All as ZIP, or Download on a single card.
- Unzip into your site's root, click Copy HTML, paste the tags into your page head and hard-refresh.
To see what is inside an icon you already have, open it in the ICO to PNG converter. For rounded app-style corners, prepare the source with the round corner generator, and finish your head tags with the meta tag generator.
Who Can Use It
- Developers and site owners who need the files and the tags in one pass.
- Bloggers and small businesses turning a logo into a tab icon.
- Designers testing a mark at 16 pixels.
FAQs
How do I make a favicon from an image?
Click Upload Image and choose a PNG, JPG, WebP, GIF or SVG, ideally a square logo of at least 512 × 512 pixels. The tool builds favicon.ico, nine PNG icons (including the 180 px Apple touch icon and the 192 and 512 px Android icons) and site.webmanifest in your browser. Click Download All as ZIP, unzip into your site's root folder and paste the HTML tags into your page head.
What size should a favicon be?
There is no single size. A favicon.ico holding 16, 32 and 48 px images covers browser tabs and the site root, a 180 px Apple touch icon covers iPhone and iPad home screens, and 192 and 512 px icons cover Android and installable web apps. Start from at least 512 px, or an SVG.
Can I convert a PNG or JPG to a favicon.ico file?
Yes. Upload the PNG or JPG and the tool packs 16, 32 and 48 px versions into one favicon.ico. The entries are 32-bit with transparency. A JPG has no transparency, so tick Solid background if you want a color behind the artwork.
Should a favicon have a transparent or solid background?
Use a transparent background for a simple mark that reads on both light and dark browser themes, and a solid one if the icon is very light or very dark. The Apple touch icon always gets a solid background, white unless you choose another color, because iOS shows transparent areas as black.
What happens if my image is not square?
Crop to square, the default, fills the icon with the center of your image and trims the ends of the longer side. Fit whole image keeps everything and pads the shorter side with transparency or your background color. Choose the mode under Options.
Why is my new favicon not showing up?
Browsers cache favicons aggressively. Hard-refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac), or open the page in a private window. If the old icon persists, add a version to the icon URLs, for example /favicon-32x32.png?v=2, and raise the number with each change.
Where do I put the favicon files on my website?
Put them in the root of your site, the folder served at the top of your domain, such as /public in Next.js or Vite projects. Root placement lets browsers find /favicon.ico even without link tags. If you use a subfolder, change the paths in the HTML snippet and the two icon paths inside site.webmanifest to match.
Are my images uploaded when I make a favicon?
No. The files are generated in your browser with the HTML5 Canvas API and the ZIP is built on your device, so your logo is never uploaded or stored. You can confirm it in the Network tab of your browser's DevTools.
Related Image Tools
Explore more powerful image tools to enhance your productivity
JPG to PNG Converter
Convert JPG to PNG
PNG to JPG Converter
Convert PNG to JPG
WebP to PNG Converter
Convert WebP to PNG
PNG to WebP Converter
Convert PNG to WebP
Image Resizer
Resize images
Image Cropper
Crop images
Image Compressor
Compress images
Image Rotator
Rotate images
Image Flip Tool
Flip images
Grayscale Converter
Convert to grayscale
Sepia Filter
Apply sepia effect
Image Blur Tool
Blur images
Brightness Adjuster
Adjust brightness
Contrast Adjuster
Adjust contrast
Saturation Adjuster
Adjust saturation
Image Sharpener
Sharpen images
Add Text to Image
Add text overlay
Add Watermark
Add watermarks
Remove Background
Remove image background
Color Inversion Tool
Invert colors