Favicon Generator
This free favicon generator turns a logo, or a letter or emoji, into every icon a website needs: a multi-size favicon.ico, 16 and 32 pixel PNGs, an Apple touch icon, Android icons and a site.webmanifest. Everything is made in your browser and downloaded as one ZIP, with the HTML to paste into your site.
- Files stay on your device
- Free, no sign-up
- Works on phone and desktop
Used in site.webmanifest when someone adds your site to their home screen.
Preview
Add a logo or type a letter to see your favicon.
The ZIP has favicon.ico (16, 32 and 48 px), PNG favicons, an Apple touch icon, Android icons and site.webmanifest.
Add to your site's <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">Made on this device; your logo is never uploaded.
How to use the Favicon Generator
- 1
Add your logo (PNG, JPG, WebP or SVG), or switch to Letters or emoji and type one to three characters.
- 2
Choose a background colour or keep it transparent, then pick a square, rounded or circle shape and the padding.
- 3
Check the browser tab and home screen previews in light and dark.
- 4
Download the ZIP, upload the files to your site's root folder and paste the HTML into your <head>.
Features
- favicon.ico with 16, 32 and 48 px sizes inside
- Apple touch icon (180 px) and Android icons (192 and 512 px)
- site.webmanifest and a ready-to-paste HTML snippet
- From an image, an SVG, letters or an emoji
- Transparent or coloured background; square, rounded or circle
- Private: your logo is never uploaded
Frequently asked questions
What size should a favicon be?
Browsers use 16×16 and 32×32 pixels in tabs, Windows can use 48×48, iPhones use a 180×180 Apple touch icon, and Android uses 192×192 and 512×512. This generator makes all of them from one image; start with a square logo of at least 512 px.
How do I add a favicon to my website?
Upload the files from the ZIP to the root of your site, so favicon.ico is at yoursite.com/favicon.ico, and paste the HTML snippet into the <head> of your pages. Browsers may cache the old icon, so a hard refresh can help.
How do I add a favicon in Next.js?
With the App Router, put favicon.ico in the app folder, and optionally rename apple-touch-icon.png to apple-icon.png and a PNG to icon.png in the same folder. Next.js adds the <link> tags for you, so you don't need the snippet.
Can I convert a PNG or SVG to ICO?
Yes. Add a PNG, JPG, WebP or SVG and download favicon.ico on its own or in the ZIP. The .ico holds 16, 32 and 48 pixel versions so it looks sharp everywhere.
Why does my favicon look blurry or too small?
Detailed logos turn to mush at 16 pixels. Use a simple mark or a single letter, set Padding to 0% and pick Fill square so it uses the whole icon.
More free tools
See all tools- Free
Image Converter
Convert between JPG, PNG and WebP in one click.
- Free
Image Resizer
Resize photos to exact pixels or a percentage, in bulk.
- Free
Image Cropper
Crop photos freely or to preset ratios like 1:1, 4:5 and 16:9.
- Free
Background Remover
Remove the background from any photo with AI, free and without uploading it.
Need a custom tool or app?
I build web apps, mobile apps and internal tools for businesses. Tell me what you need and I’ll reply on WhatsApp.