Favicon Generator

A favicon is the small icon that represents your website. People see it in browser tabs, bookmarks and history, next to your site in Google search results on mobile and desktop, and as an app-style icon when someone adds your site to their phone’s home screen. In a row of twenty open tabs it is often the only part of your brand anyone sees.

This generator makes every file those places need from one image, from a few letters or from an emoji, and gives you the HTML to add to your site. It all runs in your browser: your logo is not uploaded anywhere.

Older guides list twenty or more icon sizes. Browsers and phones now scale icons themselves, so a small set covers everything:

The Apple touch icon is always saved square with a solid background, whatever shape you choose: iPhones round the corners themselves and show any transparent areas as black.

1. Download the ZIP and unzip it.
2. Upload the files to the root folder of your website, the same folder as your home page, so that yoursite.com/favicon.ico opens the icon.
3. Paste the HTML tags shown with the preview into the <head> of every page, usually in a shared header template.
4. Reload your site. If the old icon still shows, open the page in a private window: browsers cache favicons hard.

• Simplify. A full logo with a wordmark becomes a smudge at 16 px. Use the symbol on its own, or the first letter of your brand.
• Use strong contrast. Tabs can be light or dark. The preview shows both; check your icon is visible on each, and add a background colour if it disappears on one.
• Fill the space. Small icons need to use most of their square. Keep padding low for the tab icon and check the home-screen preview for breathing room.
• Start large. Use a square image of at least 512 × 512 px, or an SVG, so the large icons stay sharp.

Google shows your favicon next to your site name in search results. To be eligible, the icon must be square, linked from your home page with a rel="icon" tag, and crawlable (not blocked in robots.txt). Google recommends icons larger than 48 × 48 px; the .ico made here includes a 48 px version. After you change it, Google can take days to weeks to pick up the new icon.

Need just a single .ico file from an image instead? Use the PNG to ICO or JPG to ICO converter.

• Uploading the files to the wrong folder

  The tags point to the root of your site (/favicon.ico). If you upload into a sub-folder, either move the files or change the paths in the tags.

• Using the full logo with text

  Words are unreadable at tab size. Use the symbol or initial, and keep the full logo for your page header.

• A transparent icon that vanishes in dark mode

  A black logo on a transparent background disappears on a dark tab bar. Add a background colour or a lighter outline.

• Thinking it did not work because of the cache

  Browsers keep old favicons for a long time. Check in a private window or a different browser before changing anything.