Logo-Test
Auf dem Briefpapier sieht Ihr Logo gut aus, aber wie wirkt es mit 16 Pixeln im Browser-Tab, rund beschnitten als Profilbild oder auf dunklem Hintergrund? Laden Sie Ihr Logo hoch und sehen Sie es sofort in allen Situationen, in denen es im Alltag auftaucht. Zum Schluss erstellt das Tool alle Favicon-Dateien für Ihre Website samt Code.
Logo
Datei hierher ziehen oder
SVG, PNG, JPG oder WebP. Die Datei bleibt auf Ihrem Gerät, nichts wird hochgeladen.
Signet oder Bildmarke für kleine Größen (optional)
Datei hierher ziehen oder
Wenn vorhanden, wird es für Favicon und App-Icons verwendet.
Einstellungen für die Icons
Hintergrund
Einpassen
So wirkt Ihr Logo
Browser-Tab
Vergrößert: so viele Pixel hat das Favicon wirklich.
Google-Suchergebnis
Smartphone-Startbildschirm
iPhone verwendet apple-touch-icon.png und füllt Transparenz mit Schwarz. Darum ist diese Datei nie transparent.
Android, adaptives Icon
Links die volle Fläche mit Schutzzone (innere 66 %), rechts der runde Zuschnitt. Für Android enthält das Paket zusätzlich eine Fassung mit mehr Rand (maskable).
Profilbild in sozialen Netzwerken
Runder Zuschnitt mit 110 px, wie auf LinkedIn oder Instagram.
Kleine Größen in echter Größe
Heller und dunkler Hintergrund
Schwarzweiß
Funktioniert Ihr Logo in einer Farbe? Wichtig für Fax, Stempel, Prägung und Gravur.
Favicon-Paket
Alle Dateien für Browser, iPhone und Android in einem ZIP. Kopieren Sie die Dateien in das Hauptverzeichnis Ihrer Website und fügen Sie den Code in den <head> ein.
Inhalt des Pakets
Code für den <head>
Ein Logo für jede Größe
Ob neues Logo oder behutsame Überarbeitung: Wir gestalten Marken, die vom Favicon bis zur Hausfassade funktionieren. Wir freuen uns auf Ihre Nachricht.
So funktioniert das Tool
Sie laden Ihr Logo als SVG, PNG, JPG oder WebP hoch. Wer für kleine Größen ein eigenes Signet hat, also nur das Bildzeichen ohne Schriftzug, lädt es zusätzlich hoch. Alle Vorschauen entstehen live in Ihrem Browser.
Browser, Google und Startbildschirm
Sie sehen Ihr Logo im Browser-Tab hell und dunkel in 16 und 32 px, als Favicon im Google-Suchergebnis und als Icon auf dem Startbildschirm eines Smartphones. Eine Größenreihe von 16 bis 64 px zeigt, ab wann Details verschwimmen.
Runde Icons und Sicherheitszone
Android schneidet App-Icons oft rund zu, soziale Netzwerke zeigen Profilbilder im Kreis. Die Vorschau blendet die Sicherheitszone ein und warnt, wenn Teile Ihres Logos abgeschnitten würden.
Hell, dunkel und einfarbig
Ihr Logo erscheint auf hellem und auf dunklem Hintergrund, mit einer Warnung bei zu wenig Kontrast. Dazu kommen eine Schwarz-Weiß-Fassung und eine einfarbige Version, wie sie etwa für Stempel, Gravuren oder Faxe gebraucht wird.
Hintergrund und Innenabstand
Sie wählen eine Hintergrundfarbe oder lassen den Hintergrund transparent und stellen den Innenabstand ein. Gerade bei Icons macht etwas Luft rund um das Zeichen oft den Unterschied zwischen gedrängt und souverän.
Favicon-Paket als ZIP
Mit einem Klick laden Sie alle Dateien herunter: favicon.ico mit 16, 32 und 48 px, icon.svg bei einem SVG-Logo, apple-touch-icon mit 180 px, icon-192 und icon-512, ein maskierbares Icon für Android und die site.webmanifest. Dazu bekommen Sie den passenden HTML-Code für den <head> Ihrer Website.
Warum ein Logo auch winzig funktionieren muss
Die meisten Menschen sehen Ihr Logo nicht groß auf einem Plakat, sondern klein: im Browser-Tab, in den Lesezeichen, neben Ihrem Eintrag in den Google-Suchergebnissen oder als Icon am Handy. Dort entscheidet ein Feld von wenigen Pixeln, ob Ihre Marke wiedererkannt wird.
Feine Linien, lange Schriftzüge und zarte Farbverläufe gehen in diesen Größen verloren. Deshalb haben starke Marken neben dem vollständigen Logo ein reduziertes Signet, das auch mit 16 Pixeln noch klar erkennbar ist.
Genauso wichtig ist eine einfarbige Fassung. Ein Logo, das nur in Farbe auf Weiß funktioniert, stößt schnell an Grenzen: auf dunklen Flächen, auf Fotos, bei der Gravur oder im Siebdruck auf Textilien.
Ein vollständiges Favicon-Paket sorgt dafür, dass Ihre Website auf jedem Gerät ordentlich auftritt. Fehlt es, zeigen Browser und Smartphones ein graues Standardsymbol oder einen unscharfen Ausschnitt, und das wirkt unfertig.
Code für den <head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Legen Sie die Dateien aus dem ZIP direkt in das Hauptverzeichnis Ihrer Website und fügen Sie diese Zeilen in den <head> ein. Bei WordPress laden Sie das Icon einfacher im Customizer unter „Website-Icon“ hoch.
Häufige Fragen zum Logo-Test
Welches Dateiformat eignet sich am besten?
Was ist ein Signet und brauche ich eines?
Was ist ein maskierbares Icon?
Warum zeigt Google mein neues Favicon noch nicht an?
Mein Logo hat auf dunklem Hintergrund zu wenig Kontrast. Was tun?
Werden meine Eingaben gespeichert?
Passende Tools
Marken-Check
Liest Farben, Schriften, Logo und Favicon Ihrer Website aus und zeigt sie als kompakten Styleguide mit Hex-Codes.
Farbkontrast-Prüfer
Prüft, ob Text- und Hintergrundfarbe gut lesbar sind, schlägt passende Farbtöne vor und testet Ihre ganze Markenpalette auf einmal.
Läuft nur im Browser, nichts wird übertragen
Bilder verkleinern
Macht Fotos für Ihre Website leichter und schneidet sie passgenau für Instagram, LinkedIn, Facebook und YouTube zu, direkt im Browser.
Läuft nur im Browser, nichts wird übertragen
Eine Marke, die überall wirkt
Wir entwickeln Logos, Corporate Designs und Styleguides, die auf Website, Social Media und Drucksorten gleich stark auftreten. Erzählen Sie uns von Ihrem Vorhaben.
Kontakt aufnehmen