# Favicon Converter

PRO

[User Guide](/content/guide/favicon-converter/index.html)

Upload Image to Convert Website Favicon

Upload an image to automatically generate website icons in various sizes

Drag and drop image here or click to upload

PNG, JPG, SVG

We recommend uploading a square image of at least 512x512 pixels for best results

Convert Favicon

### Supported Sizes

| Size       | Description                    |
|------------|--------------------------------|
| 16x16     | Browser Tab                    |
| 32x32     | Browser Tab (High Resolution)  |
| 48x48     | Windows Desktop                |
| 192x192   | Android App                    |
| 512x512   | PWA App                        |
| 180x180   | iOS Devices (apple-touch-icon) |

Includes detailed usage instructions and example code

### Icon Usage Instructions

How to implement generated icons on your website

### Icon Preview

favicon-32x32.png

favicon-192x192.png

apple-touch-icon.png

### Usage Steps

1. Upload all icon files to your website's root directory or a dedicated icons directory
2. Add the following code to the <head> section of your HTML:

```
<!-- Basic icon -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG icons for modern browsers -->
<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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

<!-- Apple Touch Icon for iOS devices -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- PWA manifest file -->
<link rel="manifest" href="/site.webmanifest">
```

### Different Size Usage

- favicon.ico: Traditional browser tab and bookmark icon
- 16x16: Browser tab icon
- 32x32: Higher resolution tabs and Windows taskbar
- 48x48: Windows desktop icon
- 192x192: Android app icon
- 512x512: PWA app icon
- apple-touch-icon.png: iOS devices when added to home screen

### Website Manifest File (site.webmanifest)

To support PWA functionality, create a file named site.webmanifest with the following content:

```
{
  "name": "Your Website Name",
  "short_name": "Short Name",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}
```