Favicon-Ratgeber
Klare Antworten auf Fragen zur Favicon-Erstellung: Welche Größen und Formate brauche ich, und welchen Code muss ich einfügen?
Favicon-Größen: Formate und Einsatzbereiche
Bei der Suche nach „Favicon-Größe“ findet man noch immer Checklisten mit fünfzehn Dateien aus dem Jahr 2014. Tatsächlich decken heute sechs Abmessungen Browser-Tabs, Suchergebnisse, iOS, Android und PWAs ab. Hier erfährst du, welche das sind und warum.
Ratgeber lesenPNG kostenlos in ICO umwandeln
Die .ico ist noch immer das erwartete Format im Stammverzeichnis einer Website. Die meisten Online-Konverter verlangen jedoch, dass du dein Bild auf ihren Server hochlädst. Hier erfährst du, wie du aus einem PNG eine korrekte favicon.ico mit mehreren Größen erstellst, ohne etwas hochzuladen.
Ratgeber lesenapple-touch-icon: Größe, Format und Code
Das Apple Touch Icon legt das Bild fest, das erscheint, wenn jemand deine Website zum iPhone-Startbildschirm hinzufügt. Es ist vom Favicon im Browser-Tab und den Symbolen im Web-App-Manifest unabhängig.
Ratgeber lesenFavicon für den Dunkelmodus mit SVG
Ein schwarzes Logo auf transparentem Hintergrund sieht in einem hellen Tab perfekt aus und verschwindet in einem dunklen. ICO kann sich nicht anpassen, ein SVG-Favicon dagegen schon: Eine CSS-Regel wechselt die Farben passend zum Browser-Design.
Ratgeber lesenFavicon in HTML einbinden
Ein zuverlässiges HTML-Favicon entsteht nicht durch einen einzelnen magischen Tag. Es benötigt wenige erreichbare Dateien und Verweise im head. Dieses Vorgehen deckt moderne Tabs, ältere Programme und mobile Verknüpfungen ab, ohne zahlreiche historische Varianten einzuführen.
Ratgeber lesenFavicon wird nicht angezeigt oder aktualisiert
Wenn ein Favicon fehlt, liegt es nicht immer an der Datei. Browser, CDN, Service Worker und Suchmaschine können jeweils eine andere Version zwischenspeichern. Eine geordnete Diagnose verhindert, dass du mehrere Dinge gleichzeitig änderst.
Ratgeber lesenFavicons im Next.js App Router
Der App Router kann Symbol-Elemente aus Dateien mit festgelegten Namen oder aus dem metadata-Objekt erzeugen. Beide Ansätze funktionieren. Werden sie ohne klare Regel kombiniert, entstehen jedoch leicht widersprüchliche Deklarationen.
Ratgeber lesenAnleitung für SVG-Favicons
SVG hält Kanten bei jeder Pixeldichte scharf und kann Farben an das Design anpassen. Diese Flexibilität hat eine Bedingung: Die Datei muss eigenständig, einfach und auch auf kleinstem Raum erkennbar bleiben.
Ratgeber lesen