Upload Image to Convert Website Favicon
Upload an image to automatically generate website icons in various sizes
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
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"
}