Free favicon generator

Source

Weight

Style

Shape

Preview

16 px
32 px
48 px
180 px
192 px
512 px

Includes favicon.ico (16, 32 and 48 px), PNGs at 16, 32, 180 (Apple), 192 and 512 (Android) and site.webmanifest.

Code to paste into the <head> of your site

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

Put the ZIP files at the root of your site, then paste this code.

Everything is generated in your browser: your logo is never uploaded.

How to use this calculator?

1. Choose a source: one or two letters (or an emoji), or your logo
2. Adjust the shape, colors and padding while watching the preview
3. Download the ZIP pack with every size
4. Put the files at the root of your site and paste the HTML code into the <head>

Quick answer

Which favicon sizes do you need?

Plan a favicon.ico containing 16, 32 and 48 px for browsers, a 180 × 180 px Apple touch icon for iPhone and iPad, and 192 and 512 px PNGs for Android and installable apps. Example: put the pack at the root (yoursite.com/favicon.ico) and paste the 5 lines of code into the <head>.

FileSizeUsed by
favicon.ico16, 32, 48 pxTabs, bookmarks, Google
favicon-32x32.png32 pxRecent browsers
apple-touch-icon.png180 pxiPhone, iPad
android-chrome-192x192.png192 pxAndroid
android-chrome-512x512.png512 pxSplash screen, PWA

About the Favicon Generator

What is it?

The favicon generator creates the small icon shown in browser tabs, bookmarks and on phone home screens. Start from an initial, an acronym, an emoji or your logo, adjust the shape and colors, then download a pack that is ready to install.

Why use it?

A site without a favicon shows a generic icon: it looks less professional and is hard to spot among dozens of tabs. Google also shows the favicon next to your site in mobile search results, which helps catch the eye and build trust.

How does it work?

Each size is drawn directly at its own resolution (16, 32, 48, 180, 192 and 512 px) so it stays sharp, instead of being scaled down from one large image. The favicon.ico file bundles the 16, 32 and 48 px sizes as PNG images inside, a format every browser recognizes. The Apple icon is always an opaque square, because iOS rounds the corners itself. Everything is computed in your browser.

Usage tips

  • Keep it simple: at 16 px, one or two bold letters read much better than a detailed logo
  • Pick a strong contrast between text and background so the icon stays visible in both light and dark mode
  • For a logo, start from a square version or the symbol alone, without the brand name
  • Clear the cache or test in a private window if the old favicon still shows after going live
  • Google asks for a square favicon of at least 48 px, available at the address given in the HTML code
Embed this tool on your websiteFreeCopy this code into your website or blog: the tool shows up right on your page, free and without sign-up.All embeddable tools

Related tools