Favicons
Overview
A Favicon (short for 'Favorite Icon') is the tiny logo that appears on your browser tab, next to the page title. It also shows up when a user saves your website as a bookmark or adds it to their phone's home screen.
Without a favicon, the browser just shows a generic boring globe icon. Adding a favicon is the easiest way to make your website look instantly professional.
Syntax
You add a favicon by placing a `<link>` tag inside the `<head>` of your HTML document. The `rel` (relationship) attribute must be set to `icon`.
<head>
<title>My Cool Website</title>
<!-- Linking the favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>In the old days, you had to use `.ico` files. Today, all modern browsers support high-quality `.png` files, which look much better.
<head>
<!-- Using a high-res PNG for modern browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
</head>When iPhone users 'Add to Home Screen', Apple doesn't use the standard favicon. You need to provide a specific, high-resolution icon for iOS devices.
<head>
<!-- Specifically for iPhones and iPads -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
</head>Common Pitfalls
- If you forget to add a favicon, the browser will constantly ask your server for '/favicon.ico' in the background, resulting in a permanent '404 Not Found' error in your server logs.
Real-World Example
The ultimate, bulletproof favicon setup for modern web apps:
<head>
<!-- Standard icon for most browsers -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- Scalable Vector Graphic (SVG) for perfect sharpness -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<!-- For iOS home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Android Web App Manifest -->
<link rel="manifest" href="/manifest.webmanifest">
</head>