How to add favicon to website
Add a favicon with the right HTML link tags: ICO, SVG and PNG options, where the files go, how to change an existing icon and how to check that it worked.
Contents
A favicon is the small icon that browsers show in tabs, bookmarks, history lists and some search and sharing interfaces. You add it by placing one or more icon files on your site and referencing them with link elements inside the HTML head. This guide covers the markup, the file formats, how to adapt a vector logo for tiny sizes, and how to confirm the icon is live.
The short answer
Put your icon files on the server, then add link tags with rel="icon" to the head of every page. A common modern setup pairs a favicon.ico file for broad compatibility with an SVG icon for browsers that support it, plus a PNG touch icon for home-screen shortcuts on Apple devices.
<head>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>A favicon is declared with a link element, not a meta tag. Searches for a "favicon meta tag" usually mean this link markup. Meta tags such as theme-color affect browser chrome colors, but they do not set the icon itself.
What each tag and file does
| File | Tag | Purpose |
| favicon.ico | <link rel="icon" href="/favicon.ico" sizes="any"> | Widest compatibility; one ICO file can contain several raster sizes |
| icon.svg | <link rel="icon" href="/icon.svg" type="image/svg+xml"> | Scalable icon that stays sharp at any display density in browsers that support SVG favicons |
| icon.png | <link rel="icon" href="/icon.png" type="image/png"> | Simple raster alternative if you do not want an ICO file |
| apple-touch-icon.png | <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | Icon used when a page is saved to a home screen on Apple devices |
| manifest.webmanifest | <link rel="manifest" href="/manifest.webmanifest"> | Lists larger icons for installable web apps; optional for ordinary sites |
Older tutorials use rel="shortcut icon" and type="image/x-icon". Browsers still accept that form, but the word "shortcut" is a legacy holdover and is not required; rel="icon" alone is the standard value. The type attribute is optional for ICO files and helpful for SVG, because it lets browsers that cannot render SVG skip that link.
Where to put favicon files
The link tags go inside the head element, and they must appear on every page that should show the icon. Templates, layout files or shared header includes are the usual place, so the tags are written once and reused.
The files themselves can live in any public folder, as long as the href points to them correctly. Placing favicon.ico at the site root is still worthwhile: many browsers and tools request /favicon.ico automatically even when no tag is present, so a root file acts as a fallback.
If your site runs on a content management system or a hosted site builder, look for a site icon or favicon field in its settings before editing templates by hand. These settings typically generate the link tags for you. Menu names and supported formats differ between platforms, so check your platform's own documentation.
Adapting a vector logo into a favicon
A full logo rarely works unchanged at favicon scale. Fine strokes, small lettering and wide horizontal lockups break down when compressed into a small square. Before exporting, consider these adjustments:
- Use the brand mark or a single initial instead of the full wordmark, if the identity includes one.
- Fit the design to a square artboard and leave a little padding so the shape does not touch the edges.
- Thicken thin strokes and remove small details that will blur into noise.
- Reduce the palette to a few strong colors with clear contrast against both light and dark browser tabs.
- Preview the result at actual small sizes, not only zoomed in.
Two cautions apply. First, a file ending in .svg is not guaranteed to be true vector artwork; some SVG files simply wrap an embedded raster image. Open the file in a vector editor or inspect its code to confirm it contains paths and shapes. Second, being able to download a logo does not grant permission to use it. Only build a favicon from a logo you own or are licensed to use.
Preparing the SVG file
When exporting from a vector editor, keep a square viewBox, convert text to outlines so no font is needed, and remove editor metadata, hidden layers and unused definitions to keep the file small. Export options and their names vary between applications and versions, so confirm the exact settings in the tool you use.
An SVG favicon can also respond to the operating system's light or dark theme through a media query inside the file. This only takes effect in browsers that render SVG favicons.
<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 path in this snippet is a placeholder square; replace it with your own mark. The xmlns value is the standard SVG namespace identifier that every SVG file declares, not a link to visit.
Creating the ICO and PNG versions
Because SVG favicon support is not universal, keep raster fallbacks. Export PNG files from the same vector source, then combine small sizes into an ICO file with an image editor or a favicon generator. Commonly recommended sizes include small ICO entries for tab use and a larger square PNG for the Apple touch icon. Recommended sizes and browser support change over time, so check current browser and platform documentation rather than relying on an old list.
Using a PNG directly as the favicon is also valid. Reference it with rel="icon" and type="image/png", optionally adding a sizes attribute that matches the file's pixel dimensions.
Step-by-step checklist
- Confirm you have the right to use the logo and a genuine vector source file.
- Simplify the mark for small sizes on a square artboard.
- Export an SVG icon, a PNG touch icon and the small PNG sizes for an ICO file.
- Upload the files to a public folder, with favicon.ico at the site root.
- Add the link tags to the head of your shared page template.
- Publish the change and run the completion check below.
How to change an existing favicon
To replace an icon, upload the new file and update the href if the filename changed. Browsers cache favicons aggressively, so the old icon can persist even after the new one is live. Two reliable workarounds are giving the new file a different name, or adding a version query to the href, such as /icon.svg?v=2. Change the value each time you update the icon.
Checking that it worked
Open the page in a private or incognito window to avoid cached icons, and look at the browser tab. Then open each icon path directly in the browser to confirm the server returns the image rather than an error page. In the browser's developer tools, the network panel shows whether the icon requests succeeded, and the elements panel confirms the link tags are present in the head. Test in more than one browser, because the one you use may pick the SVG while another falls back to the ICO.
Search results and social previews can take longer to show a new favicon, since those systems fetch and cache icons on their own schedules. A correct icon in the browser tab confirms your markup is working even if those other surfaces have not updated yet.
Gaps to verify
No subject-specific measurements, browser version numbers or platform settings were supplied for this guide. Exact SVG favicon support by browser, current recommended icon sizes and the export settings in your design software should all be confirmed against up-to-date documentation before you finalize your files.