Über das Tool „Favicon-Generator“
Ein Favicon ist das kleine Symbol, das Browser im Tab, in den Lesezeichen und beim Hinzufügen einer Website zum Startbildschirm eines Smartphones anzeigen. Der Favicon-Generator erstellt aus einem Bild, aus ein oder zwei Buchstaben oder aus einem Emoji alle Dateien, die eine Website braucht.
Sie erhalten favicon.ico, PNG-Icons für Browser, iPhone und Android, ein Web-Manifest und die HTML-Zeilen zum Einfügen in Ihre Seiten. Die Icons werden in Ihrem Browser gezeichnet; es wird nichts hochgeladen.
Anleitung
- Wählen Sie, woraus das Icon erstellt wird: „Bild“, „Text“ oder „Emoji“.
- Wählen Sie für ein Bild eine Datei aus und stellen Sie Innenabstand und Hintergrund ein. Geben Sie für Text ein oder zwei Zeichen ein und wählen Sie Schriftart, Farben und Form. Für ein Emoji tippen oder fügen Sie ein einzelnes Emoji ein.
- Prüfen Sie die Vorschau in 16, 32 und 180 Pixeln auf hellem und dunklem Hintergrund.
- Klicken Sie auf „favicon.zip herunterladen“, laden Sie die Dateien in das Stammverzeichnis Ihrer Website hoch und fügen Sie den HTML-Code in den <head> Ihrer Seiten ein.
Funktionen
- Drei Ausgangspunkte: Verwenden Sie ein Logo oder Foto (auch als SVG), ein oder zwei Buchstaben in jeder beliebigen Sprache oder ein Emoji.
- Alle Größen in einer ZIP-Datei: favicon.ico mit Icons in 16, 32 und 48 px, PNG-Icons in 16, 32, 180, 192 und 512 px sowie site.webmanifest.
- Scharf auch in kleinen Größen: Ein großes Master-Icon wird schrittweise verkleinert, sodass die Kanten selbst bei 16 px glatt bleiben.
- Bereit für das iPhone: Das Apple Touch Icon erhält einen deckenden Hintergrund, weil iOS transparente Stellen schwarz darstellt.
- Datenschutz: Die Icons werden auf Ihrem Gerät gezeichnet. Es wird nichts hochgeladen oder gespeichert.
Beispiele
Schnell ein Icon für eine neue Website
Geben Sie den ersten Buchstaben des Website-Namens ein, wählen Sie Ihre Markenfarbe und die Form „Abgerundet“ und laden Sie dann die ZIP-Datei herunter.
Aus einem Logo ein Favicon machen
Wählen Sie das Logo als SVG oder PNG, fügen Sie etwas Innenabstand und eine Hintergrundfarbe hinzu, damit es auch auf dunklen Browser-Tabs sichtbar bleibt.
Einschränkungen und Hinweise
- Emojis sehen auf Geräten von Apple, Google und Windows unterschiedlich aus. Das Icon verwendet die Emojis des Geräts, auf dem Sie es erstellen.
- Text verwendet die auf Ihrem Gerät installierten Schriften (die serifenlose Systemschrift, Georgia oder die Festbreitenschrift des Systems).
- Ein SVG-Favicon wird nicht erstellt; die Dateien sind PNG und ICO, die jeder Browser unterstützt.
- Die Dateien funktionieren erst, wenn Sie sie in das Stammverzeichnis Ihrer Website hochladen, neben die Startseite.
Häufige Fragen
Wird mein Bild hochgeladen?
Nein. Das Bild wird von JavaScript in Ihrem Browser geöffnet, die Icons werden dort gezeichnet und in die ZIP-Datei gepackt.
Welche Dateien brauche ich wirklich?
favicon.ico allein deckt den Browser-Tab in jedem Browser ab. Die PNG-Dateien, das Apple Touch Icon und site.webmanifest sorgen für schärfere Icons auf hochauflösenden Bildschirmen, auf dem Startbildschirm des iPhones und unter Android.
Wohin kommen die Dateien?
In das Stammverzeichnis der Website, sodass das Icon unter /favicon.ico erreichbar ist. Fügen Sie dann die HTML-Zeilen in den <head> jeder Seite ein.
Warum wird mein neues Favicon nicht angezeigt?
Browser speichern Favicons lange im Cache. Laden Sie die Seite mit geleertem Cache neu oder öffnen Sie sie in einem privaten Fenster, um das neue Icon zu sehen.