Skip to content
DayUtils

Favicon Generator – Create favicon.ico and App Icons

Make every icon your website needs from a logo or from one to three letters on a coloured background. Download a ZIP with favicon.ico, 16 and 32 pixel PNGs, an Apple touch icon, Android icons at 192 and 512 pixels and a ready-made web manifest — plus the HTML to paste into your site.

Your files stay on your device

Loading tool…

How to create a favicon

  1. Choose to make it from Letters or An image.
  2. For letters, type one to three characters and pick the shape, text colour and background. For an image, choose your logo — it’s cropped to a centred square.
  3. Enter your site name for the web manifest.
  4. Check the preview at 16, 32, 64 and 128 pixels.
  5. Download the favicon package and copy the HTML.

What’s in the package

FileSizeUsed by
favicon.ico16, 32, 48 pxAll browsers, Windows
favicon-16x16.png, favicon-32x32.png16, 32 pxBrowsers that prefer PNG
apple-touch-icon.png180 pxiPhone and iPad home screens
icon-192.png, icon-512.png192, 512 pxAndroid, installable web apps
site.webmanifest—Android and Chrome app install
favicon-html.txt—The HTML snippet

The HTML to add

Paste these lines inside the head section of your pages:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Designing a good favicon

  • Simplify. At 16 pixels you have room for a letter or a simple shape, not a full logo with a slogan.
  • Use strong contrast between the symbol and the background.
  • Test in light and dark mode browser tabs.
  • Match your brand colours — pick exact codes with the image colour picker.
  • Keep it consistent across your site, app and social profiles.

Favicons in website builders

WordPress (Site Identity → Site Icon), Shopify (Theme settings → Favicon), Squarespace, Wix and Webflow each have a setting where you upload a single square image, usually 512 × 512 pixels — use icon-512.png from the package. For hand-built sites and frameworks such as Next.js, upload all the files to the site root and add the HTML lines.

Dark mode

Browser tabs can be light or dark. A coloured background square or rounded square keeps your favicon visible in both, which is why the letters option includes a background. If you use a transparent logo, check it against both light and dark tabs.

About the ICO file

The favicon.ico in the package contains three PNG images (16, 32 and 48 pixels) stored inside the ICO container, a format supported by all modern browsers and by Windows since Vista. It’s built in your browser — no upload and no external service.

If your logo is an SVG, convert it to a large PNG first with SVG to PNG, then use it here. To embed a tiny icon directly in CSS, try image to Base64.

Frequently asked questions

What is a favicon?

The small icon shown in browser tabs, bookmarks, history and search results next to your site’s name. Phones also use larger versions when someone adds your site to their home screen.

Which favicon sizes do I need?

A favicon.ico with 16, 32 and 48 pixel versions for browsers, a 180 × 180 PNG Apple touch icon for iPhones and iPads, and 192 and 512 pixel PNGs referenced in a web manifest for Android and installable web apps. The package includes all of them.

Where do I put the files?

Upload them to the root of your website (the same folder as your home page) and add the HTML snippet to the head of every page. Many website builders have a favicon setting where you upload one image instead.

What image works best?

A simple square logo or symbol, at least 512 × 512 pixels, with bold shapes. Detailed logos and small text become unreadable at 16 pixels — letters on a coloured background often look sharper.

Why isn’t my new favicon showing?

Browsers cache favicons for a long time. Reload with Ctrl/Cmd + Shift + R, open the site in a private window, or check that favicon.ico loads directly in the browser.

Is my logo uploaded?

No. All icons are drawn and packaged in your browser.

Related tools

Last updated: