> bilder symbole
Favicon & App-Symbole
Ein Bild rein, alle Größen raus – für den Reiter im Browser und den Startbildschirm auf dem Handy, mit dem fertigen Schnipsel zum Einbauen.
Bild auswählen
oder einfach hierher ziehen.
PNG · JPG · WEBP · SVG · BLEIBT AUF DEINEM GERÄT
„Ganz zeigen" legt das komplette Bild mittig ins Quadrat, an den Seiten bleibt Platz. „Formatfüllend" füllt das Quadrat und schneidet dafür mittig etwas ab.
Rand heißt: Das Zeichen wird kleiner, außen bleibt Fläche frei. iPhone und iPad runden das apple-touch-icon selbst ab, in den Ecken geht dort also etwas verloren. Android verkleinert ein Symbol wie dieses ohnehin und legt es auf einen weißen Kreis; dagegen hilft der Rand hier nicht.
Prozent der Kantenlänge, 50 % ergibt einen Kreis. Im Reiter sieht man davon fast nichts, auf dem Startbildschirm viel.
Durchsichtig passt sich jedem Reiter an, hell wie dunkel. Eine Farbe ist die sichere Wahl, wenn dein Zeichen selbst sehr hell oder sehr dunkel ist – sonst verschwindet es im falschen Farbschema.
Betrifft nur apple-touch-icon.png. Die übrigen Dateien bleiben durchsichtig; auf dem Android-Startbildschirm landen sie trotzdem auf einem weißen Kreis.
Steht in der site.webmanifest und unter dem Symbol auf dem Startbildschirm.
Höchstens zwölf Zeichen, sonst kürzt das Handy selbst ab.
Voreingestellt ist das Hauptverzeichnis, also dort, wo auch deine Startseite liegt. Sollen die Dateien woanders hin, zum Beispiel nach /assets/icons/, trag das hier ein: nur der Pfad, ohne https:// und ohne den Namen deiner Website. Die Pfade im Schnipsel passen sich an.
Genau hier fällt es auf: Bei 16 Pixeln bleibt von einem Schriftzug ein grauer Strich, und feine Linien verschwinden ganz. Wenn du dein Logo nicht mehr erkennst, nimm nur den Anfangsbuchstaben oder das Bildzeichen ohne Text. Auf einem scharfen Bildschirm (Handy, Retina) zeigen die drei Muster oben weiter die genannte Datei, auch wenn dein Bildschirm doppelt so fein ist; der Reiter daneben nimmt dort die 32er-Datei, genau wie der echte Browser.
Einmal in jede Seite, zwischen <head> und </head>. Die Zeile theme-color färbt die Browser-Leiste auf Android; sie steht nur dann im Schnipsel, wenn du oben eine Hintergrundfarbe gewählt hast.
Diese Datei liegt fertig im ZIP; hier steht sie nur zum Nachsehen. Hast du schon eine site.webmanifest, übernimm daraus nur den Abschnitt „icons". Ohne gewählte Hintergrundfarbe steht hier Weiß, denn Android braucht für das Startbild eine Farbe.
Logo noch zurechtrücken? Bild zuschneiden & drehen · Hintergrund entfernen
Dein Bild verlässt dieses Gerät nicht.
So funktioniert's
- 01Bild auswählen oder hierher ziehen. Am besten quadratisch, mit deutlichem Zeichen und ohne feine Schrift.
- 02Einpassen, Rand, Ecken und Hintergrund einstellen – und in der Vorschau bei 16 Pixeln nachsehen, ob man es noch erkennt.
- 03ZIP herunterladen, die Dateien auf den Webspace legen, den Schnipsel in den <head> kopieren.
Wofür die Größen gut sind: 16 und 32 Pixel sind das Symbol im Reiter und in den Lesezeichen – 32 nimmt der Browser auf scharfen Bildschirmen. Auf 48 Pixel greift Windows zurück, wenn du eine Verknüpfung zur Seite auf dem Desktop ablegst. 180 Pixel ist das apple-touch-icon: Es landet auf dem Startbildschirm von iPhone und iPad. 192 und 512 Pixel stehen in der site.webmanifest und sind das, was Android auf den Startbildschirm legt und beim Starten kurz anzeigt.
Keine .ico: Das alte Windows-Format müsste man sich Byte für Byte selbst basteln, und kein aktueller Browser braucht es mehr. Manche Browser fragen von sich aus einmal nach /favicon.ico; fehlt die Datei, antwortet dein Server mit einem Fehler, den niemand zu sehen bekommt. Sobald die Zeilen aus dem Schnipsel im <head> stehen, nimmt der Browser die PNG-Dateien.
SVG: Ziehst du eine SVG-Datei hinein, kommt sie unverändert mit ins ZIP, und der Schnipsel meldet sie als Erstes an. Browser, die SVG können, nehmen dann sie und sind in jeder Größe scharf. Hintergrund, Rand und runde Ecken gelten nur für die PNG-Dateien – die SVG wird nicht angefasst. Enthält sie Schriften oder Bilder von fremden Adressen, fehlen die im Browser-Reiter.
Der Browser zeigt noch das alte Symbol: Das passiert fast immer. Symbole bleiben besonders lang im Zwischenspeicher. Seite mit Strg+F5 neu laden (am Mac Cmd+Shift+R), sonst hilft ein neuer Browser-Start oder ein privates Fenster.
Startbildschirm und „App": Die site.webmanifest sagt dem Handy, wie deine Seite heißt und welches Symbol sie hat, wenn jemand sie auf den Startbildschirm legt. „display": „standalone" heißt: Sie öffnet ohne Adressleiste, wie eine App. Eine echte App aus dem Store wird daraus nicht. Für den Vorschlag „App installieren" verlangt Android zusätzlich HTTPS.
Was hier nicht passiert: Das Bild wird nur verkleinert, nicht vereinfacht. Ein Logo, das für Briefpapier gezeichnet wurde, wird bei 16 Pixeln zu Matsch – das rettet auch kein Programm, das ist eine Sache fürs Zeichenprogramm. Nachgeschärft wird ebenfalls nicht. Muss dein Bild für eine Größe vergrößert werden, wirkt das Symbol weich. Ob das passiert, hängt nicht allein an der Bildgröße, sondern auch an „Ganz zeigen" oder „Formatfüllend" und am Rand: Ein 600 × 300 großes Logo reicht bei „Ganz zeigen" noch für 512 Pixel, bei „Formatfüllend" nicht mehr. Der Hinweis über der Dateiliste nennt dir die betroffenen Größen und den Faktor.
Rundherum: Gerechnet wird auf einer verkleinerten Arbeitsfassung deines Bildes: Die kurze Seite kommt auf höchstens 1024 Punkte, denn die Symbole sind ja nie größer als 512. So bleibt auch ein 12-Megapixel-Foto flüssig. Beim Neuberechnen fallen GPS- und Kameradaten weg. HEIC-Fotos vom iPhone kann nur Safari öffnen; stell am iPhone sonst „Maximale Kompatibilität" ein.