Can't Fix Blurry Favicon

Ask us anything
1

I’ve attempted to upload different files and formats for my favicon and it always showcases extremely blurry in all of my browsers.

App I’m using to export: Adobe Illustrator

Formats I’ve tried with no avail:

  1. 64x64 px PNG
  2. 32x32 px PNG
  3. SVG
  4. .ico files are not getting uploaded in Weweb (assuming they are not supported, which is contrary to the documentation “Any valid favicon format is accepted”)

Browsers I’ve tested the favicon in:

  1. Chrome (Mac)
  2. Safari (Mac)

Export settings I’ve tried in Illustrator:

  1. PNG - Art Optimized (supersampling)
  2. PNG - Type Optimized (Hinted)
  3. Tried with and without “pixel perfect” Illustrator option.
  4. Tried with and without background.

Design Notes:

  1. Tried with and without a solid background.
  2. Ensured artboard is square.
  3. Background is always transparent.

None of these options have helped and my favicon looks extremely pixelated.

Any help is appreciated, thank you.

3 Likes
2

Hey @jose,

I’m experiencing the exact same issue!

Tried uploading the favicon in multiple formats — no luck.

Hard to believe we’re the only ones facing this blurry favicon problem in WeWeb…

I also reached out to WeWeb support. They suggested I try uploading the favicon as an SVG, but that didn’t solve the issue. After that, I never heard back from them.

I’ve tested all kinds of favicon variations — still no luck.

3

I kind of gave up on this issue :frowning: the only thing I haven’t tried is converting the image to webp and trying to set it with this format. If you try it let me know if it works! :blush:

4

Hey Jose, I contacted support again today and they suggested the following solution.

Hope this helps you!

Can you try passing multiple sizes to the app’s custom code head? Upload favicons with different sizes, then paste this in the head:

<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.weweb.io/…/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.weweb.io/…/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="https://cdn.weweb.io/…/favicon-48.png">