Export favicons and app icons for web, iOS, Android, Windows and macOS

Goal

Turn one icon in Figma into all the sizes a website or app needs, without exporting each size by hand.

Before you start

• A square icon or logo layer in Figma, ideally at least 1024 × 1024 px for app icons.

Steps

1. Select the icon Select the frame or component that holds your icon and open Optimizely's Icons & Sprites tab.
2. Choose a preset Pick the platform in the preset list. The sizes it makes are listed below it. For example PWA Complete (the default) makes 16, 32, 180, 192 and 512 px, Apple Touch Icons 120 to 180 px, iOS App ten sizes up to 1024 px, and Android App 48 to 512 px.
3. Keep the combined file Presets marked .ico or .icns show a Combined .ico, Combined .icns or Combined .ico + .icns switch, on by default. It adds one favicon.ico (16 to 256 px) or AppIcon.icns (16 to 1024 px) with every size inside.
4. Export Click Export Icons. Optimizely downloads one ZIP named after the preset, with files such as icon-180x180.png.
5. Rename for your platform The PNGs use generic names. Rename the ones your project expects, for example icon-180x180.png to apple-touch-icon.png.

Tips

• Select several frames of different sizes, for example a detailed 512 px icon and a simplified 16 px one, and the combined .ico or .icns uses each frame for the size it matches.
• Captions can list extra items such as maskable or 1024x500; only the numbered square sizes are exported.

Result

A ZIP with your icon in every size the platform needs, plus a combined .ico or .icns file where the preset includes one.

If something goes wrong

• All Platforms downloads nothing. That preset does not export in the current version. Run the platform presets you need one after another instead.
• The icons are stretched or not square. Icons are rendered by width, so a layer that is not square gives PNGs that are not square either. Put the icon in a square frame and export that frame.
• site.webmanifest or favicon-tags.html is almost empty. The web.manifest and HTML link tags files do not list the icons yet. Write those few lines yourself, pointing at the PNGs in the ZIP.

Related guides

• ICONS & SPRITES
  Make a sprite sheet with JSON or CSS coordinates, or an SVG sprite Pack selected icons into one image with a JSON or CSS file of their positions, or export them as SVG files and an SVG symbol sprite.
  →
• EXPORT IMAGES
  Export Figma layers as WebP, PNG, JPG or SVG Select layers, pick a format and scale in Optimizely's Export tab, and download them as files or one ZIP.
  →