How to Use a Favicon on a Website

The short answer

To use a favicon on a website, you reduce your logo to a simple symbol that stays readable at very small sizes, export it as an icon file (usually an SVG plus raster fallbacks), place those files on your site, and reference them with link elements in the head section of your HTML pages. A favicon is the small icon that browsers show in tabs, bookmarks, history lists and, on some devices, home-screen shortcuts. It is rarely a direct copy of the full logo. It is usually a cut-down version, such as a monogram, an initial or the logo's standalone symbol, redrawn so it holds up when only a few pixels are available.

A few terms come up throughout. Vector artwork describes shapes as mathematical paths, so it scales without losing sharpness. Raster artwork is a fixed grid of pixels, such as PNG or ICO, and it blurs or breaks up when enlarged. A path is a single vector outline made of anchor points and the segments between them. Converting text to outlines turns live, editable type into fixed paths, so the letterforms no longer depend on a font being installed.

Before you start

• The master logo file in an editable vector format, together with confirmation that you have the right to use and adapt it. A file extension such as SVG, AI or EPS does not prove that the file contains only vector content, that it is editable or that you are allowed to reuse it. Open the file and inspect it, and confirm usage rights with the logo owner.
• Any brand guidelines that cover approved colors, minimum sizes or approved simplified marks. Some brands already define an icon version, and that version should be your first choice.
• A vector editor that can export SVG and PNG, and access to the website's HTML templates or to the favicon setting in your content management system.

Step 1: Choose the symbol

In common browser tabs a favicon is displayed at roughly 16 to 32 pixels, depending on the device and screen density. At that size, wordmarks, taglines, thin strokes and fine interior detail either disappear or turn into blur. Choose the one element of the logo that people can recognize on its own.

• Use the logo's standalone symbol if it has one and it reads clearly at small sizes.
• If the logo is text only, use a single initial or a short monogram drawn from the wordmark.
• Remove taglines, small secondary text, gradients that turn muddy at small sizes, and decorative detail that does not help recognition.
• Prefer bold, simple silhouettes with clear contrast between the shape and its background.

Treat this as a design recommendation, not a documented requirement. Browsers will display any image you supply. They cannot make a cluttered one readable.

Step 2: Prepare the vector artwork

• Work on a square artboard. Favicons are displayed in square or near-square slots, so artwork that is not square gets padded or cropped.
• Convert any letters to outlines so the result does not depend on fonts the browser may not have. Keep an unconverted copy in case the text needs editing later.
• Merge overlapping shapes and remove stray or hidden anchor points. Fewer, cleaner paths produce a smaller SVG and more predictable rendering.
• Thicken strokes, or convert them to filled shapes, so lines do not drop below one pixel when the icon is scaled down.
• Zoom out until the artwork is the size of a tab icon on your screen, and check whether it is still recognizable. Simplify further if it is not.
• Check the icon against both light and dark backgrounds, because browser themes vary. Add a solid background shape or an outline if the symbol disappears against either one.

Step 3: Export the files

Export menus and option names differ between vector applications and between versions of the same application. No application-specific evidence was supplied for this guide, so check your editor's documentation for its current export commands. The table lists the file types commonly used for favicons and what each one is for. Platform size conventions change over time, so confirm current requirements in browser and platform documentation before you finalize the files.

File | Purpose | Notes

SVG | Scalable icon for browsers that support SVG favicons | Export with text converted to outlines and with no embedded raster images. Inline the styles, and remove editor metadata where the export settings allow it.

ICO | Fallback for older browsers and tools that look for this format | An ICO file can contain several raster sizes. Small sizes such as 16 and 32 pixels are commonly included.

PNG | Raster fallback and the source for touch or app icons | Export at the exact pixel dimensions you intend to reference, and check that edges land cleanly on the pixel grid.

Apple touch icon (PNG) | Home-screen shortcut on Apple devices | Commonly supplied at 180 by 180 pixels. Give it a solid background, because transparency may not display as you expect.

Web app manifest icons (PNG) | Installable web apps and some Android home-screen shortcuts | Commonly supplied at 192 and 512 pixels and listed in the site's manifest file.

Open the exported SVG in a text editor before you use it. If it contains an embedded image element or base64 data, it is not pure vector artwork, and you should go back and re-export it from clean paths.

Step 4: Add the favicon to the website

Upload the files to your site, then reference them in the head section of every page, usually through a shared template. Replace each bracketed placeholder with the actual location of the file on your site.

<link rel="icon" href="[path to favicon.ico]" sizes="any">
<link rel="icon" href="[path to favicon.svg]" type="image/svg+xml">
<link rel="apple-touch-icon" href="[path to apple-touch-icon.png]">
<link rel="manifest" href="[path to manifest file]">

If your site runs on a content management system or website builder, there is usually a site icon or favicon field in its settings that generates these references for you. Where that field exists, use it instead of editing templates by hand, and follow the platform's own guidance on file type and size.

Step 5: Confirm the result

• Open the site in a new tab and confirm the icon appears. Browsers cache favicons aggressively, so if the old icon or a blank icon still shows, try a private window, clear the cache or hard-refresh the page.
• Open each favicon file's location directly in the browser to confirm the file loads and is not returning an error.
• Use the browser's developer tools to check that the link elements are in the page head and that each requested icon file loads successfully.
• Test in more than one browser, and in both light and dark themes.
• Bookmark the page and, if relevant, add it to a phone's home screen to check the touch icon.
• Compare the tab icon with the master logo and confirm it is recognizable and matches the approved brand colors.

Gaps to be aware of

This guide did not draw on confirmed specifications, browser support data or application documentation. The sizes it mentions are widely used conventions, not verified current requirements. Exact export settings depend on the editor and version you use. Before you treat the setup as final, check current browser and platform documentation and your editor's export reference.