Mit einem einfachen quadratischen Bild beginnen
Verwenden Sie eine einfache Bildmarke statt eines detailreichen Bildes, denn sie wird sehr klein angezeigt. Ein Tab-Symbol ist auf vielen Bildschirmen nur 16 Pixel breit, dünne Linien und kleiner Text verschwinden also. Ein quadratisches Bild von mindestens 512 mal 512 Pixeln liefert die besten Ergebnisse, weil es sich sauber auf alle anderen Größen verkleinern lässt.
Ist Ihr Logo nicht quadratisch, schneiden Sie den Teil zu, der allein am besten funktioniert, etwa einen einzelnen Buchstaben oder ein Symbol. Meist ist es besser, ein kleines Stück klar zu zeigen als das ganze Logo schlecht. Ein transparenter Hintergrund ist in den meisten Fällen in Ordnung, eine einfarbige Fläche kann aber bei dunklen Tabs helfen.
Welche Dateien Sie brauchen
- favicon.ico mit Versionen in 16, 32 und 48 Pixeln für ältere Browser
- PNG-Icons in 32 und 16 Pixeln
- apple-touch-icon.png mit 180 mal 180 für iPhones und iPads
- PNG-Icons in 192 und 512 Pixeln für Android und Web-App-Manifeste
Ein Web-Manifest ist eine kleine JSON-Datei, die Ihre größeren Icons auflistet, damit Handys sie verwenden können, wenn eine Seite auf dem Startbildschirm gespeichert wird.
In manchen Ratgebern werden weitere Größen empfohlen. Das obige Set deckt die üblichen Fälle für Browser-Tabs, Lesezeichen, iOS-Startbildschirme und Android-Installationen ab und reicht für eine normale Webseite meist aus.
Das HTML hinzufügen
Legen Sie die Dateien im Stammverzeichnis Ihrer Seite ab und fügen Sie im Head Ihrer Seiten link-Tags hinzu, die auf sie verweisen. Ein Generator kann Ihnen die genauen Tags zum Einfügen liefern. Fügen Sie das Manifest mit einem weiteren link-Tag hinzu. Wenn Sie die Dateien in einen Ordner verschieben, passen Sie die Pfade in den Tags entsprechend an.
Ein typisches Set von Tags nennt die ico-Datei, die beiden kleinen PNGs, das apple-touch-icon und das Manifest. Fügen Sie sie einmal in den gemeinsamen Header Ihrer Seite ein, statt sie auf jeder Seite von Hand einzutragen, damit jede Seite einheitlich bleibt.
Gestaltungstipps
Lassen Sie etwas Abstand, damit runde Masken die Ränder nicht abschneiden, denn manche Handys beschneiden Icons zu Kreisen oder abgerundeten Quadraten. Verwenden Sie starken Kontrast und eine einfache Form. Prüfen Sie das Icon sowohl in hellen als auch in dunklen Browser-Designs, denn ein dunkles Logo auf transparentem Hintergrund kann in einer dunklen Tab-Leiste verschwinden.
Testen Sie einen Entwurf, indem Sie ihn auf Ihrem eigenen Bildschirm mit 16 Pixeln ansehen. Wenn Sie in dieser Größe nicht erkennen können, was es ist, vereinfachen Sie die Form, entfernen Sie feine Details und verstärken Sie die Linien.
Ein Beispiel aus der Praxis (veranschaulichend)
Angenommen, Ihre Seite gehört einer kleinen Bäckerei, und das Logo ist eine Weizenähre mit dem Namen des Geschäfts darunter. Bei 16 Pixeln ist der Name unlesbar. Schneiden Sie nur die Weizenähre zu, setzen Sie sie mit etwas Rand auf einen einfarbigen, warmen Hintergrund und exportieren Sie ein Quadrat mit 512 mal 512. Aus dieser einen Quelle können Sie jede Größe der obigen Liste erzeugen.
Wirkt der erste Versuch bei 16 Pixeln matschig, probieren Sie eine kräftigere Kontur oder weniger Farben und exportieren Sie erneut. Zwei oder drei Durchgänge sind normal.
Schritt für Schritt
- Wählen oder zeichnen Sie eine einfache Marke und schneiden Sie sie quadratisch zu
- Fügen Sie Abstand und bei Bedarf einen einfarbigen Hintergrund hinzu
- Erzeugen Sie das vollständige Set an Icon-Größen aus der großen Quelle
- Laden Sie die Dateien in das Stammverzeichnis Ihrer Seite hoch
- Fügen Sie die link-Tags in den Head Ihrer Seiten ein
- Laden Sie neu und testen Sie in einem Browser-Tab, und leeren Sie den Cache, falls das alte Icon bleibt
Häufige Fehler
- Ein breites Logo mit Text verwenden, das zu einem winzigen Fleck wird
- Von einem kleinen Bild ausgehen und es vergrößern
- Den Abstand vergessen, sodass Ränder auf Handys abgeschnitten werden
- Alte link-Tags belassen, die auf fehlende Dateien verweisen
- Erwarten, dass die Änderung sofort erscheint, obwohl Browser Favicons oft eine Weile zwischenspeichern
Kurze Checkliste
- Quadratische Quelle mit 512 Pixeln oder mehr
- favicon.ico plus PNGs in 16 und 32 Pixeln
- apple-touch-icon mit 180 Pixeln
- Icons in 192 und 512 Pixeln und ein Manifest
- link-Tags in jeder Seitenvorlage ergänzt
Mit DoneImg im Browser erledigen
Öffnen Sie den Favicon-Generator und fügen Sie Ihr quadratisches Bild hinzu. Er erstellt favicon.ico mit den Größen 16, 32 und 48 Pixel, die PNGs in 16 und 32 Pixeln, das apple-touch-icon mit 180 Pixeln, die PNGs in 192 und 512 Pixeln, ein Web-Manifest und ein HTML-Snippet, alles zusammen in einer ZIP-Datei.
Alles entsteht in Ihrem Browser, Ihr Logo wird also nirgendwohin hochgeladen. Entpacken Sie die Dateien in das Stammverzeichnis Ihrer Seite, fügen Sie das Snippet in den Head Ihrer Seite ein und testen Sie das Ergebnis in einem Tab.