Icons, favicons and merch graphics on Squarespace: my workflow for getting crisp results from any image

Ahmed shaikh — Sat, 14 Nov 2026 02:19:21 +0000

Hi everyone,

I’ve been tidying up the graphics site lately and wanted to share a workflow that fixed most of my “why is this blurry?” problems. It applies to icons, favicons, social badges, and graphics you plan to put on merch.

Start from the largest version you have
Dig out the original file, not the version you downloaded from your own website. Every re-save loses quality.
Use vector (SVG) for simple graphics
Icons, badges, line art, and flat logos work best as SVG. They stay sharp on phones, tablets, and large monitors, and the files are tiny, which helps page speed.
Turn old raster graphics into vectors
If your icon or badge only exists as a PNG or JPG, you can convert it to SVG. I use aivectorizertools.com for this. Full disclosure: I’m connected with this tool, so I’m a bit biased. Simple, high-contrast images with clean edges convert best. Complex photos usually don’t give good results as vectors.
Clean up after converting
Open the SVG in a vector editor and check for stray points, jagged edges, or missing details. A quick cleanup makes a big difference.
Make your favicon from the vector
Export a square PNG (at least 512x512) from your vector for your site favicon and social sharing image, so it looks sharp in browser tabs and link previews.
Check it on real devices
Look at your page on a phone and a large screen. Also test dark and light backgrounds if your graphic has transparent areas.
Reuse for print and merch
A clean vector also works for stickers, shirts, and packaging, so you don’t have to redo the artwork for each product.

What do you all use for preparing graphics for your sites? Any file-format tips that worked for you?

DEV Community: Ahmed shaikh

Icons, favicons and merch graphics on Squarespace: my workflow for getting crisp results from any image