The site logo will be the most recognisable visual feature of your site, and you should take much care in designing a visually appealing, unique and representative logo image for this item.
In the Nuropa template, the sitelogo will be displayed in the search bar, right of the actual search field.
In the template settings, the “Site logo” setting lets you configure to use either a logo image, or a static HTML snippet to be displayed in this location.
The default setting is to use a logo image. In this case, you can simply upload a file called either “logo.svg”, or “logo.png” to the wiki using the Media Manager. This file can be located either in the wiki’s root directory, or in the wiki: namespace.
If multiple logo files are present, SVG takes precedence over PNG, and the root directory ranks higher than the wiki: namespace.
To use an HTML snippet instead, simply upload a text file with the name “sitelogo.html” to the wiki’s config directory and change the setting mentioned above. The file will be loaded in the same context as the image file.
Note that formatting an HTML file to work as an interactive site logo can be complex and requires good HTML, CSS and probably also JavaScript skills. All of this is outside of the scope of this documentation.
Because of the general layout of the header, the ideal logo have a format of about 2:1 (width to height), similar to the placeholder logo installed.
The default logo has an intrinsic height of 64 pixels, which fits well with the layout. Other sizes will be scaled to fit in this place.
Make sure to test your logo design with different screen sizes, especially with phones, as scale is most critical in reduced space situations.
In many cases it is a good practice to download the placeholder image from this site and modify it to your needs.
There are two different formats allowed for the logo image file: SVG and PNG (the common JPEG format has been deliberately excluded, as it leads to low quality with typical logo graphics). Both have their advantages and disadvantages:
It is obviously a good idea to chose colours for your logo that fit to the design of your page – or rather the other way around, as in most cases the “corporate identity” is a given and the web design will have to adapt.
However, if you are using the “dark mode” option for your wiki, please make sure that the logo colours also match with this alternative colour scheme. Finding the right compromises between the two can be challenging.
Please see Banners page for some info on how to handle dark-mode for graphics. An additional hint that may be useful for logos specifically is to use an outline in the same or similar colour as the background, which creates enough contrast in the dark mode for the logo to work here, too.
A collection of logo examples for download:
