EquivalentLogo
Join our betaContact us

Tips for Favicon File Optimization

When creating a graphic many designers pay attention only to the appearance of the exported graphic. When working with SVG, it's also essential to consider how the code output is affected as well. Several steps can be taken in your design program (Adobe Illustrator or Figma) to optimize exported SVG graphics. Our SmartSVG™ favicons will include the media query @media (prefers-color-scheme)to respond to both a light and a dark theme preference.

NOTE: As of right now, 72% of all browsers support SVG icons, but we suggest you build in a fallback .png(s). Keep in mind that the fallback .png(s) maybe displayed within a light or dark mode browser display, so it’s important to test your fallback graphic on various backgrounds to ensure visibility everywhere. Additionally, there is no “alt text” used for a favicon.

Please follow the steps below to ensure the best possible SmartSVG™ performance.

Optimizing a Favicon in Adobe Illustrator

  1. Size your favicon to 32pt x 32pt. Be sure that the SVG image is square.
  2. Remove any unnecessary points along your file paths
  3. Create compound paths of graphic elements that use the same fill and stroke style
  4. Verify that the Swatches dialog contains only your icon colors
  5. Swatches dialog > Add Used Colors
  6. Swatches dialog > Select All Unused > Delete

Exporting a Favicon from Adobe Illustrator

Exporting a Favicon From Adobe Illustrator

  1. Place your favicon on a single Artboard
  2. Object > Artboards > Fit to Artwork Bounds
  3. File > Export > Export As… > SVG > Export > (no changes) > OK

Optimizing a Favicon in Figma

  1. Size your Favicon to 32pt x 32pt
  2. Remove any unnecessary points along your file paths

Exporting a Favicon From Figma

  1. Select the favicon
  2. Background Fill dialog > hidden
  3. Export dialog > SVG > Export


We’ve Heard Good Things

A successful SmartSVG™ begins with a strong SVG. Consider these tools for optimization. 

Un-outlined strokes contain fewer data points than outlined strokes, resulting in a smaller file size. To convert outlined strokes back into single strokes, we’ve heard good things about  Producthunt.