logoredraws.com

How to Fix a Stretched Favicon

Why favicons look stretched or squashed, and how to fix the artwork: build a square canvas, set the SVG viewBox correctly, and re-export raster fallbacks without distortion.

Published

Contents
  1. The short answer
  2. Terms you need
  3. Common causes of distortion
  4. Step-by-step fix
  5. Verifying the result
  6. Gaps and caveats

The short answer

A favicon looks stretched when non-square artwork is forced into a square slot. Browsers and operating systems display favicons in square spaces, so a wide or tall logo exported without padding gets scaled unevenly to fill that square. The fix is in the artwork: place the mark on a square canvas with balanced padding, make sure the SVG's viewBox is square and matches the artwork, avoid settings that allow non-uniform scaling, then re-export every raster fallback from that corrected master.

Terms you need

  • Aspect ratio: the relationship between width and height. A square favicon has a 1:1 aspect ratio.
  • Canvas or artboard: the defined drawing area of the file. Its edges become the edges of the exported icon.
  • viewBox: an SVG attribute listing four numbers (minimum x, minimum y, width, height) that define which region of the drawing's coordinate space is shown. If its width and height differ, the SVG is not square.
  • preserveAspectRatio: an SVG attribute that controls how the viewBox fits into the space it is displayed in. Its default keeps proportions intact; the value none allows the graphic to stretch to fill the space.
  • Raster fallback: a pixel-based version (such as PNG or ICO) exported from the vector master for contexts that do not use the SVG.

Common causes of distortion

  • The source logo is horizontal or vertical, and it was exported at its natural proportions, then resized to square dimensions without locking proportions.
  • The artboard was cropped tightly to the logo, so the file itself is not square.
  • The SVG's width, height and viewBox describe different proportions.
  • The SVG contains preserveAspectRatio set to none, which permits non-uniform scaling.
  • A PNG was resized in an image editor with proportion locking turned off.
  • An online generator was given non-square input and filled the square by stretching rather than padding.

Step-by-step fix

  • 1. Open the vector master of the logo, not a previously exported favicon, so you are not inheriting earlier distortion.
  • 2. Decide which artwork belongs in the icon. A full wordmark is usually too wide to read at favicon scale; a symbol, monogram or single letter from the identity typically suits a square format better. This is a design recommendation, not a technical requirement.
  • 3. Create a square artboard. Center the mark and scale it uniformly (with proportions locked) so the longer side fits inside the square with some breathing room.
  • 4. Check that nothing was distorted: compare the mark against the original by overlaying it, or confirm width and height scaled by the same percentage.
  • 5. Clean up the SVG export: confirm the viewBox width and height are equal, remove any preserveAspectRatio value of none, and remove fixed width and height attributes that conflict with the viewBox.
  • 6. Export raster fallbacks from the corrected master at square pixel dimensions, with proportion locking enabled.
  • 7. Replace the old files on the site, keeping file names and references consistent with what the page's markup expects.

Before and after, the opening tag of an SVG favicon typically changes like this (namespace declaration and drawing content omitted for clarity; the numbers are illustrative, not required values):

<!-- Stretches: non-square viewBox, non-uniform scaling allowed -->
<svg viewBox="0 0 240 80" preserveAspectRatio="none">

<!-- Fixed: square viewBox, default proportional scaling -->
<svg viewBox="0 0 240 240">

In the fixed version, the drawing's coordinates must also be repositioned so the mark sits centered within the new square region. Simply changing the viewBox numbers without moving the artwork will shift or crop it rather than center it.

Verifying the result

  • Open the SVG file directly in a browser and resize the window: the mark should stay in proportion and centered.
  • Open each raster export and confirm its pixel width equals its pixel height.
  • Compare circles or other geometric shapes in the mark: a circle that appears oval is a clear sign of remaining distortion.
  • Check the tab icon after a hard refresh or in a private window, because browsers cache favicons aggressively and may keep showing the old, stretched version.
  • View the icon on both light and dark browser themes to confirm the padding and shapes still read clearly.

Gaps and caveats

No source-specific evidence was supplied for this guide, so it does not list required pixel sizes, per-browser support details or platform rules; confirm those against current browser and platform documentation for your delivery targets. Also note that a file's extension does not prove its contents: an SVG may embed a raster image, and in that case fixing the viewBox will not restore sharpness or proportions. Inspect the file to confirm it contains true vector paths, and make sure you have permission to adapt the logo before reworking it for a favicon.