Logo Image format for resizing when scrolling

Support
#1

I am new to building websites, I want to know what should my image format be for my logo (svg, png, etc.) if I want it to shrink when I scroll down on the page.

If png, what should the resolution be so its clear on all devices.

Also, please inform me if there are any limitation to file formats for these logos (I know that the website Favicon needs to be in .ico format or it will now show up on iOS Safari browsers). Is there any such limitations on the normal website logo as well?

Thanks,
Gajender

#2

Hello @Gajender,

Thanks for writing in! We recommend that you use .png if you need opacity for your logo. You can use .jpg if your logo image just an ordinary logo image. You are using the X theme. By default, there is no shrinking logo image. You will need some customization in order to do that. Perhaps this thread can help you with that:

Hope this helps.

#3

Thanks for the help @RueNel, I have some more follow-up:

  1. I don’t want the logo to be opaque, I want the logo’s background to be transparent, so that if I change the website banner/heading/Nav-bar color, the logo would match with the change in color scheme. What would you suggest in this case?

  2. I understand dynamic image resizing need customization, but what resolution and file format would ensure a crisp image in both scenarios?

  3. I know that WordPress doesn’t natively support .svg file format, and I know how to customize and add that functionality, so would this be a better option for me in this scenario given my requirements stated above?

Thanks again

#4

Hello @Gajender,

1.) The .jpg or .png should be fine.

2.) It does not matter which format as long as the image dimension is decent enough for resizing. Smaller image size will be blurry when you enlarge it. The dimension should be at least 500x500 so that when you resize it smaller, it will still display nicely.

3.) The logo image only accepts .jpg or .png image format which you can do that in X > Theme Options > Header > Logo - Image. You cannot insert a .svg for the logo image. It might be possible with custom modifications of the header which is beyond the scope of our support already.

Best Regards.

#5

Awesome, Thanks for the help

#6

You are most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.