Make a round favicon

The short answer

Favicons are delivered as square images, and desktop browser tabs generally show them as squares. To make a favicon appear round, draw a circular shape on a square canvas and leave the corners transparent. The circle is part of the artwork. The browser does not crop the icon for you. You also need a file format that keeps the corners transparent, such as SVG, PNG or a modern ICO with alpha transparency. JPEG has no transparency, so the corners will always be filled with a color.

The subject here is the favicon file itself: the small site icon shown in tabs, bookmarks and history, plus the related home-screen and app icons that many sites also provide. A round favicon is a design choice inside that square format, not a separate format.

How a round favicon differs from a square one

• Shape: a square favicon fills the whole canvas. A round one fills a circle and leaves the corners transparent.
• Background: with transparent corners, the tab or toolbar color shows through. A square icon brings its own background.
• Perceived size: a circle covers less area than a square of the same width, so a round icon can look slightly smaller next to square icons.
• Platform masks: some platforms crop icons into their own shapes. On those surfaces, a self-drawn circle may end up inside a second mask.

Building the round shape in vector artwork

In a vector editor, start with a square artboard. Place a filled circle that touches or nearly touches the artboard edges, and put the mark inside it. Before exporting, check that the circle and the mark are real vector paths. An SVG or other vector-format file can contain only an embedded raster image, and the filename or extension does not tell you which one you have. If the mark is an embedded bitmap, scaling it into a circle will not give you clean edges. Redrawing it or obtaining the original vector source is the reliable fix.

Check the result at actual favicon display sizes, not only zoomed in. At very small sizes, a circle's curved edge is anti-aliased into partly transparent pixels, and fine detail inside the circle can blur together. Many logos need a simplified favicon version, such as a single initial or a reduced symbol inside the circle, rather than the full lockup.

Dark mode variants

Transparent corners help a round favicon blend with both light and dark browser themes. The circle itself still needs enough contrast against both. A solid-filled circle carries its own background, so the mark inside stays legible on either theme. The edge of the circle still has to stand out from a dark tab bar. A circle drawn only as a thin outline, or a dark mark with no fill, can disappear on a dark theme.

An SVG favicon can include an embedded style block with a prefers-color-scheme media query, so the icon changes its colors when the user's system theme changes. The snippet below shows the inner content of such a file. The root svg element also needs the standard SVG namespace declaration to work as a standalone file.

<style>
  .disc { fill: #1a1a1a; }
  .mark { fill: #ffffff; }
  @media (prefers-color-scheme: dark) {
    .disc { fill: #f2f2f2; }
    .mark { fill: #1a1a1a; }
  }
</style>
<circle class="disc" cx="16" cy="16" r="16"/>
<path class="mark" d="..."/>

Support for SVG favicons, and for media queries inside them, differs between browsers and has changed over time. Keep a PNG or ICO fallback alongside the SVG. Raster fallbacks cannot switch themes, so design them with colors that read acceptably on both light and dark backgrounds. A filled circle is usually the safest choice.

Where platforms apply their own shape

Not every icon surface respects your circle. Home-screen icons on Apple devices are displayed with the system's own rounded-corner mask, and transparent areas may be filled with a solid color. A round icon with transparent corners can therefore show up as a circle sitting on an unexpected backdrop. For that icon, supply a full-bleed square with your background color and let the system round it.

Web app manifests can mark an icon as maskable, which tells supporting platforms they may crop it into a circle or another shape. For a maskable icon, fill the whole square with background and keep the essential artwork within the documented safe zone. If you also draw your own circle, it can end up trimmed or doubled inside the platform's mask.

Rights when reshaping a logo

Putting a logo inside a circle changes the artwork. Being able to download a logo file does not grant permission to modify it, and it does not cover the fonts or trademarks it contains. For your own brand, follow your brand guidelines. For a third-party logo, confirm that the owner allows the modified use before publishing a round version.

Evidence gaps

No subject-specific evidence was available for this article. It contains no tested browser versions, support tables, pixel measurements or safe-zone dimensions. The guidance above rests on general, verifiable principles of favicon formats and transparency. Before shipping, check current browser and platform documentation for SVG favicon support, color-scheme behavior and icon masking rules.