# How to Add an Icon to a Home Page: A Complete Guide for Web Developers Adding an icon to a home page sounds simple, but the term covers several distinct use cases — each with its own technical approach. Whether you're talking about a **favicon**, a **web app manifest icon**, a **shortcut icon for mobile home screens**, or a decorative UI icon embedded in your HTML, the method varies significantly depending on what you're actually trying to achieve. ## What Kind of Icon Are You Adding? Before touching any code, it helps to clarify which type of icon you mean: | Icon Type | Where It Appears | Format | |---|---|---| | **Favicon** | Browser tab, bookmarks bar | `.ico`, `.png`, `.svg` | | **Apple Touch Icon** | iOS home screen shortcut | `.png` (typically 180×180px) | | **Web App Manifest Icon** | Android home screen, PWAs | `.png` (multiple sizes) | | **UI/Inline Icon** | Inside the page itself | SVG, icon font, ` ` tag | Each one serves a different purpose and requires a different implementation path. ## Adding a Favicon to Your Home Page The **favicon** is the small icon that appears in browser tabs and bookmarks. It's declared in the `` section of your HTML: ```html ``` For broader browser compatibility, many developers include multiple formats: ```html ``` **SVG favicons** are increasingly preferred because they scale perfectly at any resolution and support dark mode variations through CSS media queries embedded in the SVG itself. However, older browsers still fall back to `.ico` files, so serving both remains a common best practice. ## Adding a Home Screen Icon for Mobile Devices 📱 When a user "adds a website to their home screen" on a smartphone, the operating system pulls a specific icon — not just the favicon. **For iOS (Apple Touch Icon):** ```html ``` Apple expects a **180×180px PNG** without transparency. If this tag is missing, iOS will generate a screenshot thumbnail instead, which rarely looks intentional. **For Android and Progressive Web Apps (PWAs):** Android uses the **Web App Manifest** — a JSON file linked from your HTML: ```html ``` Inside the manifest file: ```json { "name": "My Site", "icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ] } ``` The two most critical sizes are **192×192px** and **512×512px**. The 512px version is used for splash screens when the PWA launches. ## Adding UI Icons Directly on the Page If you want icons *within* the page content itself — navigation menus, buttons, feature sections — the approach differs again. **SVG icons** are the current standard for inline UI icons. You can embed them directly in HTML for full styling control: ```html ``` **Icon fonts** like Font Awesome remain widely used, especially on sites that need a large library of consistent icons without managing individual SVG files: ```html ``` Icon fonts load as a single file and are easy to style with CSS, but they add HTTP overhead and can cause rendering flashes. **Inline SVGs or SVG sprites** offer better performance and accessibility because each icon can carry its own ` ` injection automatically - **Performance budget** — Icon fonts add weight; inline SVGs add HTML size; external image files add HTTP requests - **Accessibility requirements** — Decorative icons should use `aria-hidden="true"`; functional icons (like a home button) need descriptive `aria-label` attributes - **Brand guidelines** — Some designs require specific color treatments, including dark mode variants ## Common Mistakes Worth Avoiding **Skipping the manifest entirely** is common on sites that aren't positioned as PWAs — but if users do add the site to their home screen, the result will be unpredictable without one. **Using a single image size** for all contexts causes pixelation on high-resolution displays or awkward cropping. Most modern favicon generators produce a full set of sizes automatically from a single source file. **Forgetting cache behavior** — Browsers aggressively cache favicons. After updating an icon, appending a version query string (`favicon.png?v=2`) forces browsers to fetch the new file. The right combination of icon types, file formats, and sizes depends on what your home page is, who visits it, and what experience you're trying to deliver across devices. A developer building a PWA for mobile-first users is solving a meaningfully different problem than someone updating a favicon on a static marketing site — and the setup that makes sense for one rarely maps cleanly onto the other.