How to use the Favicon Generator
- Choose From an image and drop your logo, or From text or emoji and type one or two characters.
- Pick a shape, background color (or transparency) and padding, and check the previews at real size.
- Enter your site name and theme color for the web manifest.
- Click Download favicon package, upload the files to your site’s root folder and paste the HTML into your page’s
<head>.
Features
- Real multi-size favicon.ico with 16, 32 and 48 px images
- PNG favicons plus Apple touch and Android icons
- Create icons from a logo, letters or an emoji
- Square, rounded or circle shapes with custom colors
- Ready-made site.webmanifest and HTML link tags
- Everything in one ZIP, generated on your device
What a favicon is and where it appears
A favicon is the small icon that represents your website. Browsers show it in tabs, bookmarks and history; phones use larger versions when someone adds your site to the home screen; and search engines can display it next to your pages in results. A missing favicon makes a site look unfinished, and browsers that request /favicon.ico automatically will log a 404 error every time.
The files in the package
| File | Why you need it |
|---|---|
| favicon.ico | The classic format, holding 16, 32 and 48 pixel images in one file. Browsers look for it at the root of your site even without a link tag. |
| favicon-16x16.png, favicon-32x32.png | Crisp PNG icons for tabs on standard and high-density screens. |
| favicon-48x48.png | A larger size used for shortcuts and by search engines, which ask for icons that are multiples of 48 pixels. |
| apple-touch-icon.png (180 × 180) | Used when an iPhone or iPad user adds your site to the home screen. |
| android-chrome 192 and 512 | Home screen and install icons on Android, referenced from the manifest. |
| site.webmanifest | A small JSON file with your site's name, icons and colors, used when the site is installed like an app. |
How the ICO file is built
An ICO file is a container: a 6-byte header, a 16-byte directory entry for each image (width, height, color depth, size and position), then the images themselves. Since Windows Vista, those images may be stored as complete PNG files, which every modern browser understands. This generator draws each size separately from your source, so the 16-pixel icon is sharpened for 16 pixels rather than shrunk from the 512-pixel one, and then writes the container byte by byte in your browser.
Designing an icon that works at 16 pixels
- Simplify. A full logo with a tagline becomes mush at 16 × 16. Use the symbol alone, or one or two letters.
- Use strong contrast. Tabs can be light or dark depending on the user's theme, so a solid background shape is the safest way to stay visible.
- Avoid thin lines. Strokes thinner than about one twentieth of the icon disappear at small sizes.
- Check the previews. The tab mock-up above shows your icon at real size. If you cannot recognize it there, simplify further.
Emoji make quick, friendly favicons. They are drawn with your device's emoji font, so the picture in the files matches what you see here even though other systems style emoji differently.
Why the Apple icon has a solid background
iOS rounds the corners of home-screen icons itself and displays transparent areas as black. The apple-touch-icon is therefore always a full square: if you chose a transparent background, it is filled with white, and your shape and padding apply to the other icons only.
Installing your favicon
- Unzip the package and upload every file to the root folder of your site, next to your home page.
- Paste the HTML snippet inside the
<head>of every page (or your site template). - If your site lives in a subfolder, change the leading
/in each path to that folder. - Reload with the cache cleared. Browsers cache favicons stubbornly, so a private window is the quickest way to see the new one.
Need just a resized logo? Try the Image Resizer, or turn an SVG logo into a large PNG first with SVG to PNG.
Frequently asked questions
Which favicon sizes do I need?
For broad support: a favicon.ico with 16, 32 and 48 pixel images, 16 and 32 pixel PNGs, a 180 pixel Apple touch icon and 192 and 512 pixel icons for Android. The package includes all of them.
Is the favicon.ico a real ICO file?
Yes. It is a genuine multi-size ICO container holding 16, 32 and 48 pixel images stored as PNG data, which all modern browsers and Windows support.
Why is my new favicon not showing?
Browsers cache favicons aggressively. Check the files are at your site root and the HTML is in the head, then open the site in a private window or clear the browser cache.
Can I make a favicon from an emoji?
Yes. Choose From text or emoji, type the emoji and pick a background. It is drawn with your device’s emoji font.
Are my logo files uploaded?
No. All icons, the ICO file and the ZIP are generated by your browser on your device.