Favicon Generator

Favicon Generator from Image

Upload an image and generate favicon.ico, apple-touch-icon, and PNG favicons in every size you need — for your browser tab, PWA, iOS home screen, and more.

Supported Sizes

16x16Browser Tab

32x32Browser Tab (High Resolution)

48x48Windows Desktop

192x192Android App

512x512PWA App

180x180iOS 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

Upload all icon files to your website's root directory or a dedicated icons directory
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"
}