Shiklo Tools
PDF40
Image20
Calculators & Converters25
Text & Writing13
Developer26
Video14
Audio14
Document14
Data & Spreadsheet12
Web & SEO9
OCR & Scanning5
Archive & File12
Security & Privacy23
Health & Medical29
QR & Barcode5

Favicon Generator

Create a complete favicon set from an image, text or emoji: favicon.ico, PNG icons, Apple touch icon, Android and maskable icons, manifest.

A favicon is the small icon in the browser tab, in bookmarks, on phone home screens and in search results. The Favicon Generator makes the whole set in one go. Start from your logo or any picture, which you crop to a square, from one to three letters in a font and colour of your choice, or from an emoji. Pick a background colour, a square, rounded or circular shape and some padding, and see live previews at real sizes.

Download a ZIP with favicon.ico (containing 16, 32 and 48 pixel images), PNG favicons, the 180 pixel Apple touch icon, 192 and 512 pixel icons for Android and installable web apps, a maskable icon, a ready site.webmanifest and the HTML to paste into your page. Everything is created in your browser.

How to use Favicon Generator

  1. Choose the source: an image, text or an emoji.
  2. For an image, crop it to a square; for text, type up to three letters and pick font and colours.
  3. Choose the background, shape and padding, and check the previews.
  4. Enter your site name, download the ZIP, upload the files to your site and paste the HTML.

Features

  • From an image (cropped to a square), 1–3 letters or an emoji.
  • favicon.ico with 16 × 16, 32 × 32 and 48 × 48 images inside.
  • PNG favicons (16, 32), Apple touch icon (180), Android / PWA icons (192, 512).
  • Maskable 512 px icon with the content inside the safe zone.
  • site.webmanifest and the HTML link tags, ready to paste.
  • Square, rounded or circle shape; background colour or transparent.
  • Live previews in a browser tab and on a home screen.
  • Private: everything is made in your browser.

Which files you get and what they are for

Different browsers and devices look for different files. The package covers all current ones without unnecessary extras.

FileSizeUsed by
favicon.ico16, 32 and 48 pxEvery browser, Google search results, old browsers
favicon-32x32.png and favicon-16x16.png32 and 16 pxBrowser tabs and bookmarks
apple-touch-icon.png180 pxiPhone and iPad home screens
android-chrome-192x192.png and 512x512192 and 512 pxAndroid home screens, installed web apps
maskable-icon-512x512.png512 pxAndroid adaptive icon shapes
site.webmanifesttextApp name, colours and icon list for installation

Installing the favicon

Upload all files to your website, normally to the root folder so that favicon.ico is reachable at yoursite.com/favicon.ico, where browsers and Google look for it. Then paste the HTML from the package into the head section of every page, or into your site builder's custom code setting. If you put the files in a subfolder, enter its path in Folder on your site before downloading, and the HTML and manifest will point there. Browsers cache favicons for a long time, so a new icon may only appear after clearing the cache or opening a private window.

Designing an icon that works at 16 pixels

A favicon is tiny: a detailed logo becomes a blur at 16 × 16 pixels. Use the simplest form of your brand, such as a symbol or one or two letters, with strong contrast between foreground and background. Keep some padding so the shape doesn't touch the edges, check the 16 px preview at actual size, and avoid thin lines and small text. For photos, crop tightly to the most recognisable part.

Maskable icons and the Apple touch icon

Android displays home-screen icons in circles, squircles or rounded squares depending on the phone. A maskable icon fills the whole square with the background colour and keeps the important content inside the central circle, the safe zone, so nothing is cut off; the generator adds at least 10% padding on each side for it. The Apple touch icon always has a solid background, because iOS shows transparent areas as black, and iOS rounds the corners itself.

Frequently asked questions

How do I make a favicon from my logo?

Choose An image, select your logo, crop it to a square, pick a background and padding, and download the package.

What size should a favicon be?

Several sizes: 16 and 32 px for browser tabs, 48 px inside favicon.ico, 180 px for Apple devices and 192 and 512 px for Android. The package contains all of them.

Do I still need favicon.ico?

Yes, it is still the most compatible format and Google Search uses it. Modern browsers also use the PNG files.

Can I use an emoji as a favicon?

Yes. Choose An emoji and type or paste it. Emoji look slightly different on Windows, macOS and Android.

Why doesn't my new favicon show?

Browsers cache favicons. Check the files are uploaded to the right folder, then reload with a cleared cache or a private window.

Is the favicon generator free?

Yes. It is free, needs no sign-up, and your images are never uploaded.

What is site.webmanifest?

A small file that tells phones the app name, colours and icons to use when someone adds your site to the home screen.

Related tools