Arreglar el Favicon roto en Django
Este artículo presenta cómo configurar un nuevo favicon o reparar el favicon roto en la aplicación Django.
La palabra favicon significa Icono favorito. Es un ícono en la pestaña del navegador a la izquierda del título de la aplicación.
Aquí, también puede ver el logotipo de DelftStack en la pestaña actual de su navegador como un favicon. En resumen, el favicon representa su marca con el título de su aplicación.
En general, la aplicación Django busca la ruta favicon.ico en el archivo urls.py, y si no la encuentra, establece el icono HTML predeterminado.
A continuación, explicamos cómo los desarrolladores de Django pueden configurar un favicon personalizado para la aplicación web.
Arreglar el Favicon roto en Django
Antes de que comencemos a arreglar el favicon roto, los usuarios deben haber iniciado el nuevo proyecto Django y creado una nueva aplicación dentro de eso. Además, asegúrese de que los usuarios hayan configurado el archivo urls.py del proyecto y la aplicación.
Ahora, agregaremos el directorio estático a nuestro proyecto Django y almacenaremos imágenes e íconos dentro de él.
Los usuarios deben abrir la terminal en el directorio del proyecto actual e ingresar el siguiente comando para crear un nuevo directorio estático.
mkdir static
Ahora, descargue el favicon de Internet y guárdelo en el directorio estático de su aplicación. Además, los usuarios pueden copiar y pegar el favicon desde otra ubicación al directorio estático si reside en su computadora local.
Ahora, abra el archivo settings.py para agregar la ruta del directorio estático de su aplicación. Agregue el siguiente código al final del archivo settings.py.
En el siguiente código, /static/ representa el nombre del directorio que necesita convertir en estático y BASE_DIR representa el directorio de su proyecto.
configuraciones.py:
import os
STATIC_URL = "/static/"
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
Además, los usuarios deben asegurarse de que 'django.contrib.staticfiles', se agregue a la matriz INSTALLED_APPS dentro del archivo settings.py. Los usuarios pueden observar cómo se agrega a INSTALLED_APPS en la imagen a continuación.
A continuación, asumimos que los usuarios tienen una plantilla base o cualquier plantilla única dentro de la aplicación. Los usuarios deben cargar el directorio estático dentro de la plantilla HTML.
Los usuarios agregan el siguiente código en la parte superior del archivo HTML para cargar el directorio estático.
{% load static %}
Ahora, los usuarios deben agregar un código HTML dentro de la plantilla. Para configurar un favicon personalizado, los usuarios pueden agregar el siguiente código a la etiqueta <head> de la plantilla HTML.
En el siguiente código, hemos usado la etiqueta <link> para agregar un favicon. El atributo rel de <enlace> especifica la relación entre el documento actual y el cargado.
Hemos tomado como valor el icono de acceso directo, que representa el favicon. En el atributo href hemos añadido la URL de la imagen con la palabra clave static para cargarla desde el directorio static.
<link rel="shortcut icon" type="image/png" href="{% static '<Relative Icon Path In Static Directory>' %}"/>
A continuación, los usuarios pueden ver el código completo de la plantilla HTML.
{% 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>
Los usuarios pueden ver el icono de favoritos a la izquierda del título cuando ejecutan la aplicación. En la imagen de salida a continuación, los usuarios pueden ver el logotipo de DelftStack como un favicon.
Hemos aprendido con éxito a arreglar el favicon roto en Django. Además, los usuarios pueden configurar diferentes favicons para cada plantilla.
Necesitan cambiar la ruta de la imagen dentro de la etiqueta <link> y agregarla a la sección <head> de una plantilla en particular.
