Ideally, this functionality would be set entirely through the dash-html-components, consistent with the rest of the app. For things like favicon, you should be able to set this with html.Link(rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>). There are a couple of things to keep in mind:
Right now, Dash renders itself inside the <body/> instead of the <head/>. There may be some properties where this matters more than others, I haven’t researched this thoroughly.
Dash apps don’t support hosting arbitrary content like favicon.ico, so you’ll either need to host this remotely or add a static view to your dash app (by accessing the flask instance in app.server) that serves an icon. We’ll add serving static content in the future.
Dash apps are rendered on the client instead of the server. If the app takes a long time to load, some items like meta descriptions may not be recognized by e.g. a search engine since they aren’t loaded in the first initial request.
Hello, all!
I am confused too about favicon.
Here is my code. app.layout = html.Div([ html.Meta(name='viewport', content='width=device-width, initial-scale=1.0'), html.Link(rel='shortcut icon', href='https://rawgit.com/../favicon.ico'), html.Div([...]) ])
Favicon did not change.
If there are some thoughts or solutions, it will be really helpful.
Thank you.
It looks like the same setup I had as far as I can see, which worked for me, so not sure what’s going on. What do you see under the favicon.ico request when you look in the the Network tab of the Dev Tools? (you’ll need to have it open when you load the page)
I think it was an issue of not knowing what a .ico was, exactly. I had a .svg, which I figured would work, but downloaded a random example .ico just to be sure and it worked! Sorry for the noise. Based on the slightly different ways of defining the dash vs. flask parts, I did drop the app prefix from my stuff though. I ended up with:
Just to understand what’s going on here, this is sort of like a callback? I’m interpreting this like “When the browser asks for /favicon.ico, serve up this file, which is app_root_directory/static/favicon.ico.” Is that accurate? For serving other files, I’m guessing this does’t work, as the request for favicon.ico is built in vs. requests for some other random file are not; is that also the case?
Yeah, that’ accurate. server is referencing the underlying flask server, so server.route is actually a flask thing not a a Dash thing.
That’s right - the browser automatically makes these requests for every page it loads unless you specify the favicon markup in your html itself (e.g. Favicon Code | The Icon Handbook)
@mikesmith1611 in my case, no but it looks possible from above? I was able to use the example from @nednedabove. I made a minimal example on github for you if you’d like to take a look!
You can’t wire up different files to be used for the favicon (as @chriddyp pointed out), but if you’re wondering whether you can use this method to expose arbitrary files, then the answer is yes. You just need to be careful not to let the routes you create clash with the routes that Dash creates, such as ‘_dash-layout’ and ‘_dash-dependencies’. obviously this is unlikely, but you can set the config param url_base_pathname, which will be prefixed to Dash’s routes.
It’s worth noting that, in production, it’s better to let a web server like Apache or Nginx serve your static files – which is optimised for such tasks – rather than slowing down the Flask app that’s running Dash. But for low-traffic sites/prototypes etc, just using Flask works fine.
@mikesmith1611 ahh. Yeah, I had a load of that too. In the example I made for you, I was specifically seeing if it would render from just the base directory (vs. ./static/) and was just baffled by what in the world was happening. I’d even change the filename and it would still show the old file!?
Yes, turns out chrome (chromium on linux in my case) was caching something somehow. There were a couple suggestions here I found for others who stumble on this issue. Like Shift + F5 and actually going to localhost:port/static/favicon.ico.
Here is a PR that addresses this issue (including page titles, favicon, etc in the app) among others: https://github.com/plotly/dash/pull/171. Feedback welcome! (Please comment on the PR itself)
Hi, I am trying to set the favicon by this code. I am not having any luck. I suspect there is something wrong with the root_path.
I have folder called favicon which contains this python file and static folder. The static folder has favicon.ico file. Let me know if I am going wrong somewhere. Or have i missed something, please let me know