Favicon-Generator - alle Größen samt HTML
Favicon-Generator
Größen
HTML für Ihren head-Bereich
Legen Sie die Dateien ins Wurzelverzeichnis und fügen Sie dies in head ein.
Was dieses Werkzeug leistet
Ein Favicon ist schon lange kein einzelnes 16-Pixel-Quadrat mehr. Eine Website braucht heute eine Handvoll Größen für Tabs, Windows-Verknüpfungen, iPhone-Startbildschirme und Android-Installationsdialoge, dazu das Markup, das darauf verweist. Diese Seite erzeugt alles aus einem Bild, in Ihrem Browser.
So funktioniert es
- 1 Ziehen Sie ein quadratisches Bild hinein, idealerweise 512 px oder größer.
- 2 Prüfen Sie jede Größe in der Vorschau und setzen Sie einen Hintergrund, falls Ihr Bild transparent ist.
- 3 ZIP herunterladen, ins Wurzelverzeichnis entpacken und das HTML einfügen.
Für 16 Pixel gestalten, nicht fürs Logo
In Tabgröße ist ein Favicon etwa so breit wie ein Punkt auf dieser Seite. Wortmarken werden zu grauen Flecken, dünne Linien verschwinden ganz. Ein einzelner Buchstabe, eine einfache Form oder das markanteste Fragment des Logos übersteht diesen Maßstab - das ganze Logo fast nie.
| Größe | Wo es verwendet wird |
|---|---|
| 16×16 | Browser-Tab, Lesezeichenleiste |
| 32×32 | Tab auf hochauflösenden Bildschirmen, Taskleiste |
| 48×48 | Windows-Verknüpfungen und Website-Kacheln |
| 180×180 | iPhone- und iPad-Startbildschirm |
| 192×192 | Android-Startbildschirm und App-Umschalter |
| 512×512 | Installationsdialog und Startbildschirm |
PNG genügt; ICO ist ein Überbleibsel
Jeder heute genutzte Browser liest PNG-Favicons, ein Stapel PNG-Dateien und die richtigen link-Tags decken das Web also ab. Der .ico-Container existiert, weil der Internet Explorer ihn im Wurzelverzeichnis suchte; sofern Sie nichts Uraltes unterstützen müssen, können Sie ihn weglassen.
Transparenz verhält sich auf dem Handy anders
In einem Browser-Tab sitzt ein transparentes Icon gut auf dem, was das Theme liefert. Auf dem iPhone-Startbildschirm bekommt dieselbe Datei ein deckend schwarzes Quadrat hinter sich, weil iOS Transparenz dort nicht zusammenrechnet. Setzen Sie eine Hintergrundfarbe, dann wirkt das Icon in beiden Fällen gewollt.
Warum der Browser immer noch das alte zeigt
Favicons werden hart und lange zwischengespeichert, manchmal über ein normales Neuladen hinaus. Öffnen Sie die Icon-Datei direkt, um zu prüfen, ob das neue wirklich da liegt, und schauen Sie dann in einem privaten Fenster. Den Dateinamen zu ändern oder ihm eine Version anzuhängen, erzwingt die Aktualisierung zuverlässig.