Favicon-FAQ
Sollte ein Favicon transparent sein?
Geben Sie den Browser-Tab-Favicons einen transparenten Hintergrund, sodass sie auf hellen und dunklen Tab-Strips liegen. Halten Sie das Apple Touch-Symbol und die maskierbaren Symbole undurchsichtig, da diese Plattformen den leeren Raum für Sie ausfüllen oder zuschneiden.
Transparenz hilft bei Browser-Registerkarten
Browser malen die Registerkartenleiste in der Designfarbe des Benutzers, und diese Farbe wechselt zwischen hellem und dunklem Modus. Ein transparenter Hintergrund lässt Ihre Markierung auf allem erscheinen, was der Browser zeichnet. Ein in die Grafik eingebranntes weißes Quadrat erscheint als heller Block auf einer dunklen Lasche.
ICO, PNG und SVG verfügen alle über einen Alphakanal, sodass sie die Transparenz pro Pixel speichern können. JPEG kann dies nicht, was einer der Gründe dafür ist, dass es eine schwache Favicon-Quelle darstellt. Sehen ist ein Favicon, ein PNG oder JPEG für den Formatvergleich. Wenn Ihr Quellbild einen transparenten Hintergrund hat, wird der Favicon-Generator Behält es in den exportierten PNG- und ICO-Dateien.
Wo jedes Symbol einen Hintergrund benötigt
| Symbol | Transparent? | Grund |
|---|---|---|
favicon.ico und Tab PNGs | Ja | Passt sich an helle und dunkle Tab-Streifen an |
| SVG Favicon | Ja | Gleiche Tab-Platzierung, gezeichnet in jeder Größe |
apple-touch-icon | NEIN | iOS stellt transparente Pixel schwarz dar |
| Symbol für maskierbares Manifest | NEIN | Trägerraketen schneiden es auf eine Plattformform zu |
Halten Sie das Apple Touch-Symbol undurchsichtig
Das Homescreen-Symbol von Apple ist die deutlichste Ausnahme. iOS kombiniert transparente Bereiche mit Schwarz, sodass ein transparentes Logo als dunkle Kachel auf dem Startbildschirm erscheinen kann. Exportieren Sie stattdessen ein 180x180-PNG mit gefülltem Hintergrund.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />Apple dokumentiert die Symbolregeln in Konfigurieren von Webanwendungen. Der Apple Touch-Icon-Generator Hier können Sie die Hintergrundfarbe auswählen und die reduzierte Datei herunterladen.
Maskierbare Symbole benötigen einen vollrandigen Hintergrund
Android-Launcher schneiden maskierbare Symbole in Kreise, Kreise und andere Formen zu. Füllen Sie die gesamte Leinwand mit einer Hintergrundfarbe und lassen Sie das Logo innerhalb der sicheren Zone, wobei der zentrierte Kreis 80 % der Breite abdeckt. Alles außerhalb dieses Kreises kann abgeschnitten werden.
Sie können weiterhin ein transparentes Manifest-Symbol mit versenden purpose: "any" neben dem Maskierten. MDN deckt beide Werte im ab Referenz zu Manifestsymbolen, und die maskierbarer Symbolgenerator Zeigt den sicheren Bereich an, während Sie das Bildmaterial positionieren.
Überprüfen Sie den Kontrast beider Themen
Transparenz verlagert das Kontrastproblem auf den Browser. Ein fast schwarzer Fleck verschwindet auf einem dunklen Streifen und ein blasser Fleck verschwindet auf einem hellen. Wählen Sie Farben, die mit beiden mithalten können, oder platzieren Sie eine kleine abgerundete Form hinter dem Logo, damit es seinen eigenen Kontrast erhält.
Es gelten einige Browser prefers-color-scheme Regeln innerhalb eines SVG Favicon, obwohl die Unterstützung unterschiedlich ist, behandeln Sie ein themenfähiges SVG daher als Upgrade und nicht als Fix. Zeigen Sie eine Vorschau des Symbols auf hellen und dunklen Registerkarten mit an Favicon-Vorschau, und bestätigen Sie dann, was eine Live-Site mit dem bereitstellt Favicon-Prüfer.
Bereit, Ihr Favicon zu erstellen?
Generieren Sie die allgemeinen Dateien und ein fertig einfügbares HTML-Snippet.