Skip to content
Devtoolry

Favicon Generator

Make a favicon online from an image, letters or an emoji: favicon.ico, PNG sizes, Apple touch icon, Android icons and site.webmanifest in one ZIP. No upload.

Runs in your browser · Nothing uploaded · No sign-up

Something not working, or missing a feature? Send feedback

About the Favicon Generator

The Favicon Generator makes every icon a website needs from one image, a letter or an emoji: a multi-size favicon.ico, 16 and 32 px PNGs, the 180 px Apple touch icon, 192 and 512 px Android icons and a site.webmanifest. Preview them at real size, download everything as a ZIP and paste the ready-made HTML into your <head>. Nothing is uploaded.

Images are processed in your browser with its built-in codecs, so your photos and screenshots are never uploaded.

How to use the Favicon Generator

  1. Choose an image (a square logo of 512 px or more works best), or type one or two letters or an emoji.
  2. Pick a background colour or keep it transparent, and choose a square, rounded or circle shape.
  3. Adjust the padding until the 16 px preview in the browser tab looks clear.
  4. Download all files as a ZIP, put them in your site's root folder and paste the HTML tags into <head>.

What each file is for

FileSizeUsed by
favicon.ico16, 32, 48 pxBrowser tabs, bookmarks, Windows
favicon-16x16.png / favicon-32x32.png16, 32 pxBrowsers that prefer PNG
apple-touch-icon.png180 × 180 pxiPhone and iPad home screens
android-chrome-192x192.png192 × 192 pxAndroid home screen, installed apps
android-chrome-512x512.png512 × 512 pxInstall and splash screens
site.webmanifest—Name, colours and icons of an installable web app

Sources: Google: favicon guidelines, MDN: web app manifest icons

Common mistakes

  • A detailed logo at 16 px. Fine lines and small text disappear in a browser tab. Use a simple mark or the first letter of your brand for the small sizes.
  • Browser caches. Browsers cache favicons for a long time. After replacing one, open /favicon.ico directly and reload it, or test in a private window.

Works well with the Favicon Generator

Frequently asked questions

What size should a favicon be?

Browser tabs show 16 × 16 px (32 × 32 on high-density screens), so favicon.ico holds 16, 32 and 48 px. Apple devices use a 180 px touch icon, and Android and installed web apps use 192 and 512 px icons from the manifest.

Do I still need favicon.ico?

Yes. Browsers and other tools request /favicon.ico by default, even without a link tag. Modern browsers also accept PNG and SVG icons, which the HTML snippet links.

Why does my favicon not show in Google results?

Google needs a crawlable square favicon and recommends one larger than 48 × 48 px. It can take days or weeks to appear after Google recrawls your home page.

How do I add the favicon in Next.js?

In the App Router, put favicon.ico in the app folder and Next.js adds the link tag. Put apple-touch-icon.png, the Android icons and site.webmanifest in the public folder.

Why is the Apple touch icon not transparent?

iOS fills transparent pixels with black and rounds the corners itself, so the generator gives the 180 px icon a solid square background.