How to Export an SVG Logo for Favicon Use

The short answer

To export an SVG, prepare the logo on a square artboard, convert live text to outlines, merge or clean up overlapping shapes, remove anything raster or hidden, and then use your design application's SVG export option. Choose settings that keep coordinates on a viewBox and avoid embedded images or fonts. After export, open the file in a text editor and a browser to confirm that it contains only vector paths and renders correctly at small sizes.

SVG (Scalable Vector Graphics) is a text-based format that describes artwork as geometry, such as paths, shapes and fills, instead of a grid of pixels. That is why it scales cleanly. The scaling only works if the file actually contains vector geometry, though. An SVG can also wrap a bitmap image, reference a font that may not be installed, or carry editor-specific data. The .svg extension alone does not prove the file is vector-only or editable. It also does not grant permission to reuse a logo you do not own or license.

Before you export: starting conditions

• You have the logo in a vector editor such as Adobe Illustrator, Inkscape, Affinity Designer or Figma, not only as a PNG or JPG.
• You have the right to use and modify the logo for the intended site or product.
• You know the target use. A favicon is displayed at very small sizes in browser tabs, bookmarks and history lists, so it usually needs a simplified mark or symbol rather than a full wordmark.
• You have decided whether the favicon needs separate versions for light and dark browser interfaces.

Step 1: Set up a square artboard

Favicons are displayed in a square slot. Place the mark on a square artboard and either fit the artboard to the artwork or leave even padding on all sides. The artboard becomes the SVG viewBox, which is the internal coordinate system that tells the browser what area to draw and how to scale it. A non-square or off-center artboard can make the icon look shifted or squashed in the tab.

Step 2: Simplify the artwork for small sizes

This is a design recommendation, not a format requirement. Fine details, thin strokes and small counters, which are the enclosed spaces inside letters such as o or e, tend to fill in or disappear at favicon scale. Consider using only the logo symbol or an initial, thickening hairline elements, and removing taglines. Preview the artwork zoomed out to roughly tab size before you commit.

Step 3: Handle typography

If the mark contains letters, convert the text to outlines before export. The command is usually called Create Outlines, Convert to Curves or Object to Path, depending on the application. Live text in an SVG relies on the viewer having the same font. If the font is missing, the browser substitutes another one and the logo changes. Keep a separate working file with editable text, because outlined type can no longer be retyped.

Step 4: Clean up path geometry

• Expand strokes into filled shapes if the stroke width must stay fixed relative to the artwork. This is optional, but it removes any dependence on how a renderer handles stroke scaling.
• Use a union or merge operation to combine overlapping shapes of the same color, so the result has fewer, cleaner paths.
• Delete stray anchor points, empty paths, hidden layers and off-artboard objects.
• Expand or remove effects such as drop shadows, blurs and blend modes. Some of these export as filters or raster images, which add weight and may render inconsistently.
• Check the fill rule and compound paths so that holes such as letter counters stay transparent instead of filling solid.
• Use a small, deliberate set of solid colors. Gradients are valid in SVG but add complexity and can be hard to read at tiny sizes.

Step 5: Export with suitable settings

Export commands and option names differ between applications and between versions of the same application, and no version-specific documentation was supplied for this guide. Treat the locations below as common starting points and confirm them against the version you use.

• Adobe Illustrator: an SVG option typically appears under the Export or Save As commands, and the Asset Export panel can export selected artwork.
• Inkscape: Save As offers an Inkscape SVG, which keeps editor data, and a Plain SVG, which is usually the better choice for delivery. Some versions also offer an optimized SVG output.
• Figma: select the frame, add an export setting in the Export section of the properties panel, and choose SVG.
• Affinity Designer: SVG is available in the export dialog, with presets for web or editing use.

Whatever the application, look for these settings and choose as follows where they exist:

• Fonts: convert to outlines or paths rather than embedding or referencing fonts.
• Images: do not embed or link raster images. If the export dialog has image options, the logo should not need them.
• Styling: presentation attributes or inline styles are generally more portable than an internal style block, especially if the SVG will be inlined or combined with other files.
• Decimal precision: a moderate precision keeps the file small without visibly distorting curves. Lower it carefully and compare the result against the original.
• Editor data, metadata and IDs: strip them when the option is available.
• Responsive or size attributes: keep the viewBox. Fixed width and height attributes are optional, and how you set them depends on how the file will be placed.

Step 6: Optionally optimize the file

An SVG optimizer can remove comments, editor namespaces and redundant groups, and can shorten path data further. Optimizers can also merge or rewrite paths, so compare the optimized file with the original visually before replacing it. Keep the unoptimized export as a fallback.

Step 7: Connect the SVG as a favicon

In a web page's head section, an SVG favicon is declared with a link element whose type is image/svg+xml. Browser support for SVG favicons is not universal, and some platforms, such as home-screen icons on Apple devices, expect PNG files. Common practice is to keep a raster fallback, such as an ICO or PNG file, alongside the SVG. Check current browser support for your audience before relying on the SVG alone.

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

Because an SVG favicon is a standalone file, it can include a prefers-color-scheme media query in an internal style block to switch colors when the browser uses a dark interface. This is one case where an internal style block is useful. The snippet below shows the structure. Keep the SVG namespace declaration that your editor writes on the root svg element, because a standalone SVG file needs it to render.

<svg viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="..."/>
</svg>

The viewBox values and colors above are placeholders. Use the values your export produced and your brand colors.

How to confirm the export worked

• Open the SVG in a plain text editor. It should contain path or shape elements and a viewBox on the root element.
• Search the file for text elements. If any appear, the type was not outlined.
• Search for image elements or long base64 strings. Either one means raster content is embedded, so the file is not vector-only.
• Search for font-family references. Their presence suggests the artwork still depends on installed fonts.
• Open the file directly in more than one browser and check that the shapes, colors and holes in letterforms render as intended.
• Zoom the browser view far in and out. The edges should stay sharp at every level.
• Load the page and look at the favicon in a tab on both light and dark browser themes, and check that the fallback icon appears where SVG is not supported.
• Compare file size before and after optimization, and confirm visually that the optimized version still matches the original.

Gaps in this guide

No application-specific documentation, version numbers or browser-support data were supplied, so this guide does not state exact menu paths, default setting values, target file sizes or a list of browsers that support SVG favicons. Check your application's current help documentation for the export dialog in your version, and consult an up-to-date browser compatibility reference before you finalize your favicon setup.