How to Add a Favicon to a Bootstrap Website

The short answer

Bootstrap has no favicon feature or setting. A favicon on a Bootstrap site works the same way as on any HTML page. You place one or more link elements inside the head of your HTML document, and each one points to an icon file stored with your site. Bootstrap's CSS and JavaScript control layout and components, not the browser tab icon. It does not matter whether the favicon tags come before or after the Bootstrap stylesheet link.

The harder part is usually the artwork, not the code. A favicon is shown very small, so the logo has to be reduced to a symbol that stays legible at tab size. It then has to be exported in formats that browsers and devices expect.

Key terms

• Favicon: the small icon a browser shows in tabs, bookmarks, history and some search interfaces.
• Vector artwork: an image built from mathematically defined paths (lines and curves between anchor points) rather than pixels, so it can be scaled without losing sharpness.
• Raster artwork: an image made of a fixed grid of pixels, such as PNG. It loses quality when enlarged and can lose detail when reduced.
• SVG: Scalable Vector Graphics, an XML-based vector format that modern browsers can use directly as a favicon.
• ICO: a legacy icon container format that can hold several raster sizes in one file. It is still widely used as a fallback.
• viewBox: the attribute in an SVG file that defines its coordinate area. For a favicon it should describe a square, such as equal width and height values.

Step 1: Choose the right symbol from your logo

A full logo rarely works as a favicon. Wordmarks, taglines and lockups that combine a symbol with text become unreadable at small sizes. Start from the most distinctive standalone element of the identity. Common choices are the brand mark or icon, a monogram or initial, or a simplified crop of a larger emblem.

• Use a square composition. Favicons are displayed in square slots, so wide or tall marks end up tiny unless they are reworked.
• Reduce detail. Remove thin strokes, fine outlines, small counters (the enclosed spaces inside letters), gradients and texture that will merge into noise at small sizes.
• Increase contrast. Strong contrast between the mark and its background holds up better on both light and dark browser themes.
• Convert type to outlines. If the symbol contains a letterform, convert the text to paths in your vector editor so the file does not depend on an installed font.
• Test at real size. Preview the artwork at roughly tab size on screen before exporting. If you cannot recognize it, simplify further.

These are design recommendations, not technical requirements. Browsers will display a detailed icon, but it will look blurred or illegible. Also note that having a logo file in SVG or another vector format does not by itself prove that it contains clean vector paths, that it is editable, or that you have permission to reuse the mark. Confirm usage rights before turning someone else's logo into a site icon.

Step 2: Prepare the icon files

Export from your master vector artwork so every file comes from the same source. A practical modern set covers most browsers and devices without dozens of files:

File | Format | Purpose

favicon.svg | Vector (SVG) | Sharp icon at any size in browsers that support SVG favicons

favicon.ico | Raster container (ICO) | Fallback for older browsers and for tools that request the ICO file by default

apple-touch-icon.png | Raster (PNG) | Icon used when a page is saved to the home screen on Apple devices

• For the SVG, keep the file lean: remove hidden layers, editor metadata and unused definitions, and make sure the viewBox is square.
• For the ICO, include small sizes such as 16×16 and 32×32 pixels. Many generators also add 48×48. At these sizes, hand-adjusting the pixel version often reads better than an automatic downscale.
• For the Apple touch icon, a 180×180 pixel PNG is the commonly used size. Use a solid background, because transparent areas may be filled in by the device.
• If you need an installable web app, a web app manifest with larger PNG icons (often 192×192 and 512×512) is a separate, optional step that is not required for a basic favicon.

Step 3: Add the link tags to your Bootstrap page

Place the icon files in your site's root folder, or in the folder your build tool copies to the output unchanged (often named public or static). Then add the tags to the head of every page, or to the shared layout or template that generates the head:

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

  <!-- Your existing Bootstrap stylesheet link stays here -->
</head>

The sizes="any" attribute on the ICO line is a widely used pattern. It helps browsers that support SVG choose the SVG instead of the ICO. Adjust the href values if your files live in a subfolder. If your pages are served from different directory depths, use a path that resolves from the site root so every page finds the same files.

If you started from a Bootstrap example or a purchased theme, check its head section first. Many templates already include favicon tags that point to placeholder files. Replace those files or edit the existing tags rather than adding a second, conflicting set.

Step 4: Verify the result

• Open each icon file directly in the browser by its path on your site. If one does not load, the path or file location is wrong.
• Open the browser's developer tools, reload the page, and check the Network panel for the favicon requests. Look for failed or not-found responses.
• Inspect the rendered head in the Elements panel to confirm the link tags appear once and point to the intended files.
• Browsers cache favicons aggressively. If the old icon persists, try a hard refresh, a private window or a different browser before assuming the setup is broken.
• Look at the tab on both light and dark browser themes to confirm the symbol remains visible.
• If you added an Apple touch icon, test saving the page to a home screen on an Apple device if one is available.

Limits of this guide

No specific evidence was supplied for this guide, such as measured browser support figures or the requirements of a particular Bootstrap version or theme. The pixel sizes above reflect common conventions, not a complete specification. Browser support for SVG favicons and the exact icon requirements of individual platforms change over time, so check current browser and platform documentation if you need to support a specific device or older browser.