tigtools

Favicon-Generator

Erstellen Sie ein vollständiges Favicon-Set aus Ihrem Logo oder aus ein bis zwei Buchstaben auf farbigem Hintergrund und kopieren Sie anschließend die HTML-Tags. Die Symbole werden in Ihrem Browser erstellt.

Läuft in Ihrem Browser Keine Anmeldung erforderlich

Erstellen aus

Am besten eignen sich ein oder zwei Zeichen. Es werden nur die ersten beiden verwendet.

62%
Form

Anleitung

  1. Wählen Sie „Buchstaben“ und geben Sie ein oder zwei Zeichen mit Ihren Farben ein. Oder wählen Sie „Bild“ und laden Sie ein Logo hoch (idealerweise quadratisch und mindestens 512 px groß).
  2. Prüfen Sie die Vorschau in allen Größen, besonders bei 16 und 32 px, die in Browser-Tabs angezeigt werden.
  3. Laden Sie die ZIP-Datei herunter und laden Sie deren Dateien in das Stammverzeichnis Ihrer Website hoch.
  4. Fügen Sie die HTML-Tags in den head-Bereich Ihrer Seiten ein und passen Sie bei Bedarf den Namen in site.webmanifest an.

So funktioniert es

Browser und Geräte suchen an unterschiedlichen Stellen nach Symbolen. Das hier erstellte Set deckt die gängigen Fälle ab: favicon.ico mit Bildern in 16, 32 und 48 px für Browser-Tabs, Lesezeichen und ältere Software, die automatisch /favicon.ico abruft; PNG-Dateien in 16 und 32 px, die über Link-Tags eingebunden werden; ein apple-touch-icon in 180 × 180 px, das verwendet wird, wenn jemand Ihre Website zum Home-Bildschirm eines iPhone oder iPad hinzufügt; sowie Symbole in 192 und 512 px, die in site.webmanifest für Android-Home-Bildschirme und installierbare Web-Apps referenziert werden.

Die Datei favicon.ico enthält die Symbole als PNG-Bilder in einem ICO-Container, den alle aktuellen Browser und Windows Vista oder neuer lesen können. Die ICO- und ZIP-Dateien werden direkt auf dieser Seite erstellt; nichts wird an einen Server gesendet.

Für kleine Größen ist ein einfaches Design nötig: Bei 16 × 16 Pixeln verschwinden dünne Linien und kleine Schrift. Ein fetter Buchstabe oder ein vereinfachtes Logo-Symbol funktioniert daher besser als ein vollständiges Logo mit Schriftzug. Das Bild wird in mehreren hochwertigen Schritten verkleinert. Das apple-touch-icon erhält immer eine deckende Hintergrundfarbe, da iOS transparente Bereiche schwarz darstellt. Die Ecken rundet iOS selbst ab.

Nach dem Hochladen neuer Symbole zeigen Browser möglicherweise noch eine Weile das alte Favicon an, da sie es aggressiv zwischenspeichern. Meist hilft es, die Seite vollständig neu zu laden oder /favicon.ico direkt zu öffnen.

Beispiele

Buchstabensymbol für ein neues Projekt

Mit „TG“ in weißen Buchstaben auf einem dunkelgrünen abgerundeten Quadrat entsteht ein klares Symbol, das im Browser-Tab auch bei 16 × 16 px gut lesbar bleibt – ganz ohne eigens gestaltetes Logo.

Symbol aus einem vorhandenen Logo

Ein PNG-Logo mit transparentem Hintergrund in 1024 × 1024 px und der Einstellung „Gesamtes Bild einpassen“ erzeugt transparente Tab-Symbole und ein apple-touch-icon in Ihrer Markenfarbe.

Breites Logo

Bei einem Schriftzug in 1200 × 300 px bleiben mit „Mitte zuschneiden“ nur die mittleren Buchstaben übrig. Mit „Gesamtes Bild einpassen“ bleibt alles sichtbar, wird aber sehr klein. Ein separates quadratisches Logo-Symbol sieht meist besser aus.

Häufig gestellte Fragen

Brauche ich favicon.ico noch?

Ja, es ist weiterhin nützlich. Einige Browser, Feedreader und Tools rufen /favicon.ico im Stammverzeichnis der Website ab, auch wenn kein Link-Tag vorhanden ist. Moderne Browser verwenden zusätzlich die in HTML referenzierten PNG-Symbole.

Wohin gehören die Dateien?

Laden Sie die Dateien in das Stammverzeichnis Ihrer Website hoch, neben der Startseite. So funktionieren /favicon.ico und die anderen Pfade im HTML. Wenn Sie einen Unterordner verwenden, passen Sie die Pfade in den Link-Tags und in site.webmanifest an.

Warum wird mein altes Favicon weiterhin angezeigt?

Browser speichern Favicons separat und lange im Cache. Laden Sie die Seite vollständig neu, öffnen Sie /favicon.ico in einem neuen Tab oder prüfen Sie die Website in einem privaten Fenster. Auch eine Umbenennung der Dateien, zum Beispiel in favicon-v2.ico, erzwingt das erneute Laden.

Erstellt das Tool ein SVG-Favicon?

Nein. Das Tool erstellt PNG- und ICO-Dateien, die überall funktionieren. Wenn Sie bereits ein SVG-Logo haben, können Sie es zusätzlich selbst mit einem Link-Tag vom Typ image/svg+xml einbinden.

Datenschutz

Die Symbole, die ICO-Datei und die ZIP-Datei werden in Ihrem Browser erstellt. Ihr Bild und Ihr Text werden weder hochgeladen noch gespeichert oder in Analysedaten aufgenommen.