Favicon-Generator: favicon.ico, PNG und Apple Touch Icons erstellen
favicon.ico, PNG-Favicons, ein Apple Touch Icon und ein Web-App-Manifest im Browser aus einem Bild oder Text erstellen – mit HTML-Tags zum Kopieren.
Bild hier ablegen oder auswählen
PNG, JPG, WebP, GIF (erstes Einzelbild), BMP oder SVG. Ein quadratisches Bild mit mindestens 512 × 512 Pixeln eignet sich am besten.
Der Text wird mit den auf diesem Gerät installierten Schriftarten gezeichnet, daher können Buchstaben und Emojis auf einem anderen Computer oder Smartphone anders aussehen. Die heruntergeladenen PNG- und ICO-Dateien behalten das Aussehen, das Sie hier sehen.
Vorschau
16, 32 und 48 werden in ihrer tatsächlichen Größe angezeigt, die größeren Icons verkleinert. Das Schachbrettmuster kennzeichnet transparente Bereiche.
In einem Browser-Tab
Eine vereinfachte Tableiste im hellen und im dunklen Design. Prüfen Sie, ob das Icon auf beiden sichtbar ist: Ein dunkles Logo auf transparentem Hintergrund kann auf einer dunklen Tableiste verschwinden.
Dateien
Manche Apple-Geräte zeigen transparente Teile eines Home-Bildschirm-Icons schwarz an, daher wird apple-touch-icon.png ohne Transparenz gespeichert: Transparente Bereiche werden mit dieser Farbe gefüllt. Die Formeinstellung wird darauf nicht angewendet, weil iPhone und iPad die Ecken von Home-Bildschirm-Icons selbst abrunden.
Wird in den HTML-Tags und im Manifest verwendet. „/“ steht für das Stammverzeichnis der Website.
Die Einstellungen für Hintergrund, Form, Innenabstand und Zuschnitt werden nicht auf favicon.svg angewendet.
Browser können die Designfarbe verwenden, um die Adressleiste oder die Titelleiste des Fensters einzufärben. Die App-Hintergrundfarbe wird angezeigt, während eine installierte Web-App startet.
Wählen Sie ein Bild aus oder wechseln Sie zu Text, um zu beginnen.
Inhalt von site.webmanifest
Hinweise
- Laden Sie die Dateien in das Stammverzeichnis Ihrer Website hoch (den Ordner, der die Startseite enthält), oder geben Sie oben einen anderen Ordner an, damit die Pfade im HTML und im Manifest stimmen.
- favicon.ico enthält Bilder in 16 × 16, 32 × 32 und 48 × 48 Pixeln, die als PNG-Daten gespeichert sind. Aktuelle Browser und Windows Vista oder neuer können das lesen; manche sehr alte Programme lesen nur unkomprimierte Icon-Bilder.
- Kleine Ausgangsbilder, etwa ein Bild mit 64 × 64 Pixeln, werden für die größeren Icons vergrößert und wirken unscharf. Verwenden Sie nach Möglichkeit ein Bild mit mindestens 512 × 512 Pixeln oder eine SVG-Datei.
- Text-Icons verwenden die Schriftarten, die auf dem Gerät installiert sind, auf dem Sie sie erstellen. Die PNG- und ICO-Dateien behalten dieses Aussehen, aber wenn Sie das Icon auf einem anderen Gerät erneut erstellen, kann das Ergebnis anders aussehen.
- SVG-Dateien werden von Ihrem Browser gezeichnet. Bilder, Schriftarten oder Stile, die eine SVG-Datei aus anderen Dateien oder von anderen Websites lädt, werden nicht geladen und können in den Icons fehlen.
- Browser speichern Favicons lange in ihrem Cache. Nachdem Sie ein Favicon ersetzt haben, kann das alte noch eine Weile erscheinen; ein erzwungenes Neuladen, ein privates Fenster oder ein geänderter Dateiname im HTML kann helfen.
- Bilder und Text werden in Ihrem Browser verarbeitet und nicht zu LeedyBox hochgeladen.
So geht's
- Wählen Sie „Bild“ und wählen Sie Ihr Logo aus oder legen Sie es ab, oder wählen Sie „Text oder Emoji“ und geben Sie bis zu drei Zeichen ein.
- Legen Sie Hintergrund, Form und Innenabstand fest und prüfen Sie die Vorschauen und den Browser-Tab im hellen und im dunklen Design.
- Geben Sie optional den Namen der Website, den Kurznamen, die Designfarbe und den Ordner ein, in dem die Dateien gespeichert werden.
- Klicken Sie auf „Favicon-Dateien erstellen“ und laden Sie die Dateien dann einzeln oder alle zusammen als favicon-package.zip herunter.
- Laden Sie die Dateien auf Ihre Website hoch und fügen Sie die kopierten HTML-Tags in den head-Bereich Ihrer Seiten ein.
Häufig gestellte Fragen
Werden meine Bilder auf einen Server hochgeladen?
Nein. Das Bild bzw. der Text wird in Ihrem Browser gezeichnet und umgewandelt, und die Dateien werden auf Ihrem Gerät erstellt. Es wird nichts an LeedyBox gesendet. Beim Laden der Seite wird nur die ZIP-Bibliothek heruntergeladen, direkt von leedybox.com.
Welche Bilder kann ich verwenden, und gibt es Beschränkungen?
Dateien in PNG, JPG, WebP, GIF (erstes Einzelbild), BMP und SVG. SVG-Dateien dürfen bis zu 10 MB groß sein. Sehr große Fotos (über etwa 50 Megapixel) können auf Smartphones wegen des benötigten Arbeitsspeichers fehlschlagen. Ein quadratisches Bild mit mindestens 512 × 512 Pixeln oder eine SVG-Datei liefert die schärfsten Ergebnisse.
Warum wirkt mein Favicon unscharf oder schwer lesbar?
Ein 16-Pixel-Icon bietet sehr wenig Platz. Einfache Formen, starker Kontrast und ein oder zwei Buchstaben funktionieren besser als detaillierte Logos oder langer Text. Kleine Ausgangsbilder werden für die größeren Formate vergrößert und wirken unscharf. Prüfen Sie die Vorschauen und versuchen Sie es mit weniger Innenabstand oder einer einfacheren Version Ihres Logos.
Welche dieser Dateien brauche ich?
favicon.ico und die PNG-Dateien mit 16 und 32 Pixeln werden von Desktop-Browsern verwendet, apple-touch-icon.png von iPhone und iPad. Die Icons mit 192 und 512 Pixeln sowie site.webmanifest werden verwendet, wenn die Website zu einem Home-Bildschirm hinzugefügt oder als Web-App installiert wird. Wenn Sie alle zusammen mit den HTML-Tags verwenden, sind die üblichen Fälle abgedeckt.
Warum hat apple-touch-icon.png keine Transparenz?
Manche Apple-Geräte zeigen transparente Teile eines Home-Bildschirm-Icons schwarz an. Das Tool füllt transparente Bereiche daher mit der gewählten Farbe (standardmäßig Weiß) und lässt die Ecken eckig, weil iPhone und iPad sie abrunden.