CODEWITHSUNDEEP
flaskplotly-dash
Ivan
Ivan

Reputation: 7746

Changing the favicon in Flask/Dash

Trying to get the favicon to load I have followed suggestions from the internet:

server = Flask(__name__, static_folder='static')
app =  dash.Dash(external_stylesheets=external_stylesheets, server=server)

app.css.config.serve_locally = False
app.scripts.config.serve_locally = True

@server.route('/favicon.ico')
def favicon():
    print('Server root path', server.root_path)
    return send_from_directory(os.path.join(server.root_path, 'static'),
                               'dice.ico', mimetype='image/vnd.microsoft.icon')

   ...
   app.run_server(debug=True)

If I browse to the favicon, I see it:

http://www.example.com/favicon.ico

However, when I browse to

http://www.example.com

I see the dash default icon with it's own description. How do I ensure my ownfavicon loads correctly?

Upvotes: 19

Views: 21634

Answers (6)

Janíson Pinheiro
Janíson Pinheiro

Reputation: 1

It is necessary to have only one folder named 'assets' with a file named 'favicon.ico'

Upvotes: 0

Anatoly Alekseev
Anatoly Alekseev

Reputation: 2410

Adding for the sake of completeness. Nowadays, it's recommended to use a bundle of icons with different resolutions to please different browsers and ensure the best picture quality. You can produce such a bundle with the help of, say, realfavicongenerator.net Or you simply might want to use a non-standard .png or .svg icon.

For that, you can subclass Dash and add your much desired link rel and meta tags to its interpolate_index method:

import dash

class CustomDash(dash.Dash):
    def interpolate_index(self, **kwargs):
        return '''
<!DOCTYPE html>
<html>
    <head>
        {metas}
        <title>{title}</title>

        <link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
        <link rel="manifest" href="assets/favicons/site.webmanifest">
        <link rel="mask-icon" href="assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">

        {css}
    </head>
    <body>
        {app_entry}
        <footer>
            {config}
            {scripts}
            {renderer}
        </footer>
    </body>
</html>
        '''.format(**kwargs)
            
app = CustomDash()

Do not forget to place the unzipped bundle into your assets/favicons subfolder!

Upvotes: 1

Sergio Yahni
Sergio Yahni

Reputation: 29

You should create an "assets" folden and then update the "__favicon" property in your Dash app:

app._favicon = "favico.ico"

Upvotes: 1

Wellingon - tinho
Wellingon - tinho

Reputation: 46

An alternative used in Dash is:

app = dash.Dash()
app._favicon = ("path_to_folder/(your_icon).co")

Upvotes: 3

Alex Jones
Alex Jones

Reputation: 15

You can just put title="My Title" as an argument when establishing the Dash app instance. i.e.

app = dash.Dash(
    __name__,
    title="My Title",
    server=server,
    routes_pathname_prefix='/dash/'
)

Upvotes: -1

LNF
LNF

Reputation: 709

To simply change the favicon all you need to do is to create a folder called assets next to your app.py and place your favicon.ico inside of that folder and it will work perfectly.

app.py:

import flask
import dash
import dash_html_components as html

server = flask.Flask(__name__)

@server.route('/')
def index():
    return 'Hello Flask app'

app = dash.Dash(
    __name__,
    server=server,
    routes_pathname_prefix='/dash/'
)

app.layout = html.Div("My Dash app")

if __name__ == '__main__':
    app.run_server(debug=True)

Here is the docs link for more information: Dash docs

Upvotes: 28

Related Questions