Favicon-Prüfer

Überprüft die Favicon-Konfiguration einer Website auf Vollständigkeit, einschließlich verschiedener Icon-Formate und -Größen. Geben Sie die zu prüfende Website-URL ein:

Umfassende Prüfung

Prüft alle Favicon-Dateien einer Website in verschiedenen Formaten und Größen

Kompatibilitätscheck

Überprüft die Favicon-Kompatibilität auf verschiedenen Plattformen und Geräten

Optimierungsvorschläge

Bietet detaillierte Optimierungsempfehlungen und Best Practices

Favicon-Formate erklärt

Klassische Formate

favicon.ico

Traditionelles ICO-Format, kompatibel mit allen Browsern

favicon.png

Modernes PNG-Format mit transparentem Hintergrund

favicon.svg

Vektorformat mit Dark-Mode-Unterstützung

Mobile Geräte

Apple Touch Icon

Homescreen-Icon für iOS-Geräte

Android Chrome

PWA-Icon für Android

Web App Manifest

Konfigurationsdatei für PWAs

Complete Configuration Example

<!-- Basic Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">

<!-- Android Chrome Icon -->
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">

<!-- Meta Tags -->
<meta name="theme-color" content="#ffffff">
<meta name="application-name" content="Your App Name">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Häufige Fragen

Warum werden mehrere Favicon-Formate benötigt?

Verschiedene Browser und Geräte unterstützen unterschiedliche Formate und Größen. Die Bereitstellung mehrerer Formate gewährleistet eine korrekte Anzeige auf allen Plattformen.

Ist das ICO-Format noch notwendig?

Obwohl moderne Browser das PNG-Format unterstützen, ist das ICO-Format immer noch die kompatibelste Wahl, insbesondere für ältere Browser.

Was ist ein Web App Manifest?

Ein Web App Manifest ist eine JSON-Datei, die Konfigurationsinformationen für PWAs (Progressive Web Apps) definiert, einschließlich Icons, Name, Themenfarbe usw.

Wie kann die Ladegeschwindigkeit des Favicons optimiert werden?

Verwenden Sie angemessene Dateigrößen und vermeiden Sie zu große Icon-Dateien. ICO-Dateien sollten mehrere Größen enthalten, und PNG-Dateien sollten komprimiert werden.