Online Image to Favicon Converter - All Sizes & Formats

Turn any image into a complete favicon and icon package with 31 optimized files for browsers, iOS, Android, and Windows. Free online favicon generator with live preview.

Upload Image

Drag & drop your image here

Click to upload

Supported formats: PNG, JPG, BMP, GIF, WebP

Max file size: 10MB

Preview

16×16

32×32

48×48

Browser tab preview

Your Website Title×

Export

Package includes:

Favicon

ICO + PNG 16×16, 32×32

Apple

PNG 57, 60, 72, 76, 114, 120, 144, 152, 180

Android

PNG 36, 48, 72, 96, 144, 192, 256, 384, 512

MS Tiles

PNG 70, 144, 150, 310×310, 310×150

Config

JSON, XML, TXT

Total files

31 files

100% client-side processing. Your images never leave your browser.

How to Convert Your Image to Favicon with Our Online Generator

Upload your image (PNG, JPG, BMP, GIF, or WebP up to 10MB) to our online favicon converter by dragging it into the upload area or clicking to browse your files
Adjust scale (50-200%), rotation (0-360°), and border radius (0-50%) using the sliders. Watch your favicon and icon changes appear instantly in the live preview
Add padding (0-50px) and choose a background color from the color picker. Use transparent padding if your image already has a background
Preview how your favicon and icon looks at 16×16, 32×32, and 48×48 pixels. Your browser tab updates in real-time as you make changes. Click Download to get all 31 favicon files in a ZIP package

What You Can Do with This Online Favicon Generator

This online image to favicon converter gives you complete control over how your image becomes a favicon and icon. Here's what makes our favicon generator different:

Flexible Image Upload

•Five File Formats Supported: Works with PNG, JPG, BMP, GIF, and WebP. PNG recommended for images with transparency
•Drag & Drop or Click: Drag your image into the upload area, or click to browse. Files up to 10MB
•Large File Support: Upload images up to 10MB. Start with at least 512×512 pixels for best quality

Precise Editing Controls

•Scale Control (50-200%): Zoom in to crop or zoom out to add space. Use the Fit to Canvas button to reset to 100%
•Rotation (0-360°): Rotate your image to any angle. Slider gives you precise control from 0 to 360 degrees
•Border Radius (0-50%): Choose Square (0%), Rounded (20%), or Circle (50%) presets, or use the slider for custom values

Padding & Background

•Padding Size (0-50px): Add space around your image. 10-20px works well for most logos. Padding scales proportionally to each output size
•Background Color Picker: Choose from 100 preset colors, enter a hex code, or select transparent. The color fills the padding area
•Quick Color Access: 100 preset colors organized in a grid. Click any color to apply it instantly

Live Preview & Export

•Three-Size Preview: See your favicon at actual size: 16×16 (browser tabs), 32×32 (retina displays), and 48×48 (high-DPI screens)
•Browser Tab Updates Live: Your actual browser tab icon changes as you edit. This is exactly how users will see your favicon
•31-File Package: One click downloads a ZIP with all sizes for iOS (10 files), Android (9 files), Windows (5 files), browsers (3 files), plus 4 config files

Installing Your Favicon Package

You've downloaded a ZIP file with 31 files. Here's how to add them to your website:

1. Extract the ZIP file

Unzip favicon-package.zip to a folder on your computer. You'll see 27 PNG files, 1 ICO file, and 4 text/config files (site.webmanifest, browserconfig.xml, html-code.txt, README.txt).

2. Copy the HTML code

Open html-code.txt and copy all the code. Paste it into the head section of your HTML, right before the closing tag. This tells browsers where to find each favicon size.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">

3. Upload files to your website

Next.js / React (CRA) / Vue: Next.js/React/Vue: Put all files in the public/ folder at the root of your project
WordPress: WordPress: Upload via Media Library or use FTP to place files in your theme's root directory
HTML: Static HTML: Upload all 31 files to your website's root directory (same folder as index.html)

4. Test your favicon

Visit your website in a new incognito/private window. You should see your favicon in the browser tab. If not, clear your browser cache (Ctrl+Shift+Delete) and try again. Check our troubleshooting guide for more help.

Common Questions About Image Conversion

