Figment V2 just launched on Product Hunt 🎉 Leave a comment for a FREE Figma UI Kit

Figment.so
BlogHow to useMy Account

How Do You Add a Favicon From a Figma Design?

9/16/2026 • Nikita Jerschow

Figma's export panel doesn't have a favicon option — it exports PNG, JPG, SVG and PDF (per Figma's own export-formats guide), and none of those is a working favicon on its own. You need a square source image, and then, for a hand-coded site, a small set of derived files (an .ico, several PNG sizes, sometimes a manifest) that a plain image export doesn't produce. A favicon-specific Figma plugin does that conversion step.

Why can't I just export any frame as a favicon?

Because browsers, and Google Search, have specific requirements a random export won't meet. Google's own guidance for favicons in search results requires the icon to be square (1:1) and at least 8×8px, and recommends going larger than 48×48px "so that it looks good on various surfaces" (Define a favicon to show in search results, Google Search Central). Apple's icon system for "add to home screen" goes further: Apple's own developer documentation and MDN both show apple-touch-icon sizes up to 180×180 for retina iPhones (Configuring Web Applications, Apple Developer; <link>: The External Resource Link element, MDN). There's no single official "master size" bigger than that, but a plain rectangle cropped from a bigger design, with no attention to how it reads small, is the usual failure — most favicons are actually seen at 16–32px, where fine detail just disappears.

How do I set up the Figma frame correctly?

Make a new frame with equal width and height, sized comfortably larger than the biggest size you'll need (180×180, per Apple's largest common icon above) — several hundred pixels square is a safe, generous canvas, since every tool downsamples cleanly but nothing scales up well. Keep the mark simple: fine detail and thin strokes disappear at 16px, which is where most favicons actually get seen, in a browser tab. If your logo is detailed, design a simplified mark specifically for this frame instead of shrinking the full logotype. Use vector shapes where you can — a vector source stays sharp at small sizes; a rasterized one doesn't.

How do I get from that frame to actual favicon files?

Export the frame as a PNG first, as a sanity check on how it reads at a small size. Then, for a hand-coded static site, run it through a real favicon-generator plugin — two that exist on Figma Community today: Favicon Exporter by PsyCat Games generates favicon.ico, favicon.svg, apple-touch-icon.png, web-manifest icons, site.webmanifest and an HTML snippet from a square layer; Favicon Generator by James Ives (3,700+ users as of today) exports favicons, app icons and the matching HTML meta tags from your current node selection. Select your frame, run either plugin, and it hands you the sized files plus the <link> tags to reference them.

Where do the files actually go?

That depends on the platform, and it's worth being precise here rather than hand-wavy. If you're hand-coding a static site, the plugin's exported files go in your root directory (or wherever your build serves static assets from), and its generated <link> tags go in your page's <head>.

If you're publishing with Figment specifically, the flow is simpler and more limited: Figment's Website Settings panel has a single "Favicon" field with an "Upload Icon" button that takes one image file and stores it — there's no multi-size generation, no .ico container, and no web manifest built for you. So for a Figment site, skip the multi-file plugin output and just upload one square PNG (the same one you sanity-checked above) through Website Settings → Favicon → Upload Icon. Figment then serves it via a single <link rel="icon"> tag pointing at that file. That's real, current behavior, not a hypothetical — and it means the multi-size, manifest-generating plugins above are for hand-coded exports, not for Figment publishing.

Either way, clear your browser cache or open an incognito window before you assume a new favicon isn't working — favicons are cached aggressively, and a stale one is the most common reason a correctly-set-up favicon still looks wrong.

What goes on the favicon checklist?

  • Square frame, sized well above 180×180, simplified mark, vector shapes where possible
  • Exported once as a plain PNG to sanity-check how it reads small
  • For a hand-coded site: run through Favicon Exporter or Favicon Generator for the full file set
  • For a Figment site: upload the single PNG directly in Website Settings → Favicon
  • <link> tags in place if you're hand-coding
  • Checked in an incognito window, since favicons cache hard

If you're publishing the rest of the design from Figma too, the full Figma-to-website checklist covers the other things worth checking before you hit publish.

Sources

Fetched September 16, 2026.

Get the latest content from Figment. Subscribe today for Figma design guides and website building tips.

Figment.so

Contact

Twitter

Privacy

Terms