HOWTO · Django

Django에서 깨진 Favicon 수정

이 기사에서는 Django에서 깨진 favicon을 수정하는 방법을 배웁니다.

이 페이지의 내용

이 글은 Django 앱에서 파비콘을 새로 설정하거나 깨진 파비콘을 수정하는 방법을 소개합니다.

파비콘이라는 단어는 즐겨찾기 아이콘을 의미합니다. 앱 제목 왼쪽의 브라우저 탭에 있는 아이콘입니다.

여기에서 현재 브라우저 탭에서 파비콘으로 DelftStack 로고를 볼 수도 있습니다. 즉, 파비콘은 앱 제목으로 브랜드를 나타냅니다.

일반적으로 Django 앱은 urls.py 파일에서 favicon.ico 경로를 찾고 찾지 못하면 기본 HTML 아이콘을 설정합니다.

아래에서는 Django 개발자가 웹 앱에 대한 사용자 정의 favicon을 설정하는 방법을 설명했습니다.

Django에서 깨진 Favicon 수정

깨진 파비콘을 수정하기 전에 사용자는 새 Django 프로젝트를 시작하고 그 안에 새 앱을 만들어야 합니다. 또한 사용자가 프로젝트 및 앱의 urls.py 파일을 설정했는지 확인하십시오.

이제 Django 프로젝트에 정적 디렉토리를 추가하고 그 안에 이미지와 아이콘을 저장합니다.

사용자는 현재 프로젝트 디렉토리에서 터미널을 열고 아래 명령을 입력하여 새 정적 디렉토리를 생성해야 합니다.

mkdir static

이제 인터넷에서 파비콘을 다운로드하여 앱의 정적 디렉토리에 저장하십시오. 또한 사용자는 파비콘이 자신의 로컬 컴퓨터에 있는 경우 다른 위치에서 정적 디렉토리로 복사하여 붙여넣을 수 있습니다.

이제 settings.py 파일을 열어 앱의 정적 디렉터리 경로를 추가합니다. settings.py 파일 끝에 아래 코드를 추가합니다.

아래 코드에서 /static/은 정적으로 만들어야 하는 디렉토리의 이름을 나타내고 BASE_DIR은 프로젝트 디렉토리를 나타냅니다.

settings.py:

import os

STATIC_URL = "/static/"
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

또한 사용자는 settings.py 파일 내의 INSTALLED_APPS 배열에 'django.contrib.staticfiles',가 추가되었는지 확인해야 합니다. 사용자는 아래 이미지에서 INSTALLED_APPS에 어떻게 추가되는지 확인할 수 있습니다.

django 설치 앱

다음으로, 사용자가 앱 내부에 기본 템플릿 또는 단일 템플릿을 가지고 있다고 가정합니다. 사용자는 HTML 템플릿 내에서 정적 디렉토리를 로드해야 합니다.

사용자는 정적 디렉토리를 로드하기 위해 HTML 파일 상단에 아래 코드를 추가합니다.

{% load static %}

이제 사용자는 템플릿 내에 일부 HTML 코드를 추가해야 합니다. 커스텀 favicon을 설정하기 위해 사용자는 HTML 템플릿의 <head> 태그에 아래 코드를 추가할 수 있습니다.

아래 코드에서는 <link> 태그를 사용하여 favicon을 추가했습니다. <link>rel 속성은 현재 문서와 로드된 문서 간의 관계를 지정합니다.

파비콘을 나타내는 바로 가기 아이콘을 값으로 사용했습니다. href 속성에서 정적 키워드와 함께 이미지 URL을 추가하여 정적 디렉토리에서 로드했습니다.

<link rel="shortcut icon" type="image/png" href="{% static '<Relative Icon Path In Static Directory>' %}"/>

아래에서 사용자는 전체 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>

사용자가 앱을 실행하면 제목 왼쪽에 파비콘이 표시됩니다. 아래 출력 이미지에서 사용자는 DelftStack의 로고를 favicon으로 볼 수 있습니다.

장고 파비콘 아이콘

Django에서 깨진 favicon을 수정하는 방법을 성공적으로 배웠습니다. 또한 사용자는 템플릿마다 다른 파비콘을 설정할 수 있습니다.

<link> 태그 내부의 이미지 경로를 변경하고 특정 템플릿의 <head> 섹션에 추가해야 합니다.