Topic 35 of 57 6. HTML Head Elements Interactive Tutorial

HTML Favicon: How to Add a Favicon, Sizes, and Formats

11 mins read Last updated: 12 Nov 2026 14,500 views

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

How do you add, configure, and optimize favicons for desktop browsers, iOS, and Android?

Direct Answer & Overview

A favicon (favorites icon) is the small branding logo displayed on browser tabs, bookmarks, and mobile home screens. It is linked inside the HTML using the tag. Modern best practices use an SVG favicon for infinite scalability, with PNG and ICO fallbacks for legacy compatibility.

Comprehensive Step-by-Step Concepts

1) Purpose of a Favicon: Favicons establish visual brand recognition. Users with 30 open tabs rely on the favicon logo to instantly pinpoint your website. 2) The Evolution of Favicon Formats: - SVG (.svg): Modern industry standard. Infinitely sharp, tiny file size, and supports CSS dark mode media queries (@media (prefers-color-scheme: dark)) inside the SVG file itself! - PNG (.png): High-quality raster icons in 32x32 and 192x192 pixel resolutions. - ICO (.ico): Legacy format containing multi-resolution bitmaps; supported by 100% of browsers back to Internet Explorer. 3) Essential Favicon Declarations: - Modern SVG: - Standard 32x32: - Apple Touch Icon: 4) Web App Manifest for Android: Linking a 'manifest.json' file () provides high-resolution 192x192 and 512x512 icons when users install your Progressive Web App (PWA). 5) Placing favicon.ico in the Root Directory: Even without explicit tags, browsers automatically make a background HTTP request to '/favicon.ico'. Always ensure a physical 'favicon.ico' exists at your root web server directory to prevent 404 error logs.

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modern Favicon Setup</title>
    
    <!-- 1. Modern Scalable SVG Favicon with Dark/Light Support -->
    <link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">
    
    <!-- 2. Standard 32x32 PNG for desktop browsers -->
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
    
    <!-- 3. Apple Touch Icon for iPhone / iPad Home Screens -->
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
    
    <!-- 4. Web Application Manifest for Android PWA -->
    <link rel="manifest" href="/site.webmanifest">
</head>
<body>
    <h1>Modern Favicon Architecture</h1>
    <p>Look at the browser tab above to see the active favicon icon.</p>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Use an SVG favicon with light/dark mode support, provide a 180x180 Apple touch icon, and keep a physical favicon.ico in the server root.

Common Technical & Interview Questions

Q1: Why is an SVG favicon superior to a standard .ico or .png favicon?

A1: SVG is resolution-independent (infinitely sharp on Retina displays), has an extremely small byte payload, and can contain CSS @media queries that automatically change icon colors when the user switches to Dark Mode.

Q2: What is the 'apple-touch-icon' and what dimensions should it have?

A2: It is the high-resolution app icon used by iOS when a user adds a website to their iPhone/iPad home screen. The recommended dimension is 180x180 pixels PNG.

Q3: Why should every website maintain a physical '/favicon.ico' file in the root web folder?

A3: Browsers, feed readers, and automated web scrapers will proactively send requests to 'https://example.com/favicon.ico' by default. If it is missing, your server logs become filled with thousands of unnecessary 404 errors.

All HTML Topics

Previous TopicHTML Meta Tag: Types, Attributes, and SEO Uses

Next TopicHTML Tables: Tags, Structure, and Examples