What image formats can I upload?: PNG, JPG, BMP, GIF, and WebP—all up to 10MB. PNG works best if your logo has transparency. JPG is fine for photos but doesn't support transparent backgrounds. GIF and WebP also work, though PNG is the most reliable choice.
My favicon isn't showing up. What's wrong?: Browsers cache favicons hard. Here's how to fix it:
Open your site in an incognito/private window (Ctrl+Shift+N or Cmd+Shift+N)
Clear your browser cache completely (Ctrl+Shift+Delete or Cmd+Shift+Delete)
Make sure the HTML code is in the head section, not body
Check that all files are uploaded to the correct directory (usually the root folder)
Do I need both ICO and PNG files?: Yes, for best compatibility. The ICO file (favicon.ico) works in older browsers like Internet Explorer 11. PNG files work in all modern browsers and support transparency better. Upload both—they're all included in the ZIP.
Why 31 files? That seems like a lot.: Each device needs a different size. Here's the breakdown:
Browsers: 3 files (favicon.ico, favicon-16x16.png, favicon-32x32.png)
iOS devices: 10 files from 57×57 to 180×180 for different iPhone and iPad models
Android devices: 9 files from 36×36 to 512×512 for various screen densities
Windows tiles: 5 files from 70×70 to 310×310 for the Start menu
Config files: 4 files (site.webmanifest, browserconfig.xml, html-code.txt, README.txt)
Can I use a transparent background?: Absolutely. If your PNG image has transparency, it stays transparent in the output. You can also set the padding color to transparent. This works great for logos that need to look good on both light and dark browser themes.
What's the best image size to start with?: Upload at least 512×512 pixels for best results. Larger is better—the tool scales down, which looks better than scaling up. If your image is smaller than 512×512, it might look pixelated at larger sizes like the 512×512 Android icon.
How does the scale control work?: Scale adjusts how much of the canvas your image fills. 100% fits your image to the canvas. Below 100% adds space around it (useful with padding). Above 100% zooms in, which crops the edges. Use it to frame your image perfectly.
What's the difference between padding and scale?: Scale changes your image size. Padding adds colored space around it. For example: scale at 80% with 20px white padding creates a logo centered on a white background. Padding is especially useful for logos that need breathing room.

What's in the ZIP File

Your download includes 31 files organized by platform. Here's what each one does:

Browser Favicons (3 files)

favicon.ico - favicon.ico — Multi-size icon for IE11 and older browsers (contains 16×16, 32×32, 48×48 in one file)
favicon-16x16.png - favicon-16x16.png — Standard browser tab icon (16×16 pixels)
favicon-32x32.png - favicon-32x32.png — Retina display browser tabs (32×32 pixels)

Apple Touch Icons (10 files)

apple-touch-icon-[size].png — iOS home screen icons from 57×57 to 180×180. When users add your site to their iPhone or iPad home screen, iOS picks the right size. The 180×180 version (apple-touch-icon.png) is the main one.

Android Chrome Icons (9 files)

android-chrome-[size].png — Android home screen icons from 36×36 to 512×512. Different Android devices use different sizes based on screen density. The 192×192 and 512×512 versions are most important for modern devices.

Windows Tiles (5 files)

mstile-[size].png — Windows Start menu tiles from 70×70 to 310×310. When users pin your site to the Windows Start menu, these tiles appear. Includes square tiles (70×70, 150×150, 310×310) and a wide tile (310×150).

Configuration Files (4 files)

site.webmanifest - site.webmanifest — PWA manifest that tells Android and modern browsers about your app icons, colors, and display mode
browserconfig.xml - browserconfig.xml — Tells Windows which tile images to use and what background color to apply
html-code.txt - html-code.txt — Ready-to-paste HTML code for your head section. Copy this into your website
README.txt - README.txt — Installation instructions and tips for using the files

Tips for Better-Looking Favicons

Start with a Large Image

Upload at least 512×512 pixels. Bigger is better—scaling down looks sharp, but scaling up gets blurry. If you have a vector logo, export it at 1024×1024 or larger before uploading.

Keep It Simple and Bold

