Reparieren Sie das defekte Favicon in Django
In diesem Artikel erfahren Sie, wie Sie in der Django-App ein neues Favicon festlegen oder das defekte Favicon reparieren.
Das Wort favicon steht für das Favoriten-Icon. Es ist ein Symbol im Browser-Tab links neben dem App-Titel.
Hier sehen Sie auch das Logo des DelftStack in Ihrem aktuellen Browser-Tab als Favicon. Kurz gesagt, das Favicon repräsentiert Ihre Marke mit Ihrem App-Titel.
Im Allgemeinen sucht die Django-App nach dem Pfad favicon.ico in der Datei urls.py, und wenn sie ihn nicht findet, setzt sie das Standard-HTML-Icon.
Im Folgenden haben wir erklärt, wie Django-Entwickler ein benutzerdefiniertes Favicon für die Web-App festlegen können.
Reparieren Sie das defekte Favicon in Django
Bevor wir beginnen, das defekte Favicon zu reparieren, müssen Benutzer das neue Django-Projekt gestartet und darin eine neue App erstellt haben. Stellen Sie außerdem sicher, dass die Benutzer die Datei urls.py des Projekts und der App eingerichtet haben.
Jetzt fügen wir das statische Verzeichnis zu unserem Django-Projekt hinzu und speichern Bilder und Symbole darin.
Benutzer müssen das Terminal im aktuellen Projektverzeichnis öffnen und den folgenden Befehl eingeben, um ein neues statisches Verzeichnis zu erstellen.
mkdir static
Laden Sie nun das Favicon aus dem Internet herunter und speichern Sie es im statischen Verzeichnis Ihrer App. Außerdem können Benutzer das Favicon von einem anderen Ort kopieren und in das statische Verzeichnis einfügen, wenn es sich auf ihrem lokalen Computer befindet.
Öffnen Sie nun die Datei settings.py, um den Pfad für das statische Verzeichnis Ihrer App hinzuzufügen. Fügen Sie den folgenden Code am Ende der Datei settings.py hinzu.
Im folgenden Code steht /static/ für den Namen des Verzeichnisses, das Sie statisch machen müssen, und BASE_DIR für Ihr Projektverzeichnis.
settings.py:
import os
STATIC_URL = "/static/"
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
Außerdem müssen Benutzer sicherstellen, dass 'django.contrib.staticfiles', zum Array INSTALLED_APPS in der Datei settings.py hinzugefügt wird. Benutzer können im Bild unten beobachten, wie es zu INSTALLED_APPS hinzugefügt wird.
Als Nächstes gehen wir davon aus, dass Benutzer eine Basisvorlage oder eine einzelne Vorlage in der App haben. Benutzer müssen das statische Verzeichnis innerhalb der HTML-Vorlage laden.
Benutzer fügen den folgenden Code oben in der HTML-Datei hinzu, um das statische Verzeichnis zu laden.
{% load static %}
Jetzt müssen Benutzer HTML-Code in die Vorlage einfügen. Um ein benutzerdefiniertes Favicon einzurichten, können Benutzer den folgenden Code zum <head>-Tag der HTML-Vorlage hinzufügen.
Im folgenden Code haben wir das Tag <link> verwendet, um ein Favicon hinzuzufügen. Das Attribut rel von <link> spezifiziert die Beziehung zwischen dem aktuellen und geladenen Dokument.
Als Wert haben wir das shortcut icon genommen, das das Favicon darstellt. Im Attribut href haben wir die Bild-URL mit dem Schlüsselwort static hinzugefügt, um sie aus dem Verzeichnis static zu laden.
<link rel="shortcut icon" type="image/png" href="{% static '<Relative Icon Path In Static Directory>' %}"/>
Unten können Benutzer den vollständigen Code der HTML-Vorlage sehen.
{% load static %}
<!doctype html>
<html lang="en">
<head>
<title>Setup New Favicon In Django</title>
<link rel="shortcut icon" type="image/png" href="{% static 'delftstack.jpg' %}"/>
</head>
<body>
<h1>Welcome to DelftStack!</h1>
</body>
</html>
Benutzer können das Favicon links neben dem Titel sehen, wenn sie die App ausführen. Im unteren Ausgabebild können Benutzer das Logo von DelftStack als Favicon sehen.
Wir haben erfolgreich gelernt, das defekte Favicon in Django zu reparieren. Darüber hinaus können Benutzer für jede Vorlage unterschiedliche Favicons einrichten.
Sie müssen den Bildpfad innerhalb des <link>-Tags ändern und ihn dem <head>-Abschnitt einer bestimmten Vorlage hinzufügen.
