Export losing quality even using PNG and 2X higher

The preview in Figma doesn’t show the export resolution. The one on the preview is 240×240px (or if you are on a Retina display — twice that amount) while the exported is just 16/32/96. The icons you sent look blurry indeed, but that’s because they are just so small. And if you view them on a Retina/other hi-res screen they will look even blurrier.

With pixel preview in Figma you can see the edges look fine, couldn’t really be less blurry.

Retina and zoom settings can be confusing, that’s why there is a pixel preview feature.

If you are viewing a 16×16 icon on a Retina screen, you are actually seeing a 32px version that is made smaller without pixelation. Here you can clearly see the difference, I took your 32px icon, made it 16px and enabled pixel preview. Without pixel preview at 100% zoom it obviously looks much sharper because Retina can show you all those 32 pixels in this 16px space.

But for the favicon most browsers on Retina would load a 32px version and fit it in 16px space so you are fine. They will see exactly what you see in Figma at 16px 100% zoom. And for the people who see a “blurrier” version, their monitor is the limiting factor here, they physically can’t see more pixels.

2 Likes