# Logos

In diesem Bereich legst Du die Logos und Icons fest. Ist der Viewport größer als **991px** wird das **Desktop** Logo angezeigt. Zwischen **991px** und **767px** wird das **Tablet** Logo angezeigt. Ist der Viewport kleiner als **767px** wird das **Mobil** Logo angezeigt.

Das Theme ermöglicht es Dir auch für den Footer und die Offcanvas Topbar ein separates Logo zu setzen.

## Header

Das Logo im Kopfbereich der Seite.

![](/files/C7mybWagOqSWbbMCYHpV)

## Sonstige

Das Favicon wird im Browser vor der URL angezeigt und das App- & Share-Icon wird beispielsweise als Vorschau angezeigt, wenn die Seite in sozialen Netzwerken geteilt wird.

## Kontrast Header

Setze Logos für die verschiedenen wählbaren Kontrast Header. In Verbindung mit der Funktion des überlagernden Headers kannst Du verschiedene Kontrast Header wählen. Mehr zu dieser Funktion findest Du im Bereich [Header > Header Kontrast](#kontrast-header).

* **Heller Header - dunkles Logo:** Wähle ein Logo mit Kontrast zu hellen Flächen.
* **Dunkler Header - helles Logo:** Wähle ein Logo mit Kontrast zu dunklen Flächen.
* **Invertierter Header - invertiertes Logo:** Wählen ein Logo mit einem Kontrast, der dem des Standardlogos entgegengesetzt ist.

## Footer

Das Theme unterstützt die Darstellung eines Logos im Footer der Seite. Im Bereich Footer kannst Du das Logo wahlweise in den Newsletter, in die Hotline-Spalte, in die Social Media Spalte oder in eine eigene Spalte positionieren.

Beispiel:

![Logo im Newsletter-Bereich](/files/OKdW6wGUwMrnzPa72Rdc)

## Offcanvas Top Bar

Um Deine Marke zu stärken, kannst Du ebenfalls ein Logo für die Offcanvas Top Bar ausspielen.

![](/files/CcXVaj6dJjrxeXROfnCy)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themedocs.zenit.design/styling/logos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.