The Complete Favicon Guide: How to Create, Install and Optimize Your Website Icon
A favicon is one of the most underestimated details in web design. Despite being tiny — just 16×16 pixels in the browser tab — it carries enormous weight for any website's visual identity. In this guide, you'll learn everything about this small but powerful icon.
What is a Favicon?
Favicon is short for "favorite icon" and represents the icon that appears in the browser tab next to the page title, in the bookmarks list, in the address bar, and in Google search results. It was introduced by Internet Explorer 5 in 1999 and is now a universal standard across all modern browsers — Chrome, Firefox, Safari, Edge, and Opera.
PNG vs ICO Format — Which One to Use?
ICO Format (.ico)
ICO is the native favicon format. Its main advantage is that a single file can contain multiple resolutions (16×16, 32×32, 48×48), and the operating system automatically picks the best one for each context. It is the most compatible format — working from IE5 to the latest modern browsers.
favicon.ico in the root of your server.PNG Format (.png)
PNG offers real transparency (alpha channel), superior quality at larger sizes, and is the modern recommended format. All modern browsers support PNG as favicons. For Apple and Android devices, PNG is required.
Ideal Sizes by Platform
| Size | Primary Use | Format | HTML Tag |
|---|---|---|---|
| 16×16 | Browser tab, bookmarks bar | ICO / PNG | favicon.ico |
| 32×32 | Retina tab, Windows taskbar | ICO / PNG | icon 32x32 |
| 48×48 | Windows desktop shortcut | ICO | Included in .ico |
| 64×64 | Windows taskbar (high-DPI) | PNG | icon 64x64 |
| 180×180 | Apple Touch Icon (iPhone/iPad) | PNG | apple-touch-icon |
| 192×192 | Android PWA, Chrome | PNG | icon 192x192 |
| 512×512 | PWA splash screen, Google | PNG | icon 512x512 |
How to Install a Favicon in HTML
Paste the code below inside the <head> tag of your HTML:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32"> <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16"> <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"> <link rel="manifest" href="/site.webmanifest">
After adding the tags, upload the files to your server root (usually the public/, www/, or htdocs/ folder).
Recommended file structure
my-project/
└── public/
├── favicon.ico ← server root
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png ← 180×180
├── icon-192x192.png
└── icon-512x512.png
How to Add a Favicon in WordPress
1. Via Customizer: Go to Appearance → Customize → Site Identity → Site Icon. Upload a square image of at least 512×512 px.
2. Via Plugin: Plugins like Favicon by RealFaviconGenerator or All in One Favicon offer more control over all sizes.
Apple Touch Icon and Android PWA
Apple Touch Icon
When a user saves your site to the iPhone or iPad home screen, iOS uses the Apple Touch Icon as the app icon. Recommended size: 180×180 pixels. Without it, iOS takes a screenshot of the page instead — which looks terrible.
Android PWA (site.webmanifest)
{
"name": "My Site",
"icons": [
{ "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"display": "standalone"
}
Favicon and SEO — Impact on Google Search Results
Since 2019, Google has displayed the website favicon directly in search results (SERP) next to the URL. A well-designed favicon increases brand recognition and can indirectly improve click-through rates (CTR) from organic search.
For Google to display your favicon correctly, it must be publicly accessible, at least 48×48 pixels, and not blocked by noindex. Google crawls and indexes favicons periodically.
Frequently Asked Questions about Favicons
Why isn't my favicon showing in the browser?
It's most likely a cache issue. Press Ctrl+Shift+R (or Cmd+Shift+R on Mac) to force a hard reload. If it still doesn't appear, verify that the file was correctly uploaded to the server.
Does a favicon need to be square?
Yes. All browsers and operating systems expect a square icon with equal width and height. Rectangular images will be cropped or distorted. Always use dimensions like 16×16, 32×32, 64×64, etc.
What is the ideal file size for a favicon?
For a favicon.ico containing multiple sizes, aim to stay under 100 KB. For individual PNG files, even a 512×512 should stay below 50 KB to avoid impacting page load performance.
Do I need a favicon for a PWA to work?
Yes. For a site to be installable as a PWA on Android and iOS, icons must be declared in the manifest.json file, including at least the 192×192 and 512×512 sizes.
How long does Google take to update my favicon?
It can take from a few days to several weeks. To speed up the process, submit your URL through Google Search Console and request re-indexing.
Can I use an emoji as a favicon?
Yes, it's possible via inline SVG. However, rendering varies significantly across operating systems (Windows, macOS, Linux). For professional use, always create a custom icon.