How to Make an Animated SVG Favicon

The short answer

An animated SVG favicon is a small SVG file that contains its own CSS animation (or SVG's built-in SMIL animation). You link it from the page head with a rel="icon" link of type image/svg+xml. The catch is browser support. Some browsers play the animation in the tab. Others show only a static frame. Some don't use SVG favicons at all. Treat the motion as an enhancement, keep a static fallback icon, and design the first frame so it works as a complete logo mark on its own.

A few terms used throughout this guide:

• Favicon: the small icon a browser shows in tabs, bookmarks and history.
• SVG (Scalable Vector Graphics): a text-based format that describes artwork as paths and shapes rather than pixels, so it stays sharp at any size.
• viewBox: the SVG attribute that defines the artwork's internal coordinate space. A square viewBox gives a square icon.
• SMIL: animation elements such as animate and animateTransform written directly in SVG markup, as an alternative to CSS keyframes.
• Outlining type: converting live text into vector paths so the letterforms no longer depend on an installed font.

Why the animation has to live inside the SVG

When a browser loads an SVG as an image, which is how favicons are loaded, it runs in a restricted mode. Scripts inside the file do not run, and external resources such as linked fonts, stylesheets or images are not fetched. All motion therefore has to come from CSS rules in a style element inside the SVG, or from SMIL elements. Everything the icon needs must be contained in the one file.

Step 1: Prepare the logo artwork for favicon scale

A favicon is shown at very small pixel sizes. A full logo lockup with a wordmark, tagline and fine detail rarely survives that. Start from the simplest mark in the identity, such as a symbol, monogram or single letter, and prepare it like this:

• Place the mark on a square artboard. Export it with a square viewBox and no stray space around the edges.
• Outline any lettering. The SVG cannot load web fonts in a favicon, so live text would fall back to a system font or disappear.
• Simplify the paths. Remove hidden layers, empty groups, unused gradients, editor metadata and tiny details that blur at small sizes.
• Merge shapes that never move into a single path. Keep the parts you plan to animate as separate elements with their own class or id.
• Check the file for embedded raster images (an image element containing pixel data). A .svg extension does not prove the file is purely vector.
• Confirm you have the right to use the logo this way. Having an editable file does not grant permission to reuse or modify a brand mark.

Step 2: Choose motion that reads at tab size

Large, simple changes read best at favicon size. Rotation of a whole shape, a color shift, a pulse in opacity or scale, or a stroke being drawn are all workable. Subtle movement of small details will not be visible. The icon will often be shown static, so make sure the resting state is the correct, recognizable logo, not a mid-animation pose. Also respect the user's reduced-motion preference so the animation stops for people who have asked for less motion.

Step 3: Write the animated SVG

The example below rotates a broken ring around the center of a square canvas. It disables the animation when the reduced-motion preference is set. The namespace value on the root svg element is shortened here. Keep the standard SVG namespace declaration that your vector editor writes on export, because the file will not render as an image without it.

<svg xmlns="…" viewBox="0 0 32 32">
  <style>
    .mark {
      transform-origin: 16px 16px;
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .mark { animation: none; }
    }
  </style>
  <circle class="mark" cx="16" cy="16" r="12"
          fill="none" stroke="#1a1a1a" stroke-width="4"
          stroke-dasharray="40 36"/>
</svg>

To use your own logo, replace the circle with the outlined paths from Step 1. Apply the animation class only to the parts that should move. Set transform-origin to the point the shape should pivot or scale around, expressed in viewBox units. You can also add a prefers-color-scheme media query in the same style element to swap fill colors for dark browser themes. Where it is honored, that can keep a dark logo visible on a dark tab bar.

Step 4: Link the icon with a fallback

Reference the SVG from the page head and keep a conventional raster icon for browsers and platforms that do not use SVG favicons. Browsers that understand the SVG link generally prefer it. Others fall back to the ICO or PNG file. Home-screen icons on Apple devices use the separate apple-touch-icon link, which expects a PNG.

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

Export the fallback raster files from the static first frame of the same artwork so every version of the icon matches.

What to expect from browser support

Support for SVG favicons, and especially for animating them, differs between browser engines and has changed over time. Firefox has been the browser most commonly reported to play CSS or SMIL animation inside an SVG favicon. Chromium-based browsers such as Chrome and Edge typically accept the SVG but show a single static frame. Safari has historically not used SVG files for tab favicons, which is why the raster fallback matters. No version-specific support data was supplied for this guide, so test current releases of the browsers your audience uses instead of relying on these general patterns.

Alternative: swapping frames with JavaScript

If the icon must move in browsers that render SVG favicons statically, the page itself can change the icon. A script on the page (not inside the SVG) can swap the favicon link between several static frame files on a timer. This works with any icon format the browser accepts. The trade-offs:

• Browsers usually slow down or pause timers in background tabs, which is exactly when a tab icon is most visible, so the motion may stall.
• Each frame is a separate request unless the frames are cached or inlined as data.
• Constant motion in a tab can be distracting. This technique suits short, purposeful states such as a loading or unread indicator better than a decorative loop.

const frames = ['frame-1.svg', 'frame-2.svg', 'frame-3.svg'];
const icon = document.querySelector('link[rel="icon"][type="image/svg+xml"]');
let i = 0;

if (icon && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
  setInterval(() => {
    i = (i + 1) % frames.length;
    icon.href = frames[i];
  }, 300);
}

Step 5: Verify the result

• Open the SVG file directly in a browser tab to confirm the artwork renders and the animation runs at full size.
• Load the page in each target browser and look at the tab itself. Browsers cache favicons aggressively, so use a private window or clear the cache if an old icon keeps appearing.
• Check the static frame. In a browser that does not animate the favicon, the icon should still read as the correct logo.
• Turn on the operating system's reduce-motion setting and confirm the animation stops.
• Switch between light and dark browser themes to confirm the mark stays visible on both tab backgrounds.
• Open the SVG in a text editor and confirm there are no live text elements, no external references and no embedded raster images.
• Confirm the fallback ICO or PNG appears in a browser that ignores the SVG link.

Gaps in the available evidence

No specific browser version numbers, support tables or performance measurements were supplied for this guide, so none are stated. The browser behavior described above reflects general, widely reported patterns and may have changed. Confirm it by testing before you rely on animation as part of a brand experience.