Design Tool
Favicon Generator
Generate favicon PNGs, an ICO file, app icons, HTML tags and a web manifest from a browser-based image workflow.
Favicon workspace
Upload a source image, tune the icon shape and export the favicon package your site needs.
Source image
No source image selected yet.
Icon controls
Upload a PNG, JPG or SVG image to generate favicon files.
Your images are processed entirely in your browser and are never uploaded.
Live previews
Browser tab preview
Generated PNG files
HTML snippet
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.json">
manifest.json
{
"icons": [
{
"src": "/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"name": "DevKitYard App",
"short_name": "DevKitYard",
"theme_color": "#e11d48"
}How to Use Favicon Generator
- Enter short text or initials for the icon.
- Pick background and foreground colours.
- Adjust the corner radius.
- Copy or download the SVG favicon.
FAQ
Can I use SVG as a favicon?
Yes. Modern browsers support SVG favicons, though you may still want PNG or ICO fallbacks for broader compatibility.
How much text should I use?
Short initials or one to two characters usually work best at small favicon sizes.
Can I change the favicon colours?
Yes. Use the colour controls or edit the SVG values after copying the markup.
Can I use the favicon commercially?
Yes. Favicons generated with this tool are free to use in personal and commercial projects.