How to Create a Favicon for Your Website (Complete Guide)

What Is a Favicon, and Why It Matters

A favicon is the small icon that shows up in a browser tab, bookmarks bar, and browser history next to your site's name. With users routinely juggling a dozen open tabs, a missing or broken favicon makes a site look unfinished and harder to find again — a working one is a small detail that quietly signals a site is legitimate and complete.

The Favicon Size Problem

A "complete" favicon setup isn't one file — different browsers and devices expect different sizes and formats: a classic favicon.ico, 16×16 and 32×32 PNGs for browser tabs, a 180×180 apple-touch-icon for iOS home screens, and 192×192 / 512×512 Android Chrome icons, plus a site.webmanifest file describing them. Producing all of these by hand in an image editor is tedious and easy to get wrong.

Three Ways to Create a Favicon

From an emoji — fast and a little fun; works well for personal projects, side projects, and informal sites.
From an existing logo or image — the right choice once you have a real brand mark you want represented in miniature.
From text or initials — good for personal brands or a company name before a full logo exists.

Generate Your Favicon

Open Favicon Generator.
Pick emoji, image, or text mode.
Customize colors and, for text mode, the font.
Generate and download every standard size plus the site.webmanifest file.

Installing the Favicon on Your Site

Upload all the downloaded files to your website's root directory — the same folder as index.html.
Copy the provided HTML link tags into the <head> section of your pages.
Clear your browser cache (or open an incognito window) if the icon doesn't show up immediately — browsers cache favicons aggressively.

Common Mistakes

Shipping only one size — it may look fine in Chrome but break on iOS home screens or Android.
Skipping the apple-touch-icon — without it, saving your site to an iPhone home screen shows a generic screenshot instead of your icon.
Overly detailed artwork — anything intricate becomes an unreadable smudge at 16×16px; simple, high-contrast shapes hold up best.