9.1. Organizing your static files (Explore Flask)

We'll create a directory for our static files called static inside our application package.

myapp/
    __init__.py
    static/
    templates/
    views/
    models.py
run.py

How you organize the files in static/ is a matter of personal preference. Personally, I get a little irked by having third-party libraries (e.g. jQuery, Bootstrap, etc.) mixed in with my own JavaScript and CSS files. To avoid this, I recommend separating third-party libraries out into a lib/ folder within the appropriate directory. Some projects use vendor/ instead of lib/.

static/
    css/
        lib/
            bootstrap.css
        style.css
        home.css
        admin.css
    js/
        lib/
            jquery.js
        home.js
        admin.js
    img/
        logo.svg
        favicon.ico

9.1.1. Serving a favicon

The files in our static directory will be served from example.com/static/. By default, web browsers and other software expects our favicon to be at example.com/favicon.ico. To fix this discrepency, we can add the following in the <head> section of our site template.

<link rel="shortcut icon"
    href="{{ url_for('static', filename='img/favicon.ico') }}">