Das Favicon, klein aber fein

Im Jahr 1999 von Microsoft eingeführt, fristete das "Favicon" lange Zeit ein Schatten dasein. Das Favicon war damals eben "nur" ein kleines Bild (Icon), das in der Adresszeile bzw. neben dem Favoritenlink dargestellt wurde. Heute spielt es aber eine wesentlich größere Rolle, denn durch ein sauber integriertes Favicon, wird z.B. beim Speichern einer Webseite auf dem Homescreens eines Smartphone ein entsprechend gewünschtes "App" (Link) - Icon angezeigt. Da das Favicon nie von dem W3C Standard unterstützt wurde und auch sonst unterschiedliche Browser häufig andere Ansätze der Implementierung haben, gibt es mittlerweile eingies zu beachten.

Automatisch generieren, anstatt aufwendig manuell zu konfigurieren

All die Details, die man für das Favicon beachten sollte, ändern sich zudem immer mal wieder (neue Endgeräte / Browservarianten implementieren das Favicon neu / anders). Daher macht es wenig Sinn sich persönlich in alle Varianten / Anforderungen einzuarbeiten. Es gibt hierfür einige Generator-Tools in Netz. realfavicongenerator.net emfinde ich dabei als einen der intuitivstes und umfangreichsten. Darüber hinaus, kann man seine Seite zunächst prüfen lassen, ob alle Favicon Anforderungen erfüllt werden.

Einbinden in der eigenen Webseite / Django-Seite

realfavicongenerator.net generiert einige link und meta tags, diese müssen eigentlich nur in den Head-Bereich der jeweiligen Webseite kopiert werden.

In Django bietet es sich an eine "favicon.html Datei" als include zu erstellen:

{% load static %}

<link rel="apple-touch-icon" sizes="180x180" href="{% static '/favicon/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static '/favicon/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static '/favicon/favicon-16x16.png' %}">
<link rel="manifest" href="{% static '/favicon/site.webmanifest' %}">
<link rel="mask-icon" href="{% static '/favicon/safari-pinned-tab.svg' %}" color="#18ad15">
<link rel="shortcut icon" href="{% static '/favicon/favicon.ico' %}">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-config" content="{% static '/favicon/browserconfig.xml' %}">
<meta name="theme-color" content="#ffffff">

<!-- generated with https://realfavicongenerator.net/ -->

und diese dann in der "base.html Datei" zu referenzieren:

<!-- Favicon -->
    {% include 'includes/favicon.html' %}