Ein Logo hier ablegen
Favicon-Planung
Ein Favicon ist ein System kleiner Icons und nicht nur ein verkleinertes Bild
Das bekannte Zeichen neben dem Titel eines Browser-Tabs ist oft nur 16 oder 32 Pixel breit. Dieselbe visuelle Identität erscheint jedoch auch in Lesezeichen, Verknüpfungen, mobilen Startbildschirmen und installierten Web-Anwendungen. Diese Oberflächen lesen nicht zwingend dieselbe Datei und verwenden nicht dieselbe Form. Ein großes PNG, das lediglich in favicon.ico umbenannt wurde, kann in einem Browser funktionieren und an anderer Stelle fehlen, unscharf oder schlecht beschnitten wirken.
Ein verlässliches Paket trennt die Aufgaben. Die ICO-Datei bietet Desktop-Browsern und älteren Integrationen mehrere kleine Auflösungen in einem Container. Einzelne PNG-Dateien liefern eindeutige Pixelgrößen. Apple-Geräte können einen apple-touch-icon-Link verwenden. Ein Web-App-Manifest listet größere Installationsicons auf, während ein eigenes maskierbares Bild Platz für Plattformen reserviert, die Icons als Kreis, Squircle oder abgerundetes Quadrat zuschneiden.
Der Generator erstellt deshalb einen dokumentierten Satz und verspricht kein universelles Verhalten durch eine einzelne Wunderdatei. Die Grafik bleibt lokal, wird ohne Beschnitt eingepasst und die erzeugten Binärstrukturen werden geprüft. Anschließend müssen die Dateien an den richtigen öffentlichen Pfaden liegen und auf den Browsern und Geräten getestet werden, die für das Projekt relevant sind.
Inhalt des Pakets mit 11 Dateien
Das ZIP enthält acht Bilddateien sowie ein Manifest, ein HTML-Fragment und eine kurze README-Datei. Das ICO verwendet PNG-komprimierte Ebenen mit 16, 32 und 48 Pixeln. Die Web-App-Bilder haben 192 und 512 Pixel; die maskierbare Version wird mit festem Hintergrund und geschütztem Zentrum separat erzeugt.
Die erzeugten Pfade setzen voraus, dass alle Dateien gemeinsam im öffentlichen Stammverzeichnis liegen. Wenn ein Framework statische Ressourcen aus einem anderen Ordner ausliefert, müssen Dateien und href- beziehungsweise src-Werte angepasst werden. Relative Icon-Pfade und eine relative Start-URL im Manifest ermöglichen auch einen Unterordner, wenn der Manifest-Link entsprechend geändert wird.
| Datei | Zweck |
|---|---|
favicon.ico | Container mit 16-, 32- und 48-px-PNG-Ebenen für Browser und Desktop-Kompatibilität. |
favicon-16x16.png | Explizites kleinstes PNG für Tabs und Seiten mit einzelnen Größenangaben. |
favicon-32x32.png | Gängiges PNG für hochauflösende Browser-Tabs und Lesezeichen. |
favicon-48x48.png | Größere kleine Alternative und dritte Quellebene des ICO. |
apple-touch-icon.png | 180-px-Startbildschirmicon für rel="apple-touch-icon". |
android-chrome-192x192.png | Allgemeines 192-px-Web-App-Icon im Manifest. |
android-chrome-512x512.png | Allgemeines 512-px-Web-App-Icon im Manifest. |
maskable-icon-512x512.png | Festes 512-px-Icon mit wichtigem Motiv im geschützten Zentrum. |
site.webmanifest | App-Namen, Farben, relative Start-URL und Icon-Deklarationen. |
favicon-snippet.html | Icon-, Apple- und Manifest-Links sowie theme-color-Metatag. |
README.txt | Inventar und Hinweise zu MIME, Cache und Installation. |
Praktischer Ablauf vom Logo bis zu veröffentlichten Icons
- Beginnen Sie mit einer einfachen, kontrastreichen Quelle. Ein quadratisches Bild mit etwa 512 oder 1024 Pixeln ist bequem; rechteckige Grafiken werden ohne Beschnitt eingepasst.
- Wählen Sie PNG, JPEG, WebP oder SVG. SVG-Markup wird bereinigt und gerastert; das Paket behauptet bewusst nicht, einen Vektor-Favicon zu erhalten.
- Geben Sie den im Manifest verwendeten Website-Namen ein. Der optionale Kurzname ist auf 12 Zeichen begrenzt, damit er auf kleinen Startflächen eher passt.
- Wählen Sie Theme- und Hintergrundfarbe. Normale Icons können transparent bleiben oder für eine feste Kachel ebenfalls den Hintergrund erhalten.
- Stellen Sie den normalen Abstand ein. Die maskierbare Version erzwingt unabhängig davon mindestens 22% Randabstand und einen festen Hintergrund.
- Erzeugen Sie den Satz und lesen Sie das Prüfergebnis. Einzelne Bilder können zur Kontrolle oder das vollständige ZIP heruntergeladen werden.
- Legen Sie die Dateien an den Pfaden des HTML-Fragments ab, fügen Sie die Tags in den head ein, leeren Sie Caches und testen Sie Tabs sowie mobile Startbildschirme.
Reproduzierbares Browser-Beispiel
Die integrierte Xephory-Demo prüft die vollständige Verarbeitungskette
Die Demo zeichnet ein 1024 x 1024 großes Logo im aktuellen Browser. Anschließend durchläuft es dieselbe Dekodierung, Abstandsberechnung, PNG-Ausgabe, ICO-Konstruktion, Manifest-Erstellung, ZIP-Montage und Validierung wie eine hochgeladene Grafik. Hinter der Schaltfläche liegt kein vorbereiteter Server-Download.
Mit den Standardwerten entstehen 11 Dateien. Der ICO-Prüfer bestätigt drei Verzeichniseinträge mit eingebetteten PNG-Größen 16, 32 und 48 Pixel. Jedes einzelne PNG wird gegen seine versprochenen Maße geprüft, das Manifest als JSON gelesen und auf allgemeine sowie maskierbare Deklarationen untersucht. Jeder gespeicherte ZIP-Eintrag muss außerdem seine CRC-32-Prüfung bestehen.
Die Bytezahl kann sich zwischen Browsern unterscheiden, weil PNG-Encoder nicht denselben komprimierten Datenstrom schreiben müssen. Verlässlich sind die Maße, Namen, ICO-Ebenen, Manifest-Struktur und die erfolgreiche ZIP-Integritätsprüfung.
Zuerst für die kleinste Darstellung gestalten
Ein Logo, das auf einer Präsentationsfolie klar aussieht, kann bei 16 Pixeln zu Rauschen werden. Dünne Linien, kleine Schrift, fotografische Details und mehrere ähnliche Farben sind typische Ursachen. Der Generator kann sauber skalieren, aber kein einfacheres Symbol erfinden und keinen verschwindenden Kontrast reparieren.
Prüfen Sie die Vorschauen mit 16 und 32 Pixeln und nicht nur die 512-px-Kachel. Wenn das Zeichen unklar ist, erstellen Sie eine Favicon-Variante: lange Wortmarke entfernen, Hauptsilhouette verstärken, enge Zwischenräume öffnen und Formen reduzieren. Das ursprüngliche Markenmaster bleibt separat erhalten.
- Eine erkennbare Silhouette verwenden und auf hellem sowie dunklem Browserhintergrund testen.
- Text vermeiden, sofern nicht ein oder zwei kräftige Zeichen bei 16 px lesbar bleiben.
- Freiraum lassen und keine wesentliche Identität an die äußersten Pixel legen.
- Die maskierbare Datei nur für den maskable-Zweck nutzen, da sie absichtlich mehr Abstand hat.
- Einen kontrastreichen Hintergrund wählen, wenn Transparenz das Motiv verschwinden lässt.
- Prüfen, ob Kreis- und Rundquadratmasken keine wichtigen Ecken oder Symbole entfernen.
Dateien installieren und hartnäckiges Favicon-Caching berücksichtigen
Das Kopieren der Dateien ist nur die Hälfte der Bereitstellung. Der Browser muss korrekte URLs und lesbare MIME-Typen erhalten, und jede gemeinsame Seitenvorlage benötigt die head-Tags. Root-relative Pfade beginnen an der Domainwurzel. Sie müssen geändert werden, wenn das Paket in einem Unterordner oder hinter einer Asset-Pipeline liegt.
Favicons werden von Browsern, Betriebssystemen, Launchern und CDNs ungewöhnlich aggressiv gespeichert. Eine korrekte Ersetzung erscheint möglicherweise nicht in einem bereits offenen Tab. Öffnen Sie die Icon-URL direkt, testen Sie ein frisches Profil oder privates Fenster, leeren Sie den CDN-Cache und verwenden Sie bei Bedarf einen versionierten Dateinamen oder Query-Parameter.
- Sicherstellen, dass jede Icon-URL HTTP 200 und keine HTML-Fehlerseite oder Umleitungsschleife liefert.
- PNG als image/png, Manifest möglichst als application/manifest+json und ICO als image/x-icon oder image/vnd.microsoft.icon ausliefern.
- Link-Elemente im Dokument-head halten und die veraltete Relation shortcut icon vermeiden.
- site.webmanifest direkt öffnen und prüfen, ob relative Bildpfade vom Manifest-Ort aufgelöst werden.
- Ein gültiges Icon-Paket erzeugt allein weder Offlinebetrieb, Service Worker noch alle PWA-Installationsbedingungen.
- Lesezeichen und Startverknüpfungen neu anlegen, weil Launcher eigene Kopien behalten können.
So funktionieren Browser-Erzeugung und Validierung
Rasterquellen werden vor dem Dekodieren anhand ihrer Dateisignatur erkannt und ihre Kopfmaße gegen Sicherheitsgrenzen geprüft. SVG wird als XML gelesen; skriptfähige Elemente, Ereignisattribute und externe Referenzen werden vor dem Laden entfernt. Das dekodierte Ergebnis wird erneut geprüft, sodass eine beschädigte oder widersprüchliche Quelle nicht unbemerkt weiterläuft.
Für jede Größe zeichnet der Browser die Quelle mit hochwertiger Glättung auf eine quadratische Canvas und exportiert ein neues PNG. Der normale Satz folgt Abstand und optionalem Hintergrund. Der maskierbare Satz zeichnet immer einen festen Hintergrund und erhöht den Abstand auf den geschützten Mindestwert. Das ist konservativ, ersetzt aber nicht die visuelle Kontrolle des zentralen Motivs.
Das ICO wird aus den tatsächlichen PNG-Bytes für 16, 32 und 48 px zusammengesetzt. Vor Aktivierung des ZIP-Downloads prüft das Werkzeug PNG-Signaturen und Maße, ICO-Offsets und Ebenen, parst das Manifest und kontrolliert jeden unkomprimierten ZIP-Eintrag mit CRC-32. Das erkennt Paketfehler, garantiert aber nicht denselben Beschnitt in jedem proprietären Launcher.
- Eine Quelldatei ist auf 12 MB, 8192 px je Seite und 40 Megapixel begrenzt, um Speicherrisiken zu reduzieren.
- Contain-Anpassung fügt bei rechteckigen Motiven transparenten oder farbigen Raum hinzu, statt zu beschneiden.
- Temporäre Object-URLs werden beim Leeren der Ergebnisse oder Schließen der Seite freigegeben.
- Das ZIP verwendet gespeicherte Einträge, da PNG und ICO bereits komprimiert und einfache Strukturen leicht prüfbar sind.
- Das Paket enthält keinen Tracking-Code, keine ausführbare Quelldatei und keinen Upload-Verweis.
Die Grafik bleibt lokal, die öffentliche Seite nutzt jedoch normale Webdienste
Dateiauswahl, SVG-Bereinigung, Dekodierung, Canvas-Zeichnung, Paketbau und Downloadvorbereitung laufen im aktuellen Browser-Tab. Die Favicon-Funktion sendet weder das Logo noch erzeugte Dateien an Xephory. Leeren oder Schließen gibt temporäre URLs frei; es entstehen kein Cloudprojekt und kein automatisches Backup.
Die öffentliche Xephory-Seite kann zustimmungsgesteuertes Google Analytics und Google Auto Ads laden. Diese Dienste betreffen den Seitenbesuch und nicht die vom Generator verarbeiteten Bildbytes. Bei vertraulichen Markenarbeiten kann der Netzwerkmonitor des Browsers bestätigen, dass diese Funktion die gewählte Datei nicht überträgt.
Grenzen und Entscheidungen des Website-Betreibers
Der Generator erstellt technisch konsistente Dateien, entscheidet aber nicht, ob Motiv, Bereitstellungspfad oder Produktkonfiguration für eine bestimmte Marke richtig sind.
- SVG-Eingaben werden bereinigt und gerastert; das Paket enthält kein vektorbasiertes favicon.svg.
- Animierte Bilder, GIF, AVIF, PDF, EPS, AI, PSD und Icon-Fonts werden nicht unterstützt.
- Das Werkzeug vektorisiert keine Bitmaps, entfernt keinen Hintergrund und entwirft kein Logo.
- Farbprofile, HDR-Verhalten und sehr feine Details können sich beim Zeichnen auf eine Standard-Canvas ändern.
- Das maskierbare Icon verwendet konservativen Abstand, muss aber unter echten Kreis- und Rundmasken visuell freigegeben werden.
- Das Manifest enthält Namen, Farben, relative Start-URL und Icons; Service Worker, Screenshots, Shortcuts und produktspezifische Felder sind nicht enthalten.
- Browser- und Betriebssystem-Caches können ein altes Favicon zeigen, obwohl die Serverdateien korrekt sind.
- Markenrechte, Brand-Richtlinien, barrierefreier Kontrast und Nutzungsrechte an der Grafik bleiben Verantwortung des Benutzers.
Häufig gestellte Fragen
Lädt oder speichert Xephory mein Logo?
Nein. Die Datei wird im Browser gelesen, bei SVG bereinigt, dekodiert, skaliert und verpackt. Der Generator überträgt die Bildbytes nicht an Xephory und erzeugt kein Serverprojekt.
Warum enthält das ICO drei Bilder?
Die Ebenen mit 16, 32 und 48 px bieten Browsern und Desktop-Integrationen mehrere kleine Auflösungen. Die tatsächlichen PNG-Bytes werden eingebettet und jeder Verzeichniseintrag geprüft.
Enthält das Paket ein SVG-Favicon?
Nein. SVG ist als Quelle möglich, wird jedoch bereinigt und gerastert. Der zugesagte Ausgabeumfang bleibt ICO, PNG, Manifest und Textdateien und ist dadurch für alle Eingabetypen gleich.
Was unterscheidet das normale vom maskierbaren 512-px-Icon?
Das normale Icon folgt dem gewählten Abstand und kann transparent sein. Die maskierbare Version besitzt festen Hintergrund und mindestens 22% Randabstand, damit Wichtiges beim Plattformbeschnitt nahe dem Zentrum bleibt.
Warum sehe ich nach dem Upload noch das alte Favicon?
Browser, Betriebssystem und CDN können Icons lange cachen. Öffnen Sie die URL direkt, prüfen Sie HTTP 200, leeren Sie Caches, erstellen Sie Verknüpfungen neu oder verwenden Sie eine versionierte URL.
Macht dieses Paket meine Website zu einer installierbaren PWA?
Nicht allein. Es liefert Icons und ein grundlegendes Webmanifest. HTTPS, ein geeignetes App-Erlebnis und weitere Installationsbedingungen müssen separat erfüllt werden.
Kann ich ein rechteckiges Logo verwenden?
Ja. Es wird ohne Beschnitt in ein Quadrat eingepasst und erhält Leerraum. Ein eigens gestaltetes quadratisches Symbol ist bei 16 px meist besser lesbar als eine lange Wortmarke.
Welche Datei sollte ich zuerst prüfen?
Prüfen Sie zuerst favicon-16x16.png und favicon-32x32.png, danach Apple- und maskierbares Icon unter verschiedenen Formen. Zum Schluss kontrollieren Sie die öffentlichen URLs und das Manifest.