Wie groß dein Website-Logo sein sollte: Header-Höhe in CSS-Pixeln, Retina-2x-Dateien, SVG vs PNG, plus Größen für Favicon, Apple Touch Icon, Teilen-Bild und Google-Logo.
Es gibt keine einzelne vorgeschriebene Logo-Größe. Die meisten Website-Header zeigen das Logo auf dem Desktop etwa 32 bis 60 CSS-Pixel hoch und auf Handys etwas kleiner, die Breite folgt der Form des Logos. Nutze wenn möglich SVG, ansonsten exportiere ein PNG in doppelter Anzeigegröße, damit es auf hochauflösenden Bildschirmen scharf bleibt.
Logo- und Icon-Größen auf einen Blick (Stand Oktober 2026)
Fragen zur Logo-Größe kommen meist auf, wenn das Logo nach dem Livegang unscharf oder winzig wirkt. Die Lösung ist, in zwei Zahlen zu denken: die Anzeigegröße in CSS-Pixeln und die Dateigröße, die größer sein sollte. Lade unten dein eigenes Logo hoch, um beides in einem Desktop- und einem Handy-Header zu sehen, ohne dass etwas deinen Computer verlässt.
Kein Standard legt das fest. Als grobe Orientierung zeigen die meisten Header das Logo auf dem Desktop etwa 32 bis 60 CSS-Pixel hoch und auf Handys etwa 28 bis 44. Eine lange Wortmarke kann niedriger sitzen als ein kompaktes quadratisches Zeichen. Beurteile dein eigenes mit der Vorschau oben.
SVG ist ein Vektorformat, bleibt also in jeder Größe scharf und ist oft winzig. Nimm PNG, wenn das Logo fotografische Details enthält oder deine Plattform kein SVG akzeptiert, und exportiere es in doppelter Anzeigegröße.
Hochauflösende Bildschirme nutzen mehr als ein Gerätepixel pro CSS-Pixel. Ein 40 px hoch angezeigtes Logo wirkt auf einem 2x-Bildschirm scharf, wenn die Datei mindestens 80 px hoch ist. Mit dem img-Attribut srcset kannst du eine 1x- und eine 2x-Datei anbieten und den Browser wählen lassen.
Laut Google muss ein Favicon quadratisch und mindestens 8x8 px groß sein, empfohlen wird eines größer als 48x48 px. Unser Leitfaden zu Favicon-Größen listet die gängigen Dateien und das HTML, um sie einzubinden.
Googles Fotorichtlinien für das Unternehmensprofil nennen JPG oder PNG, 10 KB bis 5 MB, 720 x 720 px empfohlen und mindestens 250 x 250 px. Die Hilfeseite nennt keine eigenen Logo-Maße, ein quadratisches Logo mit 720 x 720 px ist also eine sichere Wahl.
Die Höhe kommt aus dem CSS, die Breite folgt der Form des Logos. Die Attribute width und height reservieren Platz, während es lädt.
logo.png ist 44 px hoch, [email protected] ist 88 px hoch. Auf hochauflösenden Bildschirmen wählt der Browser die 2x-Datei.
Ein Favicon, ein Apple Touch Icon und ein Teilen-Bild, jeweils aus deiner quadratischen Logo-Version erstellt.
Deine Logo-Datei
Bis du eine Datei wählst, wird ein Beispiel-Logo angezeigt.
Logo-Höhe im Header: {v} px
Desktop-Header
Menü
Bericht
Dateigröße: {w} x {h} px.
SVG skaliert in jeder Höhe ohne Unschärfe.
Für scharfe Ergebnisse auf 2x-Bildschirmen bei dieser Höhe sollte die Datei mindestens {v} px hoch sein.
Deine Datei ist groß genug für diese Höhe auf 2x-Bildschirmen.
Deine Datei ist kleiner, daher kann sie auf hochauflösenden Bildschirmen weich wirken.
CSS für diese Höhe
Deine Datei wird nur von deinem Browser gelesen und nie hochgeladen.
Beispiel-Logo
Dein Logo
Kostenlos starten · Keine Kreditkarte nötig