ICO vs PNG für Favicons

ICO ist universell, aber alt; PNG ist modern, braucht aber explizite Verlinkung. So setzen Sie beide zusammen ein.

4 Min. Lesezeit

Favicons auf jeder Website prüfen

Installieren Sie die FetchFavicon Chrome-Erweiterung, um Favicons sofort zu extrahieren, vorzuschauen und zu validieren.

Chrome-Erweiterung installieren

ICO: der universelle Fallback

Jeder Desktop-Browser ruft /favicon.ico automatisch ab – ohne Ihr Zutun. Es ist ein Container, der mehrere Auflösungen bündeln kann.

Windows-Verknüpfungen und der Datei-Explorer basieren auf .ico. Selbst wenn Sie Web-Favicons nicht priorisieren, sollten Sie für das Betriebssystem eine bereitstellen.

PNG: pixelgenau auf jeder Dichte

PNG wird auf High-DPI-Displays gestochen scharf gerendert, wenn Sie es per <link rel="icon" sizes="..."> einbinden.

Verwenden Sie 192×192 und 512×512 PNGs für das Web-Manifest sowie 180×180 für das apple-touch-icon.

Fazit: Beides einsetzen

Eine Mehrgrößen-.ico für universelle Kompatibilität ausliefern, plus PNG-Varianten für HD-Displays und PWA-Installationsdialoge. Zusätzlich ein SVG für das schärfste skalierbare Icon.

FAQ

Should I use ICO or PNG for a favicon?

Use both: ICO for universal /favicon.ico fallback and PNG for high-DPI tabs and PWA manifest icons.

Does every browser support PNG favicons?

Modern browsers do when you link them with <link rel="icon" type="image/png">. ICO remains the safest default.

Is ICO outdated?

ICO is older but still required for Windows shortcuts and automatic /favicon.ico discovery by browsers.

Verwandte Leitfäden

Probieren Sie die Tools

Weiterlesen