Favicon generator
Upload a PNG or SVG and download every favicon size plus the head tags.
FreeRuns in your browserNo signupUpdated 2026-10-29
For favicon.ico, you can save the 32px PNG under that name; modern browsers accept it.
Sizes
Click a size to download it (favicon-16.png, favicon-32.png, favicon-48.png, apple-touch-icon.png, icon-192.png, icon-512.png). Put all six in your site's public folder.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32"> <link rel="icon" href="/favicon-16.png" type="image/png" sizes="16x16"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
{
"name": "My site",
"short_name": "My site",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#2f6bff",
"background_color": "#ffffff",
"display": "standalone"
}About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This favicon generator draws your logo onto canvases at the six sizes browsers and phones ask for: 16, 32 and 48px for tabs, 180px for the Apple home screen, and 192 and 512px for Android and installed web apps. Upload a PNG, JPG, WebP or SVG, or type one or two letters for a simple text icon. You get each file as a download, the HTML for your page head and a ready-made site.webmanifest.
How to use it
- Upload a square logo, ideally 512px or larger or an SVG, or type a letter.
- Set a background colour and corner radius. Leave the background blank to keep a transparent PNG.
- Add padding if the logo touches the edges.
- Click each size to download it, and put the files in your site's public folder.
- Paste the head tags into your layout and save the manifest as
site.webmanifest.
How to read the result
Look hardest at the 16px preview. At that size a 512px logo is shrunk 32 times, so a whole word or fine line work turns to mush. Most good favicons are a single letter or a simple mark. If yours is not legible at 16px, try a letter on a solid background. The default, a white M on blue with 20% rounded corners, stays readable at every size.
The 180px apple-touch-icon is what iOS shows on the home screen. iOS fills transparent areas with black, so give it a background colour. The 192px and 512px files are listed in the manifest; Android uses them for the home screen and the splash screen when someone installs the site.
The head tags point to /favicon.ico. Modern browsers display a PNG saved under that name, which covers the many crawlers and apps that request /favicon.ico directly without reading your HTML.
All drawing happens in a canvas in your browser, so the image is never uploaded.
Shrink an SVG logo before you upload it with the SVG optimiser. Favicons, manifests and launch checks are part of every website design and development project we run.
Questions
Frequently asked.
Which favicon sizes do I actually need?
For most sites: a 32px icon for browser tabs, a 180px apple-touch-icon for iPhones and iPads, and 192px and 512px icons in a web manifest for Android. A 16px version and a favicon.ico at the site root cover older browsers and tools that request that file directly.
Can I use an SVG favicon?
Yes. Current versions of Chrome, Firefox and Edge accept an SVG favicon declared with type image/svg+xml, and it can even switch colours in dark mode with a media query inside the SVG. Not every browser and tool reads SVG icons, so keep the PNG versions alongside it.
More in Design & CSS
Related tools.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide