Community forum for knowledge and support

Updated 11 months ago

Optimizing logo display on a website

At a glance

Anyone know the best way to use logos on a website? Seems like I'm missing something very obvious but I have SVGs of company logos I'd like to display on my site but they show up too big. Once I changed the max width for each to the 15-30% range they look great on desktop but appear much to small on mobile devices. Is there a better way to do this? Should I be using PNGs instead? Same happens for my main logo in navbar and footers. See attached images. Thanks!

B
I
A
8 comments

Save them as high quality PNG files and use PNGs instead of SVGs

Was able to fix by using PNGs and then changing the max width %s for each the desktop and mobile breakpoints, thanks!

Hey Ishan. I know you resolved this but wanted to offer my input. I use SVGs without any issues. I create a wrapper to put the logo link and image in and set a max REM to the wrapper for each breakpoint, this gives me more control on the logo size on all breakpoints. I prefer SVGs over PNGs for the smaller file size and load speed.

That’s a great idea, I will try this soon. Thanks!

Hey Angelo, getting more picky now that I'm getting my site out there and it's kind of bugging me that they're still not perfect on mobile -- I've tried PNGs and the containers like you mentioned. The logos still seem to be a bit blurry on mobile, and for some reason my Apple logo is super crisp? Just using max width in % on that one but the same strategy didn't seem to work for the others. Do you have any idea what I should do? Right now I am running containers for the Client Hub logo and second Google logo. Thanks.

Website: steerbayarea.com
Read Only: https://preview.webflow.com/preview/steerbay?utm_medium=preview_link&utm_source=design[…]y&preview=ddf06c01dc81ea69c5dec711d4a56e06&workflow=preview

I don't think that the client hub logo is vector. It's saved as an SVG but vectors won't blur. Try using this file.
Also, set the max width on the Div and use REM. Reset the max width on the image file on all breakpoints.

Try these as well for Google and Oracle. Let me know if you're still having trouble.

Thanks for sending over updated SVGs, unfortunately when I use these with a reset width and set a REM width for the DIVs they now are not showing up at all. Any idea why this could be? Also have a huge google logo showing up now on reload now have no clue why 😆

https://www.loom.com/share/1f2e6c5bdd0b4e3c811a88426280214c?sid=76ff2d71-29e4-4fb8-b5d7-584d44eb22be

Add a reply
Sign up and join the conversation on Slack