Das Logo ist oft das Erste, was ein Besucher von einem Betrieb wahrnimmt, und auf der Website hat es weniger Platz als auf dem Firmenwagen oder dem Briefkopf. Oben links in der Kopfzeile steht es kaum höher als zwei Textzeilen, am Handy teilt es sich die Zeile mit dem Menüknopf, und im dunklen Modus liegt es plötzlich auf fast schwarzem Grund. Dazu kommt eine Aufgabe, die auf Papier fehlt: Das Logo ist ein Link zur Startseite und braucht einen Text für alle, die es nicht sehen. Genau dort hapert es im Web häufig. Auf 53,1 Prozent der Startseiten der eine Million meistbesuchten Websites fand WebAIM im Februar 2026 Bilder ohne Alternativtext (WebAIM Million 2026). Dieser Beitrag ordnet die drei gängigen Logoformen ein, also Wortmarke, Symbol mit Text und Monogramm, und zeigt, wann welche passt. Er erklärt, warum ein Logo für die Website eine Quer- und eine Kompaktfassung braucht, wie viel Platz es in der Kopfzeile am Handy hat, wie helle und dunkle Fassung zusammenspielen, warum SVG meist die bessere Datei ist als ein Rasterbild und welcher Alternativtext zum verlinkten Logo gehört. Zum Schluss geht es darum, wie Sie das in XICflow einrichten.
Was ein Logo auf der Website leisten muss
Ein Logo für Druck und Beschilderung wird für eine feste Fläche entworfen: Das Schild über der Tür hat seine Breite, der Briefkopf seinen festen Platz. Auf der Website ändert sich die Fläche mit jedem Gerät.
Am breiten Bildschirm steht das Logo links in einer Kopfzeile, die genug Raum für Menü und Knopf lässt. Am Handy bleibt dafür eine schmale Zeile, in der zusätzlich der Menüknopf Platz finden muss. Für diesen Fall setzt WCAG 2.2 eine Messlatte: Inhalte sollen sich bei einer Breite von 320 CSS-Pixeln ohne Scrollen in zwei Richtungen darstellen lassen; das entspricht einem 1.280 CSS-Pixel breiten Fenster bei 400 Prozent Zoom (W3C, WCAG 2.2, Erfolgskriterium 1.4.10). Ein Logo, das in diese Breite nur noch als winziger Strich passt, ist am Handy kein Logo mehr. Damit hat ein Logo auf der Website vier Aufgaben, die auf Papier nicht vorkommen. Es muss in kleiner Darstellung lesbar bleiben. Es muss auf hellem und auf dunklem Grund funktionieren. Es muss als Datei scharf und schnell laden. Und es ist ein Bedienelement: Viele Websites verlinken das Logo mit der Startseite, eine so verbreitete Konvention, dass Screenreader-Nutzer einen Bildlink mit dem Firmennamen oben auf der Seite als Weg zur Startseite erkennen (WebAIM). Für Menschen, die eine Seite hören statt sehen, besteht dieser Link nur aus dem Text, der hinter dem Bild hinterlegt ist. Wer ein Logo für die Website vorbereitet, arbeitet diese vier Punkte ab, bevor es um Feinheiten der Gestaltung geht. Wie Überschrift- und Textschrift neben einer Wortmarke wirken, beschreibt der Beitrag Schriften für die Website wählen.
Drei Logoformen: Wortmarke, Symbol mit Text, Monogramm
Für die Website lassen sich Logos grob in drei Formen einteilen. Die Wortmarke ist der Name selbst als Schriftzug, ohne zusätzliches Zeichen. Bei Symbol und Text steht ein Bildzeichen neben oder über dem Namen.
Das Monogramm verdichtet den Namen auf Anfangsbuchstaben, meist in einer Grundform wie Kreis oder Quadrat. Welche Form passt, hängt weniger vom Geschmack ab als vom Namen, von der Branche und davon, wo das Logo überall stehen muss: in der Kopfzeile, im Browser-Tab, im Vorschaubild beim Teilen, auf dem Profilbild in sozialen Netzwerken.
Wortmarke
Passt zu kurzen, eigenständigen Namen und zu Betrieben, die unter ihrem Namen bekannt sind, etwa Kanzleien, Praxen oder Handwerksbetriebe mit Familiennamen. Der Name wird mitgelesen, ein Zeichen muss niemand erst lernen. Grenze: Lange oder zusammengesetzte Namen werden in der Kopfzeile am Handy sehr klein.
Symbol und Text
Passt, wenn ein Bildzeichen etwas über den Betrieb erzählt oder später allein stehen soll: im Browser-Tab, auf dem Firmenwagen, als Profilbild. Das Zeichen trägt die Marke auch dort, wo der Name keinen Platz hat. Grenze: Ein Symbol mit vielen feinen Linien wird klein zu einem Fleck.
Monogramm
Passt zu langen Namen, zu Namen aus mehreren Familiennamen und zu Betrieben, die ihr Kürzel ohnehin nutzen. Kompakt und annähernd quadratisch, damit gut geeignet für kleine Flächen. Grenze: Zwei oder drei Buchstaben sagen Fremden wenig; auf der Website gehört der ausgeschriebene Name in die Nähe.
Eine Faustregel für die Kopfzeile: Je länger der Name, desto eher lohnt sich ein Zeichen, das allein stehen kann. Ein kurzer Name passt als Wortmarke gut in eine Handyzeile. Ein langer Name mit Zusatz wie „Meisterbetrieb für Sanitär und Heizung“ passt nur noch, wenn er so klein wird, dass ihn kaum jemand liest. In diesem Fall trägt die Kombination aus Symbol und kurzem Namen besser, und der ausführliche Zusatz wandert als echter Text auf die Seite. Auch das Monogramm ist kein Ersatz für den Namen, sondern eine Abkürzung für Orte, an denen der Name schon bekannt ist oder daneben steht.
Wortmarke im Design, Wortmarke im Register
Quer und kompakt: zwei Fassungen für zwei Breiten
Viele Markenauftritte führen ein Logo in mehreren Anordnungen: eine Querfassung, in der Zeichen und Name nebeneinanderstehen, eine Hochfassung mit dem Namen unter dem Zeichen und eine Kompaktfassung, die nur aus Zeichen oder Monogramm besteht. Für die Website zählen vor allem zwei davon. Die Querfassung nutzt die Breite der Kopfzeile am Rechner, ohne sie in die Höhe zu treiben. Die Kompaktfassung braucht kaum Breite und bleibt dort erkennbar, wo nur ein Quadrat Platz hat.
Tabelle waagerecht wischen
| Fassung | Typischer Einsatz | Worauf achten |
|---|---|---|
| Querfassung: Zeichen und Name nebeneinander | Kopfzeile am Rechner und am Tablet, Fußzeile, E-Mail-Signatur | Seitenverhältnis so wählen, dass der Name in der Logo-Höhe noch lesbar ist |
| Hochfassung: Name unter dem Zeichen | Briefkopf, Aushang, großes Bild auf der Startseite | In der Kopfzeile meist ungeeignet, weil die Schrift auf einen Bruchteil der Höhe schrumpft |
| Kompaktfassung: Zeichen oder Monogramm allein | Browser-Tab, Symbol auf dem Startbildschirm, Profilbild, schmale Kopfzeilen | Klare Umrisse ohne feine Linien; der Name gehört dann als Text in die Nähe |
| Einfarbige Fassung | Dunkler Modus, Vorschaubilder, Stempel und Prägung | Muss ohne Verlauf, Schatten und Zweitfarbe funktionieren |
Ob eine Website zwischen Quer- und Kompaktfassung wechselt, entscheidet die Technik der Kopfzeile. In XICflow gibt es für das Logo in der Kopfzeile eine einstellbare Logo-Höhe, optional eine Breite und je ein Bild für den hellen und den dunklen Modus (XICflow-Dokumentation); eine eigene Fassung nur für das Handy wird dort nicht hinterlegt. Für die Praxis heißt das: Wählen Sie als Website-Logo die Fassung, die am Handy noch lesbar ist. Ist die Querfassung dafür zu lang, lohnt sich eine eigens für die Website gezeichnete Variante: ein kürzerer Schriftzug, ein etwas kleineres Zeichen, der Zusatz weggelassen. Das Favicon im Browser-Tab ist eine eigene Einstellung; was dabei zählt, steht im Beitrag Website teilen: Vorschaubild und Favicon richtig setzen.
Wie viel Platz das Logo in der Kopfzeile hat
Bei einem Logo in der Kopfzeile ist die Höhe die feste Größe, die Breite folgt aus dem Seitenverhältnis.
Ein quadratisches Monogramm in Logo-Höhe nimmt kaum Platz ein; eine Wortmarke, die siebenmal so breit wie hoch ist, braucht bei derselben Höhe die siebenfache Breite. Darum werden lange Querlogos am Handy so klein: Damit sie in die Zeile passen, muss die Höhe sinken, und mit ihr die Schrift im Logo. Wie viel Platz bleibt, lässt sich vorab grob rechnen. Von der schmalsten Breite, die eine Seite tragen soll, gehen die Seitenränder ab, der Menüknopf und ein Abstand dazwischen. Was übrig bleibt, ist die größte Breite für das Logo; geteilt durch die Logo-Höhe ergibt sich das längste Seitenverhältnis, das noch passt.
Schmalste Breite der Seite 320 CSS-Pixel (WCAG 2.2, 1.4.10)
- Seitenrand links und rechts [Wert aus der Vorlage]
- Menüknopf [Breite des Knopfs]
- Abstand zwischen Logo und Knopf [Wert aus der Vorlage]
= größte Breite für das Logo [Ergebnis]
größte Breite / Logo-Höhe = längstes Seitenverhältnis, das passt
Liegt das Logo darüber: Logo-Höhe senken oder kompaktere Fassung wählenWeil das Logo ein Link ist, zählt es zugleich als Tippziel. WCAG 2.2 verlangt auf Stufe AA für Ziele von Zeigereingaben mindestens 24 mal 24 CSS-Pixel, mit Ausnahmen etwa für ausreichend freistehende Ziele (W3C, WCAG 2.2, Erfolgskriterium 2.5.8). Ein Logo in Kopfzeilenhöhe erreicht diese Fläche in der Regel von selbst. Knapp wird es bei sehr flachen Wortmarken und bei Kopfzeilen, in denen das Logo dicht an Sprachumschalter, Telefonsymbol oder Menüknopf grenzt. Wie Tippflächen am Handy insgesamt bemessen sein sollten, zeigt der Beitrag Website auf dem Handy: lesbar und leicht bedienbar.
Am meisten leidet die Schrift im Logo. Zusätze wie „Meisterbetrieb seit ...“, eine Telefonnummer oder ein Slogan unter dem Namen werden in Kopfzeilenhöhe zu grauen Strichen. Was im Logo nicht mehr lesbar ist, gehört als echter Text auf die Seite, etwa in die Überschrift oder die Zeile darunter. Für die Schrift, die im Logo bleibt, gibt es eine Ausnahme: Nach WCAG 2.2 gelten Logotypen, also Text als Teil eines Logos oder Markennamens, als wesentlich und dürfen deshalb als Bild eingebunden werden (W3C, WCAG 2.2, Erfolgskriterium 1.4.5). Die Ausnahme gilt dem Logo, nicht einem Slogan, der als Bild daneben gesetzt wird. Und je weniger sonst oben am Bildschirm konkurriert, desto mehr Raum bleibt für das Logo; wie Hinweise erscheinen können, ohne die Kopfzeile zu verdecken, behandelt der Beitrag Popup auf der Website: Hinweise zeigen, ohne zu stören.
Hell und dunkel: zwei Dateien, ein Auftritt
Viele Geräte stellen Websites auf Wunsch dunkel dar, und viele Websites bieten einen Umschalter zwischen hell und dunkel. Ein Logo mit dunkler Schrift verschwindet auf dunklem Grund, ein Logo mit weißer Schrift auf hellem.
Die naheliegende Notlösung, das Logo auf einem weißen Kasten in die dunkle Kopfzeile zu setzen, wirkt wie ein Fremdkörper. Besser ist eine zweite Datei: dieselbe Form, dieselben Maße, nur mit Farben, die auf dunklem Grund tragen. Oft genügt es, die Schrift hell zu setzen und das Zeichen in der Markenfarbe zu lassen; ist die Markenfarbe selbst sehr dunkel, braucht auch das Zeichen eine hellere Stufe. In XICflow gibt es dafür zwei Stellen. Im Logo-Werkzeug unter „Marke & Design“ zeigt eine Vorschau das Logo auf hellem und auf dunklem Grund, bevor es übernommen wird (XICflow-Dokumentation). In den Einstellungen der Kopfzeile stehen „Logo-Bild URL (hell)“ und „Logo-Bild URL (dunkel)“ als zwei Bildvarianten für den hellen und den dunklen Modus. Wer eine eigene Logo-Datei verwendet, legt also beide Fassungen an und trägt die Adressen getrennt ein.
- Schrift im Logo hell setzen, das Zeichen in der Markenfarbe lassen, solange es auf dem dunklen Grund sichtbar bleibt
- Gleiche Abmessungen und gleicher Leerraum wie die helle Datei, damit beim Umschalten nichts springt
- Transparenter Hintergrund statt weißer Fläche; bei Rasterbildern die Kanten prüfen, damit kein heller Saum stehen bleibt
- Keine Schatten oder Leuchteffekte als Ersatz für eine passende Farbe
- Beide Dateien in derselben Kopfzeile ansehen, einmal hell und einmal dunkel, am Rechner und am Handy
Kontrast beim Logo
SVG statt Rasterbild
Ein Logo besteht aus klaren Flächen, Kanten und Schrift, und genau dafür ist das Vektorformat SVG gemacht. Eine SVG-Datei beschreibt Formen statt Bildpunkte und wird in jeder Größe neu gezeichnet.
MDN Web Docs nennt SVG für Bilder, die in verschiedenen Größen exakt gezeichnet werden müssen, und empfiehlt bei Symbolen, die Vektorfassung zu bevorzugen, sofern es eine gibt (MDN Web Docs). Im Web ist das Format trotzdem eine Minderheit: Auf Mobilseiten waren 6,4 Prozent der Bilder SVG-Dateien und 28,4 Prozent PNG (HTTP Archive Web Almanac 2024). Für Fotos ist ein Rasterformat richtig, für Logos verschenkt es Schärfe. Ein Rasterbild hat eine feste Zahl von Bildpunkten. Auf hochauflösenden Bildschirmen kommen auf einen CSS-Pixel mehrere Gerätepixel: Ein Verhältnis von 1 steht für einen klassischen Bildschirm, für hochauflösende Displays ist ein Wert von 2 zu erwarten, und manche Bildschirme liegen noch darüber (MDN Web Docs). Ein PNG-Logo, das genau so viele Bildpunkte hat, wie es in der Kopfzeile CSS-Pixel einnimmt, wird dort hochgerechnet und wirkt weich. Wer ein Rasterbild nutzen muss, exportiert es deshalb mindestens doppelt so breit und doppelt so hoch, wie es in der Kopfzeile angezeigt wird. Ebenso wichtig ist die Kompression: MDN rät, Bildschirmfotos, Diagramme, Logos und Strichzeichnungen verlustfrei zu speichern, weil Unschärfe und farbige Säume an Schrift und harten Kanten deutlich sichtbar sind (MDN Web Docs). Welche Formate, Bildgrößen und Alternativtexte für Fotos und andere Bilder passen, beschreibt der Beitrag Bilder auf der Website: Formate und Alternativtexte; hier geht es nur um das Logo.
Tabelle waagerecht wischen
| Format | Art | Transparenz | Für das Logo |
|---|---|---|---|
| SVG | Vektor, in jeder Größe scharf | enthalten | erste Wahl, wenn eine saubere Vektordatei vorliegt |
| PNG | Raster, verlustfrei | enthalten | gute Ausweichlösung, mindestens in doppelter Breite und Höhe exportieren |
| WebP | Raster, verlustfrei oder verlustbehaftet | enthalten | verlustfrei gespeichert eine in der Regel kleinere Alternative zu PNG |
| JPG | Raster, verlustbehaftet | nicht enthalten | ungeeignet: Säume an Kanten, Kasten statt Transparenz |
| GIF | Raster, begrenzte Farbtiefe | eingeschränkt | nur für einfache Bewegung, sonst besser PNG |
Nicht jede Datei mit der Endung .svg ist eine gute Vektordatei. Manche Programme verpacken beim Export ein Rasterbild in eine SVG-Hülle; dann ist nichts gewonnen. Vor dem Hochladen lohnt ein Blick auf vier Punkte. Die Schrift ist in Pfade umgewandelt, denn ein als Bild eingebundenes Logo kennt die Schriften der Website nicht (XICflow-Dokumentation). Der Zeichenbereich liegt knapp um das Logo, sonst sitzt unsichtbarer Rand in der Kopfzeile und das Logo wirkt kleiner als eingestellt. Es sind keine eingebetteten Bilder, Skripte oder Programmreste enthalten. Und die Datei bleibt schlank. Ein Logo, das sich bewegt, ist übrigens eine eigene Entscheidung mit eigenen Regeln; der Beitrag Animationen auf der Website: dezent, ruhig, barrierefrei beschreibt sie.
Alternativtext: sagen, wohin der Link führt
Für Menschen, die eine Website mit einem Screenreader hören, ist ein Logo ohne Alternativtext ein Link ohne Namen.
Wie verbreitet das ist, zeigt die jährliche Auswertung der Startseiten der eine Million meistbesuchten Websites: 16,2 Prozent aller Bilder hatten dort keinen Alternativtext, und 45 Prozent dieser Bilder ohne Alternativtext waren verlinkt, mit der Folge, dass die Links nicht beschrieben waren (WebAIM Million 2026). Bei jedem vierten verlinkten Bild fehlte der Alternativtext (WebAIM Million 2026). Das Logo oben links ist auf vielen Seiten genau so ein verlinktes Bild.
Was in den Alternativtext gehört, beschreiben die Regelwerke im Kern gleich, mit Unterschieden im Detail. Grundlage ist WCAG 2.2: Jeder Nicht-Text-Inhalt braucht eine Textalternative, die denselben Zweck erfüllt (W3C, WCAG 2.2, Erfolgskriterium 1.1.1). Beim verlinkten Logo ist dieser Zweck das Linkziel. Die Bildanleitung der W3C Web Accessibility Initiative zeigt ein Logo als einzigen Inhalt eines Links zur Startseite und gibt ihm den Text „W3C home“, um zu sagen, wohin der Link führt (W3C WAI). Der HTML-Standard verlangt für einen Link, der nur aus Bildern besteht, Alternativtexte, die zusammen den Zweck des Links vermitteln; für ein Logo, das für einen Betrieb steht, nennt er dessen Namen und schließt das Wort „Logo“ ausdrücklich aus (WHATWG HTML Living Standard). WebAIM ergänzt eine Abwägung aus der Praxis: Für ein Logo, das zur Startseite verlinkt, reicht in der Regel der Firmenname, weil diese Verknüpfung eine verbreitete Konvention ist (WebAIM). Beide Wege sind vertretbar. Nicht hilfreich sind Texte, die nur die Bildart nennen, und Dateinamen. Beides kommt häufig vor: Rund 8,5 Prozent der Alternativtexte enden auf eine Dateiendung wie .jpg oder .png (HTTP Archive Web Almanac 2025), und 10,8 Prozent der Bilder mit Alternativtext trugen fragwürdige oder doppelte Texte, etwa „image“, „graphic“ oder einen Dateinamen (WebAIM Million 2026). Steht der Name des Betriebs neben dem Zeichen ohnehin als Text im selben Link, bekommt das Bild einen leeren Alternativtext, damit der Name nicht doppelt vorgelesen wird.
<!-- Logo als einziger Inhalt des Links: Text nennt Betrieb oder Ziel -->
<a href="/">
<img src="/logo.svg" alt="[Name des Betriebs], Startseite">
</a>
<!-- Zeichen neben dem ausgeschriebenen Namen: Bild ist Beiwerk -->
<a href="/">
<img src="/zeichen.svg" alt=""> [Name des Betriebs]
</a>
<!-- Nicht hilfreich -->
<img src="/logo.svg" alt="Logo">
<img src="/logo.svg" alt="logo-final-2.png">In XICflow schreiben Sie diesen Text nicht selbst, und es gibt dafür auch kein eigenes Feld. Der Logo-Link in der Kopfzeile bekommt automatisch den Namen der Website als zugänglichen Namen, und das Logo-Bild trägt den Namen als Alternativtext. Steht der Name ohnehin als Text neben dem Zeichen, bleibt der Alternativtext des Bildes leer. Damit folgt die Kopfzeile der Praxis, die WebAIM beschreibt. Umso wichtiger ist ein anderer Eintrag: der Name der Website. Er sollte so lauten, wie Kunden den Betrieb kennen, ohne Zusätze wie „Logo“ oder „Homepage“.
Das Logo in XICflow einrichten
Unter „Marke & Design“ führen drei Wege zum Website-Logo: „Wortmarke“, „KI-Logo“ und „Datei“ (XICflow-Dokumentation). Die Wortmarke setzt Ihren Namen als Schriftzug.
Unter „Markentext“ tragen Sie ihn ein, bis zu 40 Zeichen sind möglich (XICflow-Dokumentation); dazu wählen Sie eine Schriftgattung („Serifenlos“, „Serif“, „Monospace“ oder „Display“), die Stärke, eine Farbe oder einen Verlauf und den Abstand der Buchstaben. Das KI-Logo entwirft ein Vektor-Logo: Unter „Art“ wählen Sie zwischen „Wortmarke“, „Symbol + Text“ und „Monogramm“, unter „Hinweis (optional)“ beschreiben Sie Stil oder Motiv. Mit „Datei“ laden Sie ein vorhandenes Logo als PNG, JPG, WebP, GIF oder SVG hoch. Über den Feldern zeigt das Werkzeug das Logo auf hellem und auf dunklem Grund. Erst „Als Website-Logo übernehmen“ setzt es in die Kopfzeile; „Logo entfernen“ führt zum automatischen Markenzeichen zurück. Der Schalter „Logo aufs OG-Vorschaubild“ brennt ein Vektor-Logo weiß in das Vorschaubild für soziale Netzwerke; das gilt für Wortmarke und KI-Logo, die das Werkzeug als Vektor anlegt, nicht für eine hochgeladene Datei. Logo-Höhe, optionale Breite und die getrennten Bilder für den hellen und den dunklen Modus stellen Sie unter „Header & Footer“ ein. Welche Gestaltungswerkzeuge zu Flow Design gehören, zeigt die Leistungsseite; jedes Feld erklärt die Dokumentation zu Marke und Design.
- Form wählen: Wortmarke bei kurzem Namen, Symbol und Text, wenn das Zeichen auch allein stehen soll, Monogramm bei langem Namen mit ausgeschriebenem Namen in der Nähe.
- Fassung für die Kopfzeile festlegen: die Variante, die am Handy in der eingestellten Logo-Höhe lesbar bleibt.
- Datei vorbereiten: SVG mit Schrift in Pfaden und knappem Zeichenbereich, sonst PNG oder WebP verlustfrei und mindestens in doppelter Breite und Höhe.
- Dunkle Fassung anlegen und in der Vorschau auf hellem und dunklem Grund prüfen.
- Namen der Website prüfen, denn er wird zum Text des Logo-Links.
- Ergebnis am Handy und am Rechner ansehen, im hellen und im dunklen Modus, und dabei auch auf das Logo tippen.
Das Website-Logo ist eine eigene Fassung