Favicon Generator — Every Icon Your Website Needs
Turn your logo, an SVG, a few letters or an emoji into a complete favicon set: favicon.ico for browser tabs, an Apple touch icon for iPhone home screens, Android and web-app icons with a manifest, and the exact HTML to paste. See it in a browser tab, on a phone home screen and in search results before you download. Free and private — nothing is uploaded.
One to three letters work best. You’ll pick the font, colours and shape next.
Pick an emoji, or type any emoji in the editor.
How to create a favicon
Drop your logo (SVG gives the sharpest result), or make an icon from letters or an emoji.
Pick a shape, background and padding, then see it in light and dark browser tabs, on iPhone and Android home screens and in a search result.
Unzip the files into your website root and paste the HTML tags into your page’s <head> — the tags match the files exactly.
What’s in the download
| File | Size | Used for |
|---|---|---|
favicon.ico | 16, 32, 48 px | Browser tabs, bookmarks, Windows and older browsers |
icon.svg | Vector | Modern browsers, sharp at any size (when you start from an SVG) |
apple-touch-icon.png | 180 × 180 | iPhone and iPad home screens |
icon-192.png, icon-512.png | 192, 512 px | Android home screen and installable web apps |
icon-maskable-512.png | 512 px | Android adaptive icons (round, squircle) without clipping |
site.webmanifest | — | App name, colours and icon list for Android and PWAs |
Why this favicon generator
Frequently asked questions
What files does a website need for its favicon?
Today a complete set is small: favicon.ico (16, 32 and 48 px inside one file) for browser tabs, an SVG icon if your logo is a vector, a 180 × 180 apple-touch-icon.png for iPhone and iPad home screens, and 192 and 512 px PNGs listed in a site.webmanifest for Android and installable web apps. This generator creates all of them, plus the HTML tags to paste.
How do I add the favicon to my website?
Unzip the download into your site’s root folder (next to index.html) and paste the generated <link> tags into the <head> of every page. On WordPress you can instead upload the 512 px PNG under Appearance → Customize → Site Identity → Site Icon.
Can I make a favicon from text or an emoji?
Yes. Choose Text to make a letter or initials icon with your own font, colours and shape, or Emoji to turn any emoji into a favicon. Both are drawn in your browser, so they look the same everywhere once downloaded.
My logo is not square — will it be stretched?
No. Choose Fit to keep the whole logo with space around it, or Crop to fill the square from the centre. Padding and shape (square, rounded or circle) are adjustable too.
Why does my favicon look blurry at 16 × 16?
Detailed logos lose detail at tiny sizes. Check the 16 px and 32 px previews: simplify to a single letter or symbol, increase the size by reducing padding, or use a bolder version of your mark.
Why does the Apple touch icon have a background?
iPhones show transparent areas as black on the home screen, so the Apple icon always gets a solid background — the colour you choose, or white. Android’s maskable icon also keeps a safe margin so it isn’t clipped by round or squircle masks.
Is my image uploaded anywhere?
No. Everything is generated in your browser — your logo never leaves your device, and there’s no signup or watermark.