Ein Favicon ist nicht ein Bild. Es ist das kleine Symbol in einem Browser-Tab, das größere, das ein Telefon verwendet, wenn eine Website zum Startbildschirm hinzugefügt wird, und das noch größere, das ein PWA-Manifest und App-Umschalter erwarten. Jeder Kontext will eine andere Größe, und eine falsche fällt auf: Ein 16-Pixel-Symbol auf eine Startbildschirmkachel gestreckt wirkt auf eine Weise kaputt, die Besuchern auffällt.
Dieser Generator erzeugt aus einem Bild den gesamten Satz. Ihre Vorlage wird mittig auf ein Quadrat zugeschnitten, mit dem Resampler pica statt mit dem Standardfilter des Browsers auf jede benötigte Größe skaliert — was bei 16 Pixeln enorm zählt, wo naive Skalierung ein Logo zu einem Fleck macht — und zusammen mit einer echten mehrfach aufgelösten .ico-Datei als ZIP verpackt.
Die Symbole werden in Ihrem Browser erzeugt. Unveröffentlichte Logos und Markenmaterial werden nicht zu einem Icon-Dienst hochgeladen.
<head> Ihrer Seiten.| Datei | Größe | Verwendet von |
|---|---|---|
| favicon.ico | 16, 32, 48 kombiniert | Browser-Tabs, Lesezeichen, ältere Unterstützung |
| favicon-16x16.png | 16 × 16 | Tab-Symbol auf Bildschirmen mit Standarddichte |
| favicon-32x32.png | 32 × 32 | Tab-Symbol auf hochauflösenden Bildschirmen |
| favicon-48x48.png | 48 × 48 | Windows-Verknüpfungen zu Websites |
| apple-touch-icon.png | 180 × 180 | iOS-Startbildschirm |
| icon-512.png | 512 × 512 | Android-Startbildschirm, PWA-Manifest, App-Umschalter |
Die .ico ist ein echter mehrfach aufgelöster Container mit den Fassungen in 16, 32 und 48 Pixeln und keine umbenannte PNG. Windows und ältere Browser wählen die Größe, die zum jeweiligen Zeichenkontext passt.
Entpacken Sie das ZIP in Ihr Website-Wurzelverzeichnis und ergänzen Sie den <head> jeder Seite um:
| Zweck | Tag |
|---|---|
| Klassisches Favicon | <link rel='icon' href='/favicon.ico' sizes='any'> |
| Standarddichte | <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> |
| Hohe Dichte | <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> |
| iOS-Startbildschirm | <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> |
Das 512-Pixel-Symbol wird aus Ihrem Web-App-Manifest referenziert und nicht über ein Link-Tag.
Ein Favicon wird oft mit 16 Pixeln Kantenlänge angezeigt, ungefähr der Größe eines einzelnen Zeichens Fließtext. Eine vollständige Wortmarke ist in diesem Maßstab unleserlich; eine detailreiche Illustration wird zu Rauschen.
Was funktioniert, ist ein einzelner Buchstabe, ein einfaches Monogramm oder eine kräftige Form mit starkem Kontrast zu hellen wie dunklen Tab-Hintergründen. Testen Sie, indem Sie Ihr Logo auf 16 Pixel verkleinern und es auf Armeslänge betrachten — erkennen Sie es nicht, erkennt es niemand.
Mindestens 512 × 512 und nach Möglichkeit quadratisch. Die Vorlage wird mittig auf ein Quadrat zugeschnitten, ein breites Logo verliert also seine Enden. Füllen Sie es zuvor mit dem Werkzeug Bild quadratisch machen auf, falls das ein Problem ist.
Ja. Es ist ein echter mehrfach aufgelöster ICO-Container mit Bildern in 16, 32 und 48 Pixeln und keine PNG mit geänderter Endung. Windows und ältere Browser lesen sie korrekt.
In das Wurzelverzeichnis Ihrer Website, damit sie unter Pfaden wie /favicon.ico erreichbar sind. Ergänzen Sie dann Ihre Seiten um die oben gezeigten Link-Tags.
Browser speichern Favicons sehr hartnäckig zwischen. Erzwingen Sie ein Neuladen oder öffnen Sie die Symboldatei direkt über ihre Adresse, um zu bestätigen, dass sie ausgeliefert wird, und laden Sie die Seite dann neu.
Ja bei den PNG-Dateien, die ihren Alphakanal behalten. Bedenken Sie, dass ein transparentes Symbol vor hellen wie dunklen Tab-Hintergründen funktionieren muss.
Nein. Beschnitt, Skalierung und ICO-Aufbau geschehen alle in Ihrem Browser.