How to get static files to work in Django | Favicon not getting loaded but appears when entering that directory

119 Views Asked by At

I'm having trouble trying to get my static files to work, I've already tried different answers for a long time and I'm getting confused what's the problem. I was trying to load my css with debug turned off, but I think its normal for the css not to appear since django doesn't load static files with debug turned off. My problem was when trying to put a favicon into my test website. I also think in the future I'll have complications with JS, etc..

main.html

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Django</title>

        <!-- load staticfiles-->
        <link rel="stylesheet" href="{% static 'main.css' %}">
        <link rel="shortcut icon" href="{% static "favicon.ico" %}}" type="image/png">

    </head>
    <body>
        
    </body>
</html>

urls.py

from django.urls import path
from f1trackerapp import views
from django.contrib.staticfiles.storage import staticfiles_storage
from django.views.generic.base import RedirectView

urlpatterns = [
    path("", views.f1trackerapp, name="f1trackerapp"),
    path('favicon.ico', RedirectView.as_view(url=staticfiles_storage.url('favicon.ico')))
]

settings.py (stackoverflow doesn't let me post full settings.py code)

...
from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
...
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['127.0.0.1']


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'f1trackerapp',
]
...
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'f1stats.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

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

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

Errors:
"GET /static/favicon.ico%7D HTTP/1.1" 404 1911

My project directory looks like this:

F1stats
    .venv
    .vscode
    f1stats (project)
        --project files--
    f1trackerapp (app)
        --app files--
        templates
            main.html
        migrations
    static
        favicon.ico.png
        main.css
    db.sqlite3
    manage.py
    requirements.txt

I already read many documents, and stackoverflow posts, nothing really helped me just made me more confused.

Help would be greatly appreciated, thank you!

1

There are 1 best solutions below

1
Marco On BEST ANSWER

Remove one } in your template {% static "favicon.ico" %}}. You wrongly added two curly brackets at the end. You can see that as the url has an extra/wrong %7D behind your url.