At 16×16 pixels, fine details vanish. Use high contrast between your logo and background. Avoid thin lines (they disappear), small text (unreadable), and complex patterns (turn into mush). Think: one or two bold shapes.

Add Breathing Room with Padding

Logos that touch the edges look cramped. Add 10-20px of padding (about 10-20% of the canvas). White padding on a colored logo, or colored padding on a white logo, both work well. Check the preview to see what looks balanced.

Border Radius for Modern Look

20-30% border radius gives a modern, friendly feel. 50% makes a perfect circle (great for profile photos or round logos). iOS adds its own rounding to home screen icons, so don't worry about matching Apple's exact style.

PNG for Transparency, JPG for Photos

PNG supports transparency, which is crucial if your logo needs to work on different backgrounds. JPG doesn't support transparency but works fine for photos or solid-background logos. Avoid GIF unless you need animation (which favicons don't support anyway).

Test on Light and Dark Themes

Many browsers now support dark mode. If your favicon has a white background, it might look bad on dark browser themes. Consider using a transparent background or a colored background that works in both themes.

Use the Live Preview

The three preview sizes (16×16, 32×32, 48×48) show exactly how your favicon will look. If details are hard to see at 16×16, simplify your design. The browser tab preview updates in real-time—use it to test different padding and scale values.

When to Use the Image Converter

You Have a Company Logo

Upload your logo file (PNG, SVG exported as PNG, or JPG) to create favicons that match your brand. Add padding in your brand color for a polished look. Perfect for business websites, SaaS apps, and corporate sites.

Personal Photo or Avatar

Turn a profile photo into a favicon for personal blogs, portfolio sites, or social profiles. Use 50% border radius to make it circular. Works great for personal branding.

Custom Icon or Graphic

Already have an icon designed in Figma, Illustrator, or Photoshop? Export it as PNG and convert it here. Adjust the scale and padding to make it fit perfectly in a 16×16 browser tab.

Existing Brand Assets

Reuse existing brand imagery—app icons, social media profile pictures, or marketing graphics. The converter handles the resizing and optimization, so you don't need to create new assets from scratch.

Web App or Dashboard

Give your web application a professional look with a custom favicon. Users with multiple tabs open will spot your app instantly. Especially useful for internal tools, admin dashboards, and SaaS products.

Works in All Browsers and Devices

The generated favicons work everywhere. Here's what's supported:

✓Chrome (all versions) — Desktop and mobile
✓Firefox (all versions) — Desktop and mobile
✓Safari (all versions) — macOS and iOS
✓Edge (all versions) — Windows and macOS
✓Internet Explorer 11+ — Legacy support via ICO file
✓iOS Safari and Chrome — Home screen icons work on all iPhones and iPads
✓Android Chrome and Firefox — Home screen icons work on all Android devices
✓Opera (all versions) — Desktop and mobile
✓Brave, Vivaldi, and other Chromium browsers — Full support

How It Works (Technical Details)

• Uses HTML5 Canvas API to process images at high quality with 2x DPI rendering for sharp output
• Everything runs in your browser using JavaScript. Your images never get uploaded to a server—they stay on your device
• Live preview updates as you adjust sliders. The browser tab favicon changes in real-time using the Favicon API
• Zero server uploads. Zero data collection. Zero tracking. Your images are processed locally and deleted when you close the tab
• Generates ICO files (multi-resolution icon format for IE11+) and PNG files (modern format with transparency support)
• Creates 31 files: 3 for browsers, 10 for iOS, 9 for Android, 5 for Windows, plus 4 config files (manifest, browserconfig, HTML code, README)
• Each size is individually rendered and optimized. Not just resized—properly scaled with anti-aliasing for crisp edges at every size
• ZIP package uses JSZip library to bundle all files. Download happens client-side using FileSaver.js—no server involved

Related Tools and Guides

→Need a text-based favicon? Try our Text to Favicon Generator with 1000+ fonts →Want an emoji favicon? Check out our Emoji to Favicon tool with 3600+ emojis →Creating a logo? Use our Logo Creator for longer text and custom effects →Learn how to install favicons on your website →Understand favicon sizes and which ones you actually need →ICO vs PNG: Which format should you use?→Favicon not showing? Read our troubleshooting guide →More questions? Check our complete FAQ