General Settings

Logo

Accepted extensions: png, jpeg, jpg, gif, svg, webp.

A logo is a visual symbol that represents your website or brand. It helps users quickly recognize your forum and builds trust and identity over time. In Zeina, you can customize the logo to match your forum’s style and colors.

Logo Recommendations

We recommend using SVG files for your website logo due to their:

  • High resolution on all screen sizes.
  • Small file size, which improves loading speed.
  • Support for transparent backgrounds.

You can also easily change the logo color to match your theme’s primary color, as shown in the following tutorial.

Tutorial:

Save this code as SVG file and upload it.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <style>
    path.logo-path { fill: rgb(var(--color-primary)) }
    .dark path.logo-path { fill: rgb(var(--color-primary-dark)) }
  </style>
  <path class="logo-path" d="M472.609,336H339c-8.828,0-16.008-7.156-16.008-16 c0-8.828,7.18-15.984,16.008-15.984h128.227c6.492,0,11.773-5.383,11.773-12c0-0.969-0.258-1.867-0.469-2.766 c-12.578-37.922-47.594-65.242-89.016-65.242c-51.992,0-94.125,42.984-94.125,95.992c0,53.031,42.133,96.008,94.125,96.008 c32,0,60.219-16.336,77.227-41.219l0.039,0.016c2.891-3.875,7.461-6.422,12.664-6.422c8.719,0,15.805,7.086,15.805,15.805 c0,3.211-0.969,6.188-2.617,8.68c-0.219,0.328-0.469,0.594-0.703,0.898c-22.727,32.758-60.062,54.25-102.414,54.25 c-69.32,0-125.523-57.32-125.523-128.016c0-70.68,56.203-128,125.523-128c59.055,0,108.461,41.656,121.828,97.703 c0.32,2.039,0.5,4.156,0.5,6.312C511.844,318.102,494.281,336,472.609,336L472.609,336z M431.992,160.016H336 c-8.844,0-16-7.176-16-16c0-8.844,7.156-16.004,16-16.004h95.992c8.852,0,16.008,7.16,16.008,16.004 C448,152.84,440.844,160.016,431.992,160.016L431.992,160.016z M16,160.016c8.844,0,16,7.156,16,15.984c0,8.844-7.156,16-16,16 c-8.828,0-16-7.156-16-16C0,167.172,7.172,160.016,16,160.016L16,160.016z M223,265.266c6.227,0,11.57,3.57,14.211,8.773 c11.836,17.742,18.797,39.039,18.797,61.961c0,61.859-50.156,112.016-112.008,112.016h-24.008h-7.984H40 c-22.078,0-40-17.922-40-40.008v-144c0-22.102,17.922-40,40-40h87.992h8c44.188,0,80.016-35.809,80.016-79.992 c0-44.188-35.828-80.012-80.016-80.012h-23.984H48c-8.844,0-16,7.176-16,16.004v32.004c0,8.824-7.156,16-16,16 c-8.828,0-16-7.176-16-16V72.004C0,49.922,17.922,32,40,32h72.008h7.984h16c61.859,0,112.016,50.16,112.016,112.016 c0,53.582-37.727,98.164-88.008,109.156c0,0-10.531,2.836-16,2.836h-16.008h-15.984H44c-6.617,0-12,5.367-12,12v132 c0,8.828,7.156,16,16,16h64.008H144c44.18,0,80.008-35.82,80.008-80.008c0-16.828-5.219-32.414-14.102-45.297l0.141-0.109 c-1.898-2.633-3.047-5.844-3.047-9.344C207,272.422,214.156,265.266,223,265.266L223,265.266z" />
</svg>

Result:

logo tutorial 1 logo tutorial 2

So you can change the color of the logo by adding a new class name to the "path" and adding CSS codes like this:

<style>
  path.<YOUR_CLASS_NAME> { fill: rgb(var(--color-primary)) }
  .dark path.<YOUR_CLASS_NAME> { fill: rgb(var(--color-primary-dark)) }
</style>

How to Set the Logo in the Header

You can easily move the logo from the navbar to the header area to better fit your site’s layout and design.

Enable the option "Set logo on header?"

logo on header tutorial

Result:

logo on header example