How to create a favicon for your website
- Choose Text / emoji and type up to four characters or tap an emoji, or switch to Image and drop your logo.
- Pick the shape (square, rounded or circle), background color or transparency, font, text color and size.
- Check the live previews at 16 to 512 pixels and the browser tab mockup.
- Enter your app name, download the favicon package ZIP, and paste the copied HTML into your page's head.
What you can do with Favicon Generator
- Real multi-size ICO
- favicon.ico contains 16, 32 and 48 pixel images in one file, so browsers and Windows pick the sharpest size.
- Complete package
- The ZIP includes PNG favicons, a 180 px Apple touch icon, 192 and 512 px Android icons, site.webmanifest and an HTML snippet.
- Text, emoji or logo
- Make an icon from a letter in five fonts, from an emoji, or from your own PNG, JPG or SVG logo with adjustable padding.
- Shapes and colors
- Square, rounded or circle shapes, any background color or a transparent background, plus text color, size and bold controls.
- Browser tab preview
- See your icon in a mock browser tab next to your site name, plus previews at every exported size.
- Copy-paste HTML
- Get ready-made link and meta tags for the ICO, PNGs, Apple touch icon, manifest and theme color.
Favicon sizes and files every website needs
A modern favicon setup covers a few targets. Browsers request /favicon.ico and use the 16 and 32 pixel sizes in tabs and bookmarks. iPhones and iPads use a 180 × 180 apple-touch-icon.png when someone adds your site to the home screen, and iOS ignores transparency there, which is why this generator always exports that file on a solid square background. Android and installable web apps read site.webmanifest, which points to 192 and 512 pixel PNG icons and sets the theme color used in the browser UI.
At 16 pixels there is room for very little detail, so the most legible favicons are a single bold letter, a simple symbol or an emoji on a high-contrast background. Detailed logos often turn into a smudge; if yours does, try the Image mode with a simplified mark and some padding. After downloading, put all files in your site's root folder so the paths in the snippet resolve, then paste the tags inside head. Browsers cache favicons aggressively, so a hard refresh or private window may be needed to see the change.
Frequently asked questions
Is my logo uploaded to create the favicon?
No. Your logo is drawn on a canvas in your browser, and the ICO, PNG files and ZIP are all assembled on your device with JavaScript. Nothing is sent to a server, so unreleased brand assets stay private.
What sizes are included in the favicon package?
favicon.ico with 16, 32 and 48 pixel layers; favicon-16x16, 32x32 and 48x48 PNGs; a 180 × 180 apple-touch-icon.png; android-chrome 192 × 192 and 512 × 512 PNGs; site.webmanifest; and head-snippet.html with the matching tags.
Can I make a favicon from an emoji?
Yes. Stay in Text / emoji mode and tap one of the suggested emoji or type or paste any emoji into the text field. It is drawn with your system's emoji font, so the style matches the device you generate it on. Set a background color or choose transparent.
Where do I put the favicon files on my website?
Unzip the package into your site's root folder, the same place as your homepage, so favicon.ico is reachable at /favicon.ico. Then paste the copied HTML tags inside the head of every page or your layout template. If you use a subfolder, update the paths in the tags.
Can I convert a PNG to ICO with this?
Yes. Switch to Image, drop your PNG (square images work best), set padding to 0 and shape to square if you want it unchanged, then click favicon.ico only. You get a real ICO file containing 16, 32 and 48 pixel versions.