Favicon not being small engough

hey Webflowers,

this technically might not be a webflow specific problem, but I thought some of you might have run into this before.
I wanna create a favicon in Illustrator and anytime I save the image and made sure that it is max
32 by 32 px my computer still saves it as a much larger image. Because of this Webflow won’t let me upload it.

Appreciate the responses!

Cheers!

Sometimes illustrator adds an extra pixel in there… pretty annoying.
You could resize the image with photoshop or even the good old apple preview and set 32x32 from there and it should work fine.

hi @pepperclip,

I’m on Windows ( for now haha ), I tried it with PS as well, same thing happened. I might borrow a mac or something.

Thx for helping I’ll try it

cheers

Before checking things like origin point of the design asset for your icon, start to make sure that your artboard (document) is set to 32 × 32 pt. Then export your image using File > Export for screens, then select the appropriate artboard, then PNG format, make sure it’s at 1× and export.

If that’s of any help, you can try to use my AI template for Webflow assets. This will help you design, generate and export all the assets you need to set up a new site.

Hi Vincent,

I did exactly that, I don’t even think anymore that it’s an illustrator thing.

Holy cow, thank you Vincent that’s super generous of you! :grin:

1 Like

That’s great if you find a usage for it. Since I’ve created this doc, I use it as the starter vector design document for all of my projects, so I start with those assets — I like that the first draft the client see already has a favicon, OG image, webapp icon etc — and will draw and compose everywhere around, add the brand and project colors, add artboards and AI assets… It proved to be a super efficient and time-saving workflow.

1 Like

You’re awesome Vincent, I don’t know how I could thank you