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에 어떻게 추가되는지 확인할 수 있습니다.
다음으로, 사용자가 앱 내부에 기본 템플릿 또는 단일 템플릿을 가지고 있다고 가정합니다. 사용자는 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> 섹션에 추가해야 합니다.
