How to Add a Favicon to an HTML Website

To add a favicon to an HTML website, place an icon file in your site's files and reference it with a link element inside the page's head section, for example: <link rel="icon" href="favicon.svg" type="image/svg+xml">. The browser reads that tag and shows the image in the tab, bookmarks and history. The technical step is one line of markup. Most of the work is preparing logo artwork that stays legible when it is reduced to a tiny square.

Key Terms

• Favicon: the small icon a browser shows for a site, mainly in tabs, bookmarks and address-bar suggestions.
• Vector artwork: a logo built from mathematically defined paths rather than pixels, so it can be scaled without losing sharpness. Common source formats include SVG, AI and EPS. A file extension alone does not prove that the file contains only vector data, that it is editable, or that you have permission to reuse the logo.
• Raster export: a pixel-based version, such as PNG or ICO, rendered from the vector source at a fixed size.
• Safe area: the inner region of the icon canvas where essential artwork should sit so that it is not cropped or crowded by rounded corners, masks or neighboring interface elements.
• Padding: the empty space between the artwork and the edge of the canvas.

Before You Start

• A vector source of the logo, or a mark simplified specifically for small sizes. A full wordmark rarely reads at tab size, so a symbol, monogram or single letter usually works better.
• Confirmation that you have the right to use the logo on the site.
• A vector editor that can export SVG and PNG.
• Access to your site's HTML files and the folder where they are published.

Step 1: Prepare the Artwork on a Square Canvas

Favicons are displayed in square slots. Create a square artboard and center the mark on it. If the logo is wide or tall, use only the part that identifies the brand instead of shrinking the whole lockup until it becomes a smudge.

• Convert live text to outlines, also called curves or paths, so that the letterforms do not depend on fonts installed on the viewer's device. Keep an editable copy with live text for future changes.
• Expand or outline strokes so line weights stay fixed when the artwork is scaled.
• Merge overlapping shapes and remove hidden or stray anchor points to keep the paths clean and the SVG small.
• Remove fine details, thin hairlines, small counters and taglines that will disappear at small sizes.
• Increase contrast between the mark and its background. Subtle tints often merge into one color at tab size.

Step 2: Set Safe Areas and Padding

Padding requirements depend on where the icon will appear. The supplied evidence does not include a single verified padding value for every context. Treat the guidance below as design recommendations unless it is marked as a documented requirement.

• Browser tab icon: tabs offer very little space. Use minimal padding and let the mark fill most of the square so that it stays legible. Too much padding makes the icon look smaller than icons from neighboring tabs.
• Home-screen icons on mobile devices: operating systems may round the corners or apply other masks. Keep essential artwork away from the edges, and use an opaque background, because some platforms fill transparent areas with a color you did not choose.
• Maskable icons for installable web apps: the Web App Manifest specification defines a safe zone for maskable icons as a centered circle with a radius of 40% of the icon's width. Keep all essential artwork inside that circle and extend the background color to the edges. Check the current specification before you finalize this artwork, because platform guidance can change.
• Optical balance: center the mark by eye as well as by measurement. Shapes such as triangles or letters with heavy bottoms can look off-center even when they are mathematically centered.

Because the right amount of padding varies, the most reliable method is to make separate artboards for the tab icon and the home-screen or app icon instead of forcing one layout to cover every case.

Step 3: Export the Files

Export commands and option names differ between vector applications and between versions of the same application. Check the export dialog in the version you use. The table describes the outputs that are commonly used and why each one exists.

File | Purpose | Notes

favicon.svg | Scalable icon for browsers that support SVG favicons | Export with text outlined. Remove editor metadata if your tool offers that option. Browser support varies, so also include a raster fallback.

favicon.ico | Fallback for older browsers and tools that request this file by default | An ICO file can contain several pixel sizes. 16×16 and 32×32 are the conventional sizes.

apple-touch-icon.png | Icon used when an iOS user adds the site to the home screen | Apple documents 180×180 pixels for this icon. Use an opaque background.

PNG icons for a web app manifest | Icons for installable web apps on Android and desktop | 192×192 and 512×512 are commonly requested. Only needed if the site uses a manifest.

When you export small PNGs, preview them at actual size. If edges look blurry at 16 or 32 pixels, align key horizontal and vertical edges to the pixel grid in a copy of the artwork, or draw a simplified version made for that size.

Step 4: Add the HTML Tags

Put the files in your site's folder. Placing favicon.ico at the site root is common practice, because many browsers request a file with that name at the root when no tag is present. Then add the link elements inside the head section of every page, or inside the shared template or layout file if your site uses one.

<head>
  <meta charset="utf-8">
  <title>Your Site</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">
</head>

The ICO line provides a fallback for browsers without SVG support. The SVG line serves browsers that support SVG favicons. The apple-touch-icon line covers iOS home screens. The paths assume the files sit at the site root. Adjust them if your files are stored in another folder. If you only need a basic tab icon, a single PNG with rel="icon" and type="image/png" also works.

Optional dark-mode handling: an SVG favicon can include a CSS media query for prefers-color-scheme inside the file, which lets the icon switch colors when the system theme changes. Browser support for this technique is inconsistent. Make sure the default colors stay legible on both light and dark tab bars.

Step 5: Confirm the Result

• Open the page and check the tab. Browsers cache favicons aggressively, so if the old icon or a blank icon still appears, do a hard refresh, open the page in a private window, or clear the cache.
• Open the browser's developer tools, go to the Network tab and reload the page. Each icon file should load successfully without a 404 error.
• Open each icon file directly in the browser to confirm that the path is correct and the file is not corrupted.
• View the page source to confirm that the link tags are inside the head section and not inside the body.
• Compare the tab against other tabs in both light and dark browser themes. The mark should be recognizable and should not look noticeably smaller or heavier than icons from other sites.
• If you added an apple-touch-icon or manifest icons, test them on a real device by adding the site to the home screen. Check that no essential artwork is cropped by the corner mask.

Common Problems

• The icon does not update: this is usually caused by caching. Renaming the file, or adding a version query to the href value, forces browsers to fetch the new file.
• The icon looks blurry: the raster export was scaled down from a large size without pixel-level adjustment. Export a version simplified for the small size.
• Text in the SVG renders in the wrong font: live text was not converted to outlines before export.
• The icon looks tiny in the tab: there is too much padding. Reduce the margin on the tab-icon artboard.
• Corners are clipped on a phone home screen: the artwork sits outside the safe area. Move essential elements inward and fill the background to the edges.