Favicon Generator
Generate the complete, modern favicon set for your website from an image or from text/emoji — then copy the HTML tags and download everything as one ZIP.
Drop a file here, paste (Ctrl+V) or
Add an image to start (square, 512 px or larger works best).
Web app manifest
Paste this into your <head>
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2f6fdf">site.webmanifest
{
"name": "My Website",
"short_name": "Website",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#2f6fdf",
"background_color": "#ffffff",
"display": "standalone"
}How to use
- Choose an image (logo, PNG/SVG) or switch to Text / emoji.
- Adjust padding, background and shape — the previews show the browser tab and phone home screen.
- Set your site name and colors for the web app manifest.
- Download the ZIP, upload the files to your site root, and paste the HTML snippet into <head>.
Frequently asked questions
Which favicon files do I really need in 2026?
favicon.ico (16/32/48) for legacy and Windows, a 32×32 PNG (optionally 16×16), a 180×180 apple-touch-icon.png, and 192/512 px icons referenced from site.webmanifest. This generator creates exactly that set.
Where do I upload the files?
Put them in the root of your website (next to index.html) so /favicon.ico resolves. If you place them elsewhere, change the paths in the HTML snippet and in site.webmanifest.
Why is the Apple touch icon not transparent?
iOS fills transparent areas with black. The generator fills the 180 px icon with your background color so it looks right on the home screen.
My favicon does not update — why?
Browsers cache favicons aggressively. Hard-refresh, open the icon URL directly, or add a version query like /favicon.ico?v=2. See our troubleshooting guide.