Favicon Converter

PRO

User Guide

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

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 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"
}