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!
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.
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.
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
