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.
