✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Display favicon in Heroku Dash app

Hello there,

this is my first post in this forum, so please forgive me if I’m violating any guidelines I’ve overseen.

I recently deployed my first dash web app on Heroku (yeah!) and everything works like a charm so far. However, although I was able to add a favicon in my local app, the favicon fails to be displayed when deployed on Heroku. I was only able to find solutions for this problem for other frameworks - but not for dash.

In the beginning, I had my favicon.ico in an assets/ folder. I then tried moving it to a public/ and to the source directory of my app - but nothing resulted in the display of my favicon.

Do you know if I have to set any paths / tags to point to the favicon in the source code of my app?

Thanks in advance!

Hi Tim

Sorry for getting you excited for nothing. I am simply responding to articulate that I too am experiencing the same issue. I’ve read every guide for flask/dash on deploying a favicon; and mine works fine on my local server, but defaults to the Dash favicon when deployed on Heroku.

If anyone in the community can shed some light on this I’d also appreciate it!

Dan

To further update the community on this. I just want to clarify that I think I’ve exhausted every known avenue and I STILL cannot get my heroku hosted dash app to display a custom favicon. I’m quite new to dash and front end development so I’m sure I’m doing something stupid.

Things I’ve tried

  • I have got whitenoise running, so I can serve static files on heroku deployment, including the favicon.ico to /static and /static/assets (where static becomes root on heroku deployment).
    i.e. I’ve created an assets subfolder within root, so it looks like an identical folder structure to my localhost setup when deployed locally and working fine

  • I’ve tried custom flask callback like so:

@server.route(’/favicon.ico’)
def favicon():
return flask.send_from_directory(os.path.join(server.root_path, ‘static’),
‘favicon.ico’)

If someone can guide me to how to use a developer console or something to watch what is happening at page load perhaps this can shed light on it. I’m sure there must be a way to get favicon’s displaying on Dash-Heroku. Please advise!

Hi, I had problems with the favicon.ico that do not worked, I reviewed the heroku assets folder and I found that when I renamed the image as favicon.ico the name was written as “favicon.ico.png”.
Then I renamed it properly and finally the issue its solved.
To review the heroku folders just write in your prompt:
$ “heroku run bash -a app” (replace app for your app name) then cd assets then dir. To finish “exit”-

2 Likes

Thanks Eduardo! Got it working!

I had not thought to login to Heroku in a terminal and check everything. I’ve now got it working.

As it turned out, all I needed to do was have a stand-alone ‘assets’ folder in the root of the repo that just contains the favicon.ico. It’s made confusing because I also need a ‘static’ folder in root which becomes root for serving images and videos using Whitenoise. So it’s a bit confusing but it turns out the favicon can be served outside of the ‘static’ folder using Heroku.

So, FYI to anyone using Dash on Heroku. All you need to do is have an ‘assets/favicon.ico’ in your root. No other callbacks or fancy Flask stuff required and the favicon should work. If you are serving other static files you will need to install Whitenoise and setup a second folder in root ‘static/’ from which you can serve custom images, videos etc. From the dash app perspective, the static folder becomes root so when serving images and videos. So in reality if you had ‘static/blah.png’ from the dash app code you would simply use ‘blah.png’. Apologies to anyone if this is obvious but I’ve found it quite tricky getting used to Heroku and some of these little quirks.

Cheers
Dan

2 Likes

Hi Dan,
Glad to hear that you find the problem !