Create a Complete Favicon Set from Your Vector Logo

A complete favicon set is a small group of files made from one simplified version of your logo. Each file covers a different context: browser tabs, bookmarks, phone home screens and installed web apps. The most reliable way to build one is to start from a clean vector source, which is usually the logo's symbol rather than the full lockup. From that source you create a scalable SVG favicon and export a few raster sizes as fallbacks. The quality of the set depends less on the export tool than on the source artwork and how well it holds up at very small sizes.

What a complete favicon set usually contains

Each file below is a common convention for a modern website. You don't always need every one. If your site will never be installed as a web app, for example, you can skip the manifest icons.

File | Format | Typical size | Purpose

favicon.ico | ICO (multi-resolution container) | 16×16, 32×32 and 48×48 layers | Fallback for browsers and tools that request the ICO by default

favicon.svg | SVG (vector) | Scalable; square viewBox | Sharp tab icon in browsers that support SVG favicons; can adapt to light and dark modes

apple-touch-icon.png | PNG | 180×180 | Icon used when an iOS or iPadOS user adds the site to the home screen

icon-192.png | PNG | 192×192 | Web app manifest icon for Android and installed web apps

icon-512.png | PNG | 512×512 | Larger manifest icon used for splash screens and install prompts

icon-maskable-512.png (optional) | PNG | 512×512 with extra padding | Manifest icon that platforms can crop into circles or rounded shapes

Browser support for SVG favicons varies, particularly in older versions of some browsers. That is why the ICO and PNG files are still worth including even when the SVG is your primary icon.

Starting materials and preliminary checks

Begin with the most original logo file available, such as an AI, EPS, PDF or SVG master. A file extension alone doesn't prove the artwork is editable vector. Any of these formats can contain an embedded raster image, or a raster preview sitting in front of the real artwork. Open the file in a vector editor and switch to outline or wireframe view. Genuine vector shapes show as paths with anchor points. An embedded image shows as a single rectangle with no internal structure. If the logo turns out to be raster, it needs to be redrawn or carefully traced before it can make a clean SVG favicon.

Also check any live text in the artwork. If the mark includes letters set in a font, convert them to outlines in your favicon working copy. The SVG should not depend on a font being installed or loaded. Keep the original master untouched so the text stays editable there.

Confirm you have the right to adapt the logo. Being able to download a logo file is not the same as permission to modify the artwork, use its fonts or apply the trademark. If the logo belongs to a client or another organization, check the brand guidelines or ask the owner before simplifying or recoloring it.

Adapting the logo for very small sizes

A favicon is often shown at 16 or 32 pixels. At that size, wordmarks, taglines, thin strokes and fine gaps usually blur into an unreadable shape. Most brands use the logo's symbol, monogram or a single distinctive letter instead of the full lockup. Whether your particular logo has a suitable mark is a design judgment only you or the brand owner can make.

Place the mark on a square artboard and center it visually, not only mathematically.
Thicken thin strokes and widen narrow gaps so they survive pixel snapping.
Remove small details, gradients and subtle tints that disappear at small sizes.
Test contrast against both light and dark browser tab backgrounds; consider adding a solid background shape if the mark is light or thin.
Consider making a separate, simplified drawing for the 16-pixel size if the standard version loses its shape.

Step-by-step: producing the set

1. Duplicate the master logo file and work only in the copy.
2. Isolate the mark you'll use, convert any text to outlines and expand strokes to filled shapes if your editor's export handles strokes inconsistently.
3. Set a square artboard and adjust padding: tight for the tab icon, more generous for the apple-touch and maskable icons.
4. Flatten the color palette to solid fills where possible and note the exact color values from the brand guidelines.
5. Export an optimized SVG with a square viewBox, no embedded raster images, no external font references and no editor-specific metadata.
6. Export PNGs at 180×180, 192×192 and 512×512 from the vector artwork, not by enlarging a smaller PNG.
7. Export or render 16×16, 32×32 and 48×48 PNGs and combine them into a single favicon.ico with an ICO-capable tool or converter.
8. If you want a maskable icon, create a 512×512 version with the mark inside the central safe zone and a full-bleed background color.
9. Reference the files in your HTML head and, if applicable, in a web app manifest.
10. Run the final inspection below before deployment.

Optional: an SVG favicon that adapts to dark mode

Because an SVG favicon is code, it can carry a media query that changes colors when the operating system uses a dark theme. This is optional and works only in browsers that support SVG favicons. The example below is a simple illustration with placeholder shapes and colors. It is not a drop-in file.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #ffffff; }
    }
  </style>
  <path class="mark" d="M4 4h24v24H4z"/>
</svg>

Referencing the files on your site

Place the files where your site serves static assets and add references in the head of each page. Adjust the file names to match your own.

<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">
<link rel="manifest" href="site.webmanifest">

If you include a web app manifest, list the larger PNG icons in it. Use the purpose field for a maskable version.

{
  "icons": [
    { "src": "icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "icon-maskable-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

Final inspection

Open the SVG in a text editor and confirm it contains paths, not an embedded base64 image.
View each PNG at actual size, not zoomed, and check that the mark is recognizable at 16 and 32 pixels.
Check the favicon in light and dark browser themes.
Preview the maskable icon in a mask-testing tool to confirm nothing important is cropped.
Confirm the colors match the brand values rather than an approximation picked from a screenshot.
Clear the browser cache or use a private window when testing, since browsers cache favicons aggressively.
Verify that every file referenced in the HTML and manifest actually exists at the stated location.

What this guide cannot confirm

No specific logo, brand guidelines, software or target platform was provided. So this overview can't say whether your source file contains genuine editable paths, which part of your logo will read best at small sizes, or which export tool suits your workflow. Platform requirements for icons also change over time. Check the current documentation for the browsers and operating systems you care about before you finalize the set.