Favicons
Ein Favicon unterstützt die Wiedererkennung einer Website und erfüllt dabei aber wichtige Funktionen für Orientierung, Markenwirkung und Professionalität.
Favicons werden in Browser‑Tabs, Lesezeichen, der Adressleiste und im Browserverlauf angezeigt. Moderne Suchmaschinen zeigen Favicons auch in den mobilen Suchergebnissen an.
Grundsätzlich werden die Favicons im head-Teil der HTML-Seite eingebunden. Hierbei können verschiedene Typen von Favicons (Größen, Dateiformate) für unterschiedliche Plattformen berücksichtigt werden. Für Progressive Web App (PWA) gibt es noch eine modernere Form über die Einbindung einer manifest.json.
Einbindung
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"/> <title>Page title</title> <link rel="icon" href="./favicon.ico"/> <link rel="icon" type="image/png" sizes="96x96" href="./favicon-96x96.png"/> <link rel="icon" type="image/svg+xml" sizes="any" href="./favicon.svg"/> <link rel="apple-touch-icon" href="./apple-touch-icon.png"/> <link rel="manifest" href="./manifest.json"/> </head> <body> </body> </html>