# How to Add a Favicon in HTML: A Complete Guide A favicon is the small icon that appears in a browser tab, bookmark bar, and sometimes search results next to your site's name. It's a tiny detail that makes your site feel polished and professional — and adding one to your HTML is straightforward once you understand what's involved. ## What Is a Favicon and Why Does It Matter? **Favicon** stands for "favorites icon." It was originally introduced so browsers could display a recognizable image in the bookmarks (favorites) menu. Today it serves a broader purpose: it appears in browser tabs, browser history, pinned tabs, mobile home screen shortcuts, and increasingly in search engine results pages (SERPs). A missing or broken favicon can make a site feel unfinished. More practically, when someone has a dozen tabs open, your favicon is often the only visual identifier for your page. ## The Basic HTML Method 🖼️ The standard way to add a favicon is by placing a ` ` tag inside the `` section of your HTML document. ```html ``` The three key attributes are: - **`rel="icon"`** — tells the browser this link is a favicon - **`type`** — declares the image MIME type (e.g., `image/png`, `image/x-icon`, `image/svg+xml`) - **`href`** — the path to your favicon file The `href` can be a **relative path** (e.g., `favicon.ico`) or an **absolute path** (e.g., `https://yourdomain.com/favicon.ico`). Using a root-relative path like `/favicon.ico` is common practice because it works consistently across all pages regardless of directory depth. ## Favicon File Formats: Which One Should You Use? Different file formats offer different trade-offs, and browser support varies. | Format | Extension | Browser Support | Notes | |---|---|---|---| | ICO | `.ico` | Universal (all browsers, all eras) | Can contain multiple sizes in one file | | PNG | `.png` | All modern browsers | Simple and widely compatible | | SVG | `.svg` | Modern browsers only (not IE, older Edge) | Scales perfectly at any size | | GIF | `.gif` | Most browsers | Animated favicons technically possible but rarely useful | | WebP | `.webp` | Modern Chrome, Edge, Firefox | Not universally supported for favicons | **ICO** was the original format and remains the safest fallback because every browser handles it. **PNG** is the practical standard for most modern projects. **SVG** is increasingly popular because it renders crisply at any resolution, which matters on high-DPI displays. ## Serving Multiple Sizes for Different Contexts Browsers and operating systems request different favicon sizes depending on context. A tab icon, a bookmarked shortcut on an iPhone home screen, and a Windows taskbar pinned site all use different dimensions. You can declare multiple favicon versions in your ``: ```html ``` The `rel="apple-touch-icon"` tag is specifically for iOS devices when a user adds your site to their home screen. Apple devices traditionally ignore standard favicon tags for this purpose. The **web manifest** (`site.webmanifest`) is a JSON file that defines icons for Progressive Web Apps (PWAs) and is used by Android Chrome when adding a site to the home screen. ## Common Mistakes That Break Favicons 🔧 **Wrong file path** — The most frequent issue. If your favicon is in a subfolder (e.g., `/assets/images/favicon.ico`) but your `href` points to `/favicon.ico`, it won't load. **Browser caching** — Browsers aggressively cache favicons. If you update your favicon and don't see the change, try a hard refresh (`Ctrl+Shift+R` on Windows, `Cmd+Shift+R` on Mac) or clear the browser cache manually. **Missing `` placement** — The ` ` tag must be inside the `` element. Placing it in the `` causes browsers to ignore it or behave unpredictably. **File format mismatch** — Declaring `type="image/png"` while pointing to an `.ico` file causes rendering issues in some browsers. Keep the type attribute accurate. **HTTP vs HTTPS** — If your site is served over HTTPS but your favicon URL uses HTTP, browsers may block the request due to mixed content rules. ## Favicon Placement Without HTML Changes Some browsers automatically look for a favicon at `yourdomain.com/favicon.ico` — with no ` ` tag required. This is a legacy behavior and still works in most browsers. However, relying on it alone is not recommended because it limits your control over format, size, and caching behavior. ## Variables That Affect Your Implementation How you add your favicon — and what complexity is appropriate — depends on several factors: - **Project type** — A single-page static site needs just one or two ` ` tags. A PWA or app-like site needs a full manifest with multiple icon sizes. - **Target audience's devices** — Heavy mobile traffic increases the importance of the Apple touch icon and Android manifest icons. - **CMS or framework** — WordPress, Next.js, Nuxt, and other platforms often have built-in favicon management that handles the HTML tags automatically. Manually editing the `` may not be necessary or advisable. - **Browser compatibility requirements** — If your audience includes users on older browsers or Internet Explorer, the `.ico` format with a `rel="shortcut icon"` tag becomes more important. - **High-DPI display support** — If your audience skews toward Retina or high-resolution screens, an SVG favicon or a 2x PNG will look noticeably sharper than a 16x16 pixel PNG scaled up. The right implementation for a small personal blog looks quite different from what a production web application serving multiple device types actually requires. Understanding your deployment context is what determines which of these pieces you actually need.