How to Add a Favicon to a Bootstrap Website

The short answer

Bootstrap has no favicon feature of its own. A favicon is the small icon a browser shows in tabs, bookmarks and history. You add it to a Bootstrap page the same way you add it to any HTML page: put one or more link elements inside the head of your document, pointing to the icon files. Bootstrap's CSS and JavaScript do not affect how the favicon loads, so the main work is preparing suitable logo artwork and placing the files where the browser can find them.

If your logo is available as vector artwork, an SVG favicon is a sensible primary format. Vector artwork describes shapes as mathematical paths rather than a fixed grid of pixels, so it stays sharp at any display size. A raster fallback such as an ICO or PNG file covers browsers and platforms that do not use SVG icons.

Step 1: Prepare the logo artwork for favicon use

A favicon is displayed very small, so a full logo with a wordmark rarely reads well. A logomark (the symbol part of a logo, without the name) or a single initial usually works better. These are design recommendations, not documented requirements:

• Use a square artboard. In SVG, the viewBox attribute defines the coordinate area the artwork is drawn in; a square viewBox keeps the icon from being stretched or letterboxed.
• Simplify the shapes. Remove fine details, thin strokes and small gaps that will merge or disappear at small sizes.
• Convert text to outlines. Outlining turns live type into paths, so the icon does not depend on a font being available when the browser renders it.
• Keep strong contrast between the mark and its background, and check how it looks on both light and dark browser themes.
• Clean up the file. Export plain SVG without editor metadata, hidden layers, unused definitions or embedded raster images.

Check the contents of the file, not only its name. A file ending in .svg can contain an embedded bitmap, which loses the scaling benefit of vector artwork. Open it in a vector editor or a text editor and confirm it is built from paths and shapes. The extension also says nothing about whether you are allowed to use the logo; confirm you have permission before publishing someone else's mark.

Step 2: Optionally adapt the SVG for dark mode

Because an SVG file can contain CSS, you can include a prefers-color-scheme media query inside it so the icon changes colour when the browser or operating system uses a dark theme. This is optional and only applies to SVG favicons in browsers that support them. A simplified example:

<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>

Replace the placeholder path with your own outlined logo paths and colours. The values shown are illustrative, not a required size or palette.

Step 3: Create fallback files

Export raster versions from the same vector source so every format matches. A typical set is a favicon.ico file for older browsers and tools that request it by default, and a PNG for Apple touch icons, which iOS uses for home screen shortcuts. Exact recommended pixel dimensions are set by browser and platform vendors and can change, so check their current documentation rather than relying on a fixed list. This guide does not include verified size specifications.

Step 4: Add the link tags to your Bootstrap page

Open the HTML file or template that contains your page head. In a standard Bootstrap starter layout, that is the same section that holds the charset and viewport meta tags and the Bootstrap stylesheet link. Add the favicon links there. Their order relative to the Bootstrap stylesheet does not matter.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Site</title>

    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="path/to/bootstrap.min.css">
  </head>
  <body>
    ...
  </body>
</html>

The paths starting with a slash assume the files sit in the root folder of your site. If you place them elsewhere, adjust the href values. If your Bootstrap project uses a build tool or framework, put the icon files in the folder it serves as static assets, often named public or static, so they are copied to the output unchanged and the paths still resolve.

Browser support for SVG favicons has historically been uneven, particularly in some versions of Safari. This guide has no confirmed current support data, so verify support for the browsers your audience uses; the ICO and PNG fallbacks are there to cover the gaps.

Step 5: Verify the result

• Load the page and look at the browser tab. Browsers cache favicons aggressively, so if you see an old icon or none, try a hard refresh, a private window or a different browser.
• Open the browser developer tools, go to the Network panel and reload. Confirm each icon file returns successfully rather than a not-found error.
• Open each icon file directly in the browser by its path to confirm it is published where the link tags expect it.
• View the page source to confirm the link tags appear in the final rendered head, especially if a template, layout file or build step generates it.
• Check the icon on a light and a dark browser theme, and at the small size it actually appears, to judge whether the mark is still recognisable.

If the icon is technically loading but hard to read, the fix is in the artwork rather than the code: simplify the mark further, increase contrast or thicken strokes, then re-export all formats from the updated vector source.