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

Vollständige Konfigurationsbeispiel

<!-- Basis 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="Ihre App">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Häufige Fragen

Warum werden mehrere Favicon-Formate benötigt?

Unterschiedliche Browser und Geräte unterstützen verschiedene Formate und Größen. Mehrere Formate stellen sicher, dass das Icon auf allen Plattformen korrekt angezeigt wird.

Ist das ICO-Format noch notwendig?

Obwohl moderne Browser PNG unterstützen, bleibt ICO die kompatibelste Option, besonders für ältere Browser.

Was ist ein Web App Manifest?

Ein Web App Manifest ist eine JSON-Datei, die PWA-Konfigurationen wie Icons, Namen und Farben definiert.

Wie optimiere ich die Favicon-Ladezeit?

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