How to Crop an Image for a Favicon

The short answer

To crop an image for a favicon, do not shrink the whole logo into a tiny square. Isolate the most recognizable part of the logo, usually the symbol, monogram or a single initial. Place it on a square canvas with a small, even margin and center it by eye rather than only by measurement. Simplify any detail that disappears at small sizes. Then export the sizes and formats you need and check the result on both light and dark browser themes. Work from the vector source whenever you can, because a crop made there stays sharp at every size.

Some terms come up throughout this guide. A lockup is the fixed arrangement of a logo's symbol and wordmark. The artboard is the canvas area in a vector editor that defines what gets exported. The bounding box is the smallest rectangle that encloses an object. In an SVG file, the viewBox is the attribute that sets the visible coordinate area, so in a vector file it does the job of the crop. Optical centering means positioning a shape so it looks centered, which can differ from its mathematical center.

Why a favicon needs its own crop

Favicons are shown very small, in browser tabs, bookmarks, history lists and search results. A horizontal lockup with a wordmark becomes an unreadable smudge at that scale. Cropping to a single distinctive mark gives the icon a clear silhouette. A square format also matches the space browsers and operating systems reserve for icons.

Step by step: cropping in a vector editor

• 1. Duplicate the master logo file and work only on the copy, so the approved artwork stays untouched.
• 2. Choose the element to keep. Look for a symbol, a monogram or a single letter that still identifies the brand without the full name.
• 3. Delete or hide everything else, including the wordmark, tagline and any decorative rules.
• 4. If the mark contains live type, convert the text to outlines (paths). The file will then render without the font installed. Keep an editable copy in case changes are needed later.
• 5. Create a square artboard. Scale the mark to fit inside it with an equal margin on all sides. The margin is a design recommendation, not a documented requirement: it stops the mark from touching the edges of the tab or the rounded corners some platforms apply.
• 6. Center the mark optically. Round, pointed or asymmetric shapes often need a small nudge to look balanced.
• 7. Simplify for small sizes. Thicken thin strokes, merge tiny counters, remove fine textures and gradients, and reduce the number of colors if that keeps the shape clearer.
• 8. Fit the artboard tightly to the square, not to the mark's bounding box. Otherwise the export may come out rectangular or lose its margin.
• 9. Export an SVG plus the raster sizes you plan to use, as described below.

If you only have a raster image

You can crop a PNG or JPEG to a square in any image editor using the same principles: isolate the mark, square the canvas and keep a margin. A raster image is a fixed grid of pixels, though, so enlarging a small or compressed source makes it blurry or blocky. A low-resolution source is often better redrawn as vector artwork before you produce the favicon. Note also that a file with an .svg extension is not guaranteed to be true vector work. It may just wrap an embedded bitmap. Open the file and check whether it contains editable paths. Likewise, holding a logo file does not by itself give you permission to adapt or reuse it. Confirm usage rights with the brand owner.

Planning for dark mode

The page cannot control the color of the browser tab behind a favicon. That color changes with the user's theme. A dark mark on a transparent background can vanish on a dark tab, and a white mark can vanish on a light one. Decide how you will handle this while you are cropping, because the decision can change how much margin and contrast you need.

• Contained tile: place the mark on a solid square or rounded-square background shape so it reads on any tab color. This is the most predictable option.
• Contrast outline: add a thin outline or halo in a contrasting color around the mark. It keeps the transparent background but adds visual weight, so test it at the smallest size.
• Theme-aware SVG: put a CSS media query for the user's color-scheme preference inside the SVG file, which swaps the fill colors when dark mode is active.
• Mid-tone mark: choose a single color with enough contrast against both light and dark tabs. This is not always possible within brand color rules.

A theme-aware SVG favicon usually contains a style block like the fragment below, placed inside the svg element. The opening svg tag also needs the standard SVG namespace attribute and a square viewBox. The color values here are placeholders, so replace them with approved brand colors.

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

Gap to verify: browser support for SVG favicons, and for color-scheme media queries inside them, has differed between browsers. No current compatibility data was supplied for this guide. Check up-to-date browser documentation, and always provide raster fallbacks, which do not change with the theme. That is why the contained-tile or outline approach is often used for the fallback files.

Files to export

The sizes below are common conventions, not a single fixed standard. Confirm them against current browser and platform documentation before delivery.

File | Typical use | Note

SVG | Modern browsers that support vector favicons | Can carry dark mode styling; check support

ICO containing small sizes such as 16 and 32 pixels | Legacy and broad browser fallback | One file can bundle several sizes

PNG at 180 by 180 pixels | Apple touch icon for home screen shortcuts | Usually needs an opaque background

PNG at 192 and 512 pixels | Web app manifest icons | Used when a site is installed as an app

In the page head, reference each file with a link element. Use rel set to icon for the ICO and SVG, give the SVG a type of image/svg+xml, use rel set to apple-touch-icon for the touch icon, and use rel set to manifest for the manifest file. The snippet below shows the pattern with placeholder paths.

<link rel="icon" href="[path to favicon.ico]" sizes="32x32">
<link rel="icon" href="[path to icon.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]">

How to verify the result

• View each export at actual size, not zoomed in, and confirm the mark is still recognizable.
• Check that the canvas is square and the margin looks even on all sides.
• Switch the operating system or browser between light and dark themes and confirm the icon stays visible in both.
• Open the site in more than one browser, because favicon caching and format support vary. Clear the cache or use a private window if an old icon keeps appearing.
• Open the SVG in a text or code editor and confirm it contains paths rather than an embedded bitmap, and that no live text depends on an installed font.
• Compare the favicon with the master logo and confirm that colors and proportions follow the brand guidelines, or that any simplification has been approved.

Limits of this guide

No source material specific to a brand, tool or browser version was supplied. This guide therefore gives no exact margin percentages, color values or compatibility figures. The pixel sizes listed are widely used conventions. Margin, simplification and dark mode treatment are design recommendations to adapt to your logo and brand rules.