logoredraws.com

How to Add an Icon to Your Website Title in HTML: Favicon Setup, Safe Areas and Padding

Add or change the icon beside your page title in HTML with a favicon link tag, and adapt your logo with the right padding and safe areas for tabs and home screens.

Published

Contents
  1. The short answer
  2. Before you start
  3. Adapting the logo: safe areas and padding
  4. Step by step: export the files and add them to HTML
  5. Optional: a favicon that adapts to dark mode
  6. How to change an existing website icon
  7. Completion check
  8. Choosing by situation
  9. Gaps in this guide

The short answer

The small icon that appears next to your page title in a browser tab is called a favicon. You do not place it inside the <title> element, because that element accepts only text. Instead, add a <link rel="icon"> tag inside the page's <head> and point it at an image file. To change the website icon later, replace that file or update the tag's href, then clear the browser's cached copy.

<head>
  <title>My Website</title>
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>

Scope: this guide covers the tab icon and the related bookmark, home-screen and app icons, plus how to adapt a logo mark so it stays legible inside those small squares. No specific brand logo or measured rendering data was supplied, so the examples are generic. Adding an emoji to the title text is a separate technique: it is still text, and its appearance depends on the system's emoji font rather than on your logo artwork.

Before you start

  • Access to the HTML <head>, or to the template or CMS setting that writes it.
  • A square-friendly version of the logo, such as a symbol, monogram or single letter, ideally as true vector artwork.
  • Confirmation that you are allowed to use the logo this way.
  • An editor or export tool that can produce SVG and PNG files, plus a way to create an ICO file if you need legacy support.

Two cautions about the source file. First, an .svg extension does not prove the artwork is vector. Open the file in a text editor: shapes defined with path, circle or polygon elements are vector, while an embedded image element usually means a bitmap wrapped in SVG, which will not scale cleanly. Second, finding a logo online does not grant permission to reuse it. Use artwork you own or are licensed to use.

Adapting the logo: safe areas and padding

Two terms matter here. Padding is the empty space between the artwork and the edge of the icon canvas. A safe area is the region that is guaranteed to stay visible after a platform crops, rounds or masks the icon. Different places that display your icon treat these differently, so a single file rarely suits every context.

  • Browser tab icon: it displays very small, so heavy padding shrinks the mark into an unreadable dot. Let the mark fill most of the square, leaving only a slight margin so edge strokes are not softened or clipped when the icon is scaled down.
  • Apple touch icon (home screen and some bookmark views): iOS rounds the corners, so keep important detail away from them. Use an opaque background, because you do not control how transparent areas are displayed.
  • Maskable app icon (web app manifest): the platform may crop the icon to a circle, rounded square or another shape. The Web App Manifest specification describes a safe zone as a centered circle whose radius is 40 percent of the icon's width. Verify this against the current specification, keep the whole mark inside that zone, and fill the rest of the canvas with background color.

Simplification matters as much as padding. Full wordmarks rarely survive at tab size, so use the logo's symbol or initial. Thicken hairline strokes, reduce the number of colors, and remove fine interior detail. Check that the shape still reads against both light and dark browser toolbars. These recommendations are editorial guidance for small-size legibility, not documented rules from any single platform.

Step by step: export the files and add them to HTML

  • 1. Create a square artboard and center the simplified mark.
  • 2. Build the tab version: the mark fills most of the canvas, on a transparent or solid background.
  • 3. Export it as SVG. Remove editor metadata and keep a square viewBox.
  • 4. Export PNG fallbacks at the sizes you plan to reference, and inspect each one at its actual pixel size rather than zoomed in.
  • 5. Create a favicon.ico for older browsers. A single ICO file can bundle several sizes, commonly 16×16 and 32×32.
  • 6. Create a 180×180 PNG apple touch icon with an opaque background and extra padding so the corner rounding does not cut into the mark.
  • 7. If the site is an installable web app, export 192×192 and 512×512 PNGs for the manifest, plus a maskable version with the mark inside the safe zone.
  • 8. Upload the files and add the tags below to the <head> of every page, or to the shared template.
<head>
  <title>My Website</title>
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
</head>

The sizes and type attributes help browsers choose the best candidate: browsers that support SVG favicons can use the vector file, while others fall back to the ICO. SVG favicon support varies by browser and version, so confirm current support before relying on SVG alone, and keep the ICO or a PNG as a fallback. The manifest line is only needed for installable web apps.

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Optional: a favicon that adapts to dark mode

An SVG favicon can carry its own style rules, including a prefers-color-scheme media query, so a dark mark can switch to a light one on dark toolbars. Support for this inside favicons depends on the browser, so test it in the browsers your audience uses and keep a fallback that reads acceptably on both backgrounds.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

The xmlns value in that snippet is the standard SVG namespace identifier, not a link to visit. The square path is a placeholder; replace it with your logo's paths.

How to change an existing website icon

  • Replace the image files, or point the link tags at new files.
  • Rename the files or add a version string to the href, such as favicon.svg?v=2. Browsers cache favicons aggressively, and a changed filename forces a fresh download.
  • Replace favicon.ico at the site root as well. Browsers may request that file automatically even when no link tag points to it.
  • Check your CMS or theme settings. Some platforms have a site icon setting that outputs its own tags, which can override or duplicate what you add by hand.
  • Search the rendered page source for every rel="icon" and rel="apple-touch-icon" tag and remove any outdated duplicates.

Completion check

  • Open the site in a fresh private window and confirm the new icon appears next to the page title in the tab.
  • In the browser's developer tools, open the Network panel, reload, and confirm the icon request returns a successful status for the file you expect.
  • View the tab on both light and dark browser themes and confirm the mark is readable at actual size.
  • Bookmark the page and check the bookmark icon.
  • On an iPhone or iPad, add the site to the home screen and confirm the corners do not clip the mark.
  • For web apps, use the manifest view in developer tools, where available, to preview the icons and check that the maskable icon keeps the mark inside the safe zone.

Choosing by situation

Situation | Files to provide | Padding approach
Simple website, tab icon only | favicon.ico, optionally favicon.svg | Minimal padding; the mark fills most of the square
Site visitors save to iOS home screens | Add a 180×180 apple touch icon | Opaque background; extra margin clear of the rounded corners
Installable web app | Add manifest icons at 192 and 512, plus a maskable icon | Mark inside the central safe zone; background extends to the edges
Brand needs dark-mode legibility | SVG favicon with a color-scheme media query, plus fallback | Same as tab icon; test contrast on both themes

Gaps in this guide

No subject-specific evidence was supplied: no particular logo, no browser support table and no measured rendering tests. The version-dependent points, including SVG favicon support, dark-mode queries inside favicons and the exact masking behavior of each platform, should be checked against current browser and specification documentation before you rely on them.