What is a Favicon and Why Does Your Website Need One?
That tiny icon in your browser tab is doing more work than you think. Here's what it is, why it matters, and how to create one.
What is a favicon?
A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, and browser history next to your website's name. It's typically 16×16 or 32×32 pixels.
You've seen them everywhere — the blue "f" for Facebook, the red play button for YouTube. Without a favicon, browsers show a generic default icon, which looks unprofessional and makes your site harder to identify in a sea of open tabs.
Why favicons matter
- Brand recognition. Users with multiple tabs open will find your site faster if it has a distinctive, recognizable favicon.
- Professionalism. A missing favicon immediately signals an unfinished or low-quality website.
- Bookmarks. When someone bookmarks your site, your favicon appears next to it — free brand exposure every time they open their bookmark bar.
- Home screen icons. When users add your site to their mobile home screen, the favicon becomes the app icon.
- Search results. Google sometimes shows favicons next to search results, making your listing more clickable.
What favicon sizes do you need?
The frustrating reality is that different devices and contexts need different favicon sizes. Here's the complete list:
| Size | Use |
|---|---|
| 16×16 | Browser tab (standard) |
| 32×32 | Browser tab (retina), taskbar |
| 48×48 | Windows site icons |
| 64×64 | Windows site icons (high DPI) |
| 96×96 | Google TV |
| 128×128 | Chrome Web Store |
| 180×180 | Apple touch icon (iPhone, iPad) |
| 192×192 | Android home screen |
| 512×512 | Android splash screen, PWA |
That's a lot of sizes to generate manually. Fortunately, you can generate all of them at once from a single high-resolution source image.
How to create a favicon
The best approach is to start with a high-resolution version of your logo or icon (at least 512×512 pixels) and generate all the required sizes from it.
- Start with a square image of your logo or icon at 512×512px or larger
- Use the Favicon Generator tool to generate all sizes at once
- Download the ZIP file containing all favicon sizes
- Place the favicon files in your website's root directory
- Add the provided HTML snippet to your
<head>tag
Adding favicons to your HTML
Once you've generated your favicons, add these lines to your HTML <head>:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
PixelTools' Favicon Generator automatically creates this HTML snippet and includes it in the downloaded ZIP file.
Generate all your favicon sizes in one click
Upload one image, download all sizes as a ZIP — free and instant.
Try Favicon Generator →