Favicon-Generator
Laden Sie Ihr Logo hoch und erhalten Sie alle Symbolgrößen, die Browser und Mobilgeräte erwarten, dazu das Manifest und den Code zum Einbinden.
Läuft komplett in Ihrem Browser. Ihre Eingaben verlassen dieses Gerät nicht.
Bild wählen
Datei hierher ziehen oder auswählen. PNG, JPG, SVG oder WebP.
Warum eine Datei längst nicht mehr reicht
Früher genügte eine favicon.ico im Wurzelverzeichnis. Heute fragen Geräte unterschiedliche Größen ab: der Browser-Tab eine winzige, das iPhone beim Ablegen auf dem Homescreen eine 180 Pixel große, Android für den Startbildschirm bis zu 512 Pixel. Fehlt die passende Größe, skaliert das Gerät selbst, und das Ergebnis ist matschig.
Dieses Werkzeug erzeugt die Größen, die tatsächlich gebraucht werden, und nicht die historische Liste mit vierzig Varianten. Dazu kommen das Manifest, das Android für den Homescreen liest, und der fertige HTML-Code zum Einbinden.
Die Falle mit der Transparenz
Ein Logo mit transparentem Hintergrund sieht im Browser-Tab gut aus, weil sich die Transparenz an das helle oder dunkle Design anpasst. Auf dem iPhone-Homescreen passiert etwas anderes: Dort wird Transparenz mit Schwarz gefüllt. Aus einem dunklen Logo auf transparentem Grund wird dann ein schwarzes Quadrat, in dem nichts mehr zu erkennen ist.
Deshalb zeigt die Vorschau hier beide Fälle nebeneinander. Wenn Ihr Logo dunkel ist, setzen Sie für das Paket eine helle Hintergrundfarbe.
Was ein Favicon leisten muss
Bei 16 Pixeln Kantenlänge ist Ihr vollständiges Logo mit Schriftzug nicht mehr lesbar. Was dort funktioniert, ist ein einzelnes Zeichen: der Anfangsbuchstabe, ein Symbol aus dem Logo, eine markante Form. Alles andere wird zu einem grauen Fleck.
Ein guter Test ist, das fertige Symbol in der Vorschau anzusehen und sich zu fragen, ob man es zwischen zwanzig offenen Tabs wiedererkennen würde. Wenn nicht, ist weniger Motiv meist mehr.
Wenn Sie ein SVG hochladen, landet es zusätzlich im Paket. Moderne Browser bevorzugen es, weil es in jeder Größe scharf bleibt.
Häufige Fragen
Nein. Die gesamte Umrechnung passiert in Ihrem Browser, die Datei verlässt Ihr Gerät zu keinem Zeitpunkt. Das gilt auch für das fertige ZIP, das wird ebenfalls lokal zusammengesetzt.
Ins Wurzelverzeichnis der Website, also dorthin, wo auch die Startseite liegt. Bei WordPress ist das der Ordner mit der wp-config.php. Der HTML-Code aus dem Paket gehört in den head-Bereich jeder Seite, bei WordPress meist über das Theme oder ein Plugin für eigenen Kopfbereich-Code.
Browser halten Favicons hartnäckig im Zwischenspeicher, teilweise über Tage. Testen Sie im privaten Fenster oder rufen Sie die Datei einmal direkt auf, also zum Beispiel ihre-website.de/favicon.ico. Erscheint dort das neue Symbol, ist alles richtig und der Rest ist Geduld.
favicon.ico, weil Browser sie auch ohne jede HTML-Angabe automatisch im Wurzelverzeichnis suchen. Sie enthält hier gleich drei Größen. Danach kommt apple-touch-icon.png für iPhone und iPad.
Sie beschreibt Android, wie Ihre Website heißen soll, wenn jemand sie auf den Startbildschirm legt, welches Symbol dafür genommen wird und welche Farbe die Browserleiste bekommt. Ohne Manifest funktioniert die Website normal weiter, das Ablegen auf dem Startbildschirm sieht nur weniger fertig aus.
Technisch ja, sinnvoll selten. Ein Foto wird bei 16 Pixeln zu einem farbigen Fleck. Wenn es unbedingt ein Foto sein soll, wählen Sie den Zuschnitt Füllen und einen Ausschnitt mit einem klaren, kontrastreichen Motiv in der Mitte.
Gerbig Digital
Wir prüfen Ihre komplette Website
Ein einzelnes Werkzeug beantwortet eine einzelne Frage. Wenn Sie wissen wollen, wo Ihre Website insgesamt steht, bei Sichtbarkeit, Technik und Sicherheit, sehen wir sie uns an und sagen Ihnen, was sich lohnt und was nicht. Unverbindlich und ohne Vertrag.