Site logo

Archived topic

Icon too small

9 replies · Started by Manuela on February 7, 2021

Viewing posts 1–10 of 10

Hello,

My site's icon appears to small in the browser. I have cropped it and uploaded it again, however I seem to run into the same issue.

Could you please help me with this?

Thank you,

Hi Manuela,

Which icon do you mean?

Hi Ying,

The favicon - the hummingbird image that appears in the browser next to my site's name.

Hi there,

The best way to make the favicon to appear bigger is to make sure it's cropped tightly.

For the favicon file image, consider cropping it this tight - https://share.getcloudapp.com/Jru1bLQJ - so the negative spaces aren't included when it's added as a favicon.

Hi Elvin,

Thank you for your answer!

I have tried to do what you suggest. This is what happens:

1. I crop the image tightly and upload it to Media Library, then go to Customize - Site identity, Site icon - change image, and when I select the Icon to be updated, I am forced to crop more from it. If I crop, then the Icon will not be whole.

or

2. I do not crop the image as tightly, I upload it to Media Library, go through the steps as above. When I select the icon, now because it has white space, when I crop (because I am forced to crop it), the icon still looks good. But then appears to small in the browser.

I updated many sizes and tried several times.

What can I do?

Thank you

Hi there,

you will need to modify your original image and make sure its a perfect square. This will resolve any cropping issues.

However, your image not be best suited to a favicon. As the image size is small and the resolution is low, a fine multi color design is not best. Would be advisable to keep the icon to 1 or 2 colors. Maybe a mono cutaway version of the icon would be best.

Hi David,

Thank you so much for your explanation!

I can modify the original image and make it a square.

What is a mono cutaway and how can I achieve one?

Thank you again

You would need to a photo/illustrator app and create a mono version of the image like this:

The first image is an SVG which can be edited in any SVG app like Adobe Illustrator, Affinity Designer, Inkscape etc. where you can change colors etc.

Hi David,

Thank you very much! Really appreciate how you went above and beyond to assist me with this.

Amazing support!

Glad to be of help.

This archived topic is closed to new replies.