Favicon Generator
Upload a logo or image to create favicon.ico, PNG icons from 16 to 512 px and an Apple touch icon, plus the HTML tags and web manifest to use them. All processing happens in your browser.
Transparent areas show as black on iOS home screens, so fill the background if your logo has transparency.
Your icons
Upload an image to generate your favicon set.
Images are resized in your browser with the Canvas API. Nothing is uploaded to a server.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 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">{
"name": "My Website",
"short_name": "My Website",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}What is a favicon?
A favicon is the small icon that represents a website in browser tabs, bookmarks, history and search results. Sites usually provide several sizes: a favicon.ico or 32 x 32 PNG for tabs, a 180 x 180 Apple touch icon for iPhone and iPad home screens, and 192 and 512 px icons listed in a web app manifest for Android. This generator creates all of them from one image.
How to use the favicon generator
- 1
Choose or drop a square image, ideally 512 x 512 px or larger. PNG, JPG, SVG, WebP and GIF files all work.
- 2
Pick Contain to keep the whole image or Cover to crop it to a square, and add padding if the icon looks cramped.
- 3
Turn on Fill background if your logo is transparent, so it does not sit on black on iPhone home screens.
- 4
Download favicon.ico and each PNG, then upload them to the root folder of your website.
- 5
Copy the HTML tags into your page's head and save site.webmanifest next to the icons.
Files this tool creates
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32 and 48 px | The file browsers request from /favicon.ico when a page links no icon |
| favicon-16x16.png | 16 x 16 px | Browser tabs |
| favicon-32x32.png | 32 x 32 px | Browser tabs on high-density screens |
| favicon-48x48.png | 48 x 48 px | Larger tab and shortcut icons |
| apple-touch-icon.png | 180 x 180 px | iPhone and iPad home screen |
| android-chrome-192x192.png | 192 x 192 px | Android home screen, listed in the web manifest |
| android-chrome-512x512.png | 512 x 512 px | Android splash screen and app install, listed in the web manifest |
Frequently asked questions
Do I still need a favicon.ico file?
It is still worth having one. Browsers request /favicon.ico automatically when a page does not link to an icon, so keeping it in your site root avoids missing icons and 404 errors in your logs. The favicon.ico from this tool contains 16, 32 and 48 px images in one file.
Is my image uploaded to a server?
No. Your image is read and resized in your browser with the HTML canvas element, and every file is created on your device. Nothing is sent to Canvas Builder.
What image works best for a favicon?
Use a simple, square mark rather than a full logo with small text, because the icon is shown as small as 16 x 16 pixels. Start from an SVG or a PNG of at least 512 x 512 pixels so the large icons stay sharp, then check the 16 px result for legibility.
Why does my new favicon not appear?
Browsers cache favicons heavily. After uploading, open the site in a private window or clear the cache, and check that the link tags point to the right paths. Search engines only update the icon shown in results after they recrawl your homepage, which can take some time.
Related tools
Favicon done. Build the actual site
Canvas Builder builds the complete responsive site your favicon will sit on top of.