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 Smart SVG 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 Smart SVG™ 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 dialogue contains only your icon colors

  5. Swatches dialogue > Add Used Colors

  6. Swatches dialogue > 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 dialogue > hidden

  3. Export dialogue > SVG > Export

We’ve Heard Good Things

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

1. 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.