Features

Generate all favicon sizes

16x16, 32x32, 48x48 for browsers

180x180 Apple touch icon

192x192, 512x512 for PWA

Generate favicon.ico file

Generate manifest.json

HTML code snippet

Download as ZIP package

100% client-side processing

No server uploads

What is a Favicon?

A favicon (favorite icon) is a small icon that represents your website in browser tabs, bookmarks, and mobile home screens. Modern websites need favicons in multiple sizes to support different devices and platforms, from desktop browsers to mobile devices and progressive web apps (PWAs).

Our favicon generator creates all the sizes you need from a single source image. It generates the traditional favicon.ico file for older browsers, PNG files in various sizes for modern browsers, Apple touch icons for iOS devices, and the manifest.json file for progressive web apps.

Required Favicon Sizes

16x16: Browser tabs and bookmarks
32x32: Taskbar shortcuts and browser tabs (high DPI)
48x48: Windows site icons
180x180: Apple touch icon for iOS devices
192x192: Android home screen and PWA
512x512: PWA splash screens and app icons
favicon.ico: Legacy browser support (contains 16x16 and 32x32)

Best practices for favicon images:

Use a square image (1:1 aspect ratio)
Start with at least 512x512px for best quality
Use simple, recognizable designs that work at small sizes
Ensure good contrast for visibility
Test on both light and dark backgrounds

How to Use the Favicon Generator

Step 1: Prepare Your Image

Create or select a square image that represents your brand. The image should be at least 512x512 pixels for best quality. Simple, bold designs work best for favicons since they'll be displayed at very small sizes.

Step 2: Upload and Generate

Upload your image by clicking the upload area or dragging and dropping the file. The generator will automatically create all required favicon sizes and show you a preview of how your icon looks at each size.

Step 3: Download and Install

Download the ZIP file containing all favicon files. Extract the files to your website's root directory. Copy the provided HTML code and paste it in the <head> section of your HTML pages.

Step 4: Test Your Favicon

After uploading the files and adding the HTML code, clear your browser cache and reload your website. Check that the favicon appears in browser tabs, bookmarks, and when adding to mobile home screens.

Common Use Cases

1. New Website Launch

Every new website needs a favicon to look professional and help users identify your site among multiple open tabs. Generate all required sizes to ensure your site looks great on all devices and platforms.

2. Rebranding

When updating your brand identity, generate new favicons to match your new logo or color scheme. Replace old favicon files with new ones and update the HTML code if file names changed.

3. Progressive Web App (PWA)

PWAs require specific icon sizes (192x192 and 512x512) defined in manifest.json. Our generator creates these files and the manifest configuration, making your site PWA-ready.

4. Multi-Platform Support

Different platforms require different icon sizes. iOS needs 180x180 Apple touch icons, Android needs 192x192 icons, and browsers need various sizes. Generate all sizes at once to ensure complete platform coverage.

5. Client Projects

Web developers and designers can quickly generate favicons for client projects. Upload the client's logo and deliver a complete favicon package with all required sizes and implementation code.

Favicon Implementation Examples

Example 1: Basic HTML Implementation

<head>
  <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="shortcut icon" href="/favicon.ico">
</head>

Example 2: Complete Implementation with Apple Touch Icon

<head>
  <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="shortcut icon" href="/favicon.ico">
</head>

Example 3: PWA Implementation with Manifest

<head>
  <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="manifest" href="/manifest.json">
</head>

Example 4: manifest.json for PWA

{
  "name": "My Website",
  "short_name": "MySite",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Example 5: File Structure

website-root/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── manifest.json

Frequently Asked Questions

What image format should I use for the source?

PNG with transparency is recommended for the best quality. SVG is also excellent if your design is vector-based. JPG works but doesn't support transparency, which may look poor on different backgrounds.

What size should my source image be?

Use at least 512x512 pixels for the source image. Larger is better since the generator will scale down to create smaller sizes. Starting with a high-resolution image ensures all generated favicons are sharp and clear.

Where should I place favicon files?

Place all favicon files in your website's root directory (same level as index.html). This is the standard location where browsers look for favicons. You can use subdirectories but must update the paths in your HTML.

Why isn't my new favicon showing up?

Browsers aggressively cache favicons. Clear your browser cache, do a hard refresh (Ctrl+F5 or Cmd+Shift+R), or test in an incognito/private window. It may take a few minutes for the new favicon to appear.

Do I need all these sizes?

For maximum compatibility, yes. Different platforms and devices use different sizes. At minimum, include 16x16, 32x32, and 180x180 (Apple). For PWAs, you also need 192x192 and 512x512.

What is favicon.ico and do I still need it?

favicon.ico is the legacy format used by older browsers. While modern browsers support PNG, including favicon.ico ensures compatibility with older browsers and some applications that specifically look for this file.

Can I use my logo as a favicon?

Yes, but simplify it if necessary. Complex logos with fine details or text may not be readable at small sizes. Consider creating a simplified icon version of your logo specifically for use as a favicon.

How do I test my favicon on mobile?

On iOS, use Safari's "Add to Home Screen" feature. On Android, use Chrome's "Add to Home screen" option. This tests the Apple touch icon and Android chrome icons respectively.

Is my image uploaded to a server?

No, all image processing happens in your browser using JavaScript. Your image never leaves your computer, making this tool completely safe for confidential or proprietary logos.

Can I generate favicons offline?

Yes, once the page is loaded, all favicon generation happens in your browser. You can use the tool completely offline without an internet connection.

Related Tools

Explore our other image and web tools:

Image Compressor - Compress images
SVG to PNG Converter - Convert SVG to PNG
Image Placeholder Generator - Generate placeholder images
QR Code Generator - Create QR codes
Data URI Converter - Convert images to data URIs

Favicon Generator

Upload Image

Preview Sizes

Download

Click to upload or drag and drop

Preview All Sizes