Streaming live at 10am (PST)

Blurry Favicon / Optimization help

I have a general question regarding favicons.
How do you make the Favicon look crisp and not blurry?
For example the Google “G” Favicon looks very sharp, even though it has a curve.

Does anyone have an idea how to optimize it?

Thanks!

Hi @Duskolo,

I would try upload a 32x32 png image.
Always worked fine with me.

57

Hope that helps.

@Duskolo Here is my workflow on the favicon using Adobe products. Hope this helps, and if you don’t have Adobe products or something similar, feel free to send me your file. Here’s a quick rundown of what I do, and from my experience, it won’t get crisper than this:

  1. Start with a .svg of your favicon mark
  2. Make it 32x32px in Illustrator
  3. Open the svg in Photoshop on a 32x32 canvas
  4. Remove the white background
  5. Save in a lossless .png with the highest file size
  6. Upload to Webflow

Let me know if this solves your problem, thanks!

2 Likes