Nein. SVG wird als Eingabeformat akzeptiert, das Paket enthält jedoch PNG-Rasterbilder und eine ICO-Datei. Es erstellt kein vektorbasiertes oder animiertes Favicon.
Favicon-Generator
Erstellen Sie aus einem Bild ein ZIP mit einer ICO-Datei in mehreren Größen, fünf PNG-Icons und einem Webmanifest. Nutzen Sie das folgende Einbindungsbeispiel, um die Dateien mit Ihrer Website zu verknüpfen.
Das könnte Ihnen auch helfen:App-Icon erstellen·PNG in ICO umwandeln·Bildgröße ändern·Bild komprimieren
Dateien im Favicon-Paket
Der Download heißt favicon-package.zip und enthält sieben Dateien. Der HTML-Code wird in diesem Artikel als Einbindungsbeispiel gezeigt und ist keine Datei im ZIP.
| Datei | Größe oder Inhalt | Zweck |
|---|---|---|
| favicon.ico | 16×16, 32×32 und 48×48 in einer Datei | Ein Website-Icon in mehreren Größen. |
| favicon-16x16.png | 16×16 | Kleines Browser-Icon. |
| favicon-32x32.png | 32×32 | Größeres Browser-Icon. |
| apple-touch-icon.png | 180×180 | Icon zur Einbindung auf dem Apple-Startbildschirm. |
| android-chrome-192x192.png | 192×192 | Icon, auf das das Webmanifest verweist. |
| android-chrome-512x512.png | 512×512 | Größeres Icon, auf das das Webmanifest verweist. |
| manifest.json | Website-Name, Farben und zwei Icon-Verweise | Eine Manifest-Vorlage, die Sie für Ihre Website prüfen sollten. |
Eingabeformate: PNG, JPG/JPEG, WebP, GIF oder SVG. Die Ausgabe besteht aus statischen ICO- und PNG-Bildern; durch das Hochladen einer SVG-Datei entsteht kein SVG-Favicon.
Favicon erstellen und Dateien einbinden
1
Eine gut erkennbare Vorlage wählen
Laden Sie ein einfaches Bild hoch. Für die größte PNG-Ausgabe eignet sich eine quadratische Vorlage mit mindestens 512×512 Pixeln; ein größeres Bild kann ein schlecht erkennbares Design nicht verbessern.
2
ZIP erstellen und herunterladen
Wählen Sie „Favicon-Paket erstellen“ und laden Sie das fertige ZIP herunter. Entpacken Sie es, bevor Sie die Dateien zu Ihrer Website hinzufügen.
3
Manifest prüfen und Dateien bereitstellen
Passen Sie den voreingestellten Website-Namen und die Farben in manifest.json bei Bedarf an. Stellen Sie die Dateien unter öffentlich zugänglichen URLs Ihrer Website bereit und aktualisieren Sie die Pfade, wenn Sie einen Unterordner verwenden.
4
HTML-Verweise ergänzen und prüfen
Verwenden Sie das folgende Beispiel im head-Bereich Ihrer Seite. Prüfen Sie, ob die Icon- und Manifest-URLs geladen werden, und kontrollieren Sie anschließend das Icon im Browser.
Icons in Ihre Website einbinden
Dieses Beispiel setzt voraus, dass die Dateien im Stammverzeichnis der Website bereitgestellt werden. Fügen Sie diese Verweise in den head-Bereich der Seite ein und passen Sie die Pfade an Ihre Bereitstellung an.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">Prüfen Sie diese Punkte, bevor Sie die Dateien veröffentlichen:
| Prüfpunkt | Was zu tun ist |
|---|---|
| Öffentliche Dateipfade | Der führende Schrägstrich steht für das Stammverzeichnis der Website. Aktualisieren Sie bei einem Unterordner sowohl die href-Werte im HTML als auch die src-Werte der Icons in manifest.json. |
| Manifest-Voreinstellungen | Die erzeugten Werte für name und short_name lauten My Website; theme_color und background_color sind #ffffff. Prüfen Sie diese Angaben nach dem Download. Diese Werte ändern die Farben der Icon-Bilder nicht. |
| Vorhandene Website-Konfiguration | Prüfen Sie, ob Ihr Theme oder Framework weitere Icon-Deklarationen einfügt. Lassen Sie neben der neuen Konfiguration keine Verweise auf ein altes Favicon bestehen. |
Ein Manifest mit Icons ist keine vollständige installierbare oder offlinefähige Web-App. Dieser Generator stellt keinen Service Worker bereit und garantiert keine Installation auf jedem Gerät.
Das Icon auch in kleinen Größen erkennbar halten
🔎
Das Ergebnis mit 16×16 Pixeln prüfen
Kleine Schrift und feine Konturen können verschwinden. Bevorzugen Sie ein einfaches Symbol, klare Kontraste und ausreichend Platz um das Motiv.
↔
Form und Ränder prüfen
Nicht quadratische Vorlagen werden mit transparenten Rändern in quadratische Bildflächen eingepasst. Kleine Vorlagen können vergrößert werden. Verwenden Sie ein vorbereitetes quadratisches Bild, wenn Sie den Bildausschnitt genau festlegen möchten.
Das passende Ausgabepaket für Ihre Aufgabe wählen
Diese Seite erstellt Website-Favicons aus einem vorhandenen Bild; sie ist kein Werkzeug zum Zeichnen von Logos.
Sie benötigen nur eine ICO-Datei?
Verwenden Sie PNG in ICO, wenn Sie PNG in ICO umwandeln möchten, ohne ein Website-Paket zu erstellen.
Sie entwickeln eine native mobile App?
Verwenden Sie den App-Icon-Generator für Bilddateien nativer iOS-/Android-Apps. Diese Dateien erfüllen eine andere Aufgabe als Website-Favicons.
Bilder werden zur Verarbeitung auf den Server hochgeladen. Laden Sie das ZIP herunter, sobald es bereitsteht; temporäre Dateien werden gemäß der Bereinigungsroutine des Dienstes gelöscht.
Fragen zur Favicon-Einrichtung
Prüfen Sie zuerst die bereitgestellten Datei-URLs und die Icon-Deklarationen der Seite. Browser können Favicons zwischenspeichern; testen Sie eine neue Browsersitzung, nachdem Sie geprüft haben, dass die Website auf die neuen Dateien verweist.
Im aktuellen Formular wählen Sie nur ein Bild aus. Passen Sie die Felder name, short_name, theme_color und background_color im heruntergeladenen Manifest an Ihre Website an und stimmen Sie einen eventuell vorhandenen HTML-Wert für theme-color darauf ab.
Nein. Es liefert Icon-Dateien und eine Manifest-Vorlage. Installation und Offline-Nutzung erfordern zusätzliche Website-Konfiguration; das Paket fügt diese Funktionen nicht automatisch hinzu.