更改 Flask/Dash 中的图标

Question

尝试加载 favicon 我遵循了互联网上的建议：

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)

如果我浏览到 favicon，我看到它：

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

但是，当我浏览到

http://www.example.com

我看到 dash 默认图标及其自己的描述。如何确保我自己的favicon 正确加载？

Answer 1

要简单地更改 favicon，您需要做的就是在您的 app.py 旁边创建一个名为 assets 的文件夹，然后将您的 favicon.ico 放入该文件夹它将完美运行。

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)

这里是文档 link 以获取更多信息：Dash docs

Answer 2

您可以在创建 Dash 应用程序实例时将 title="My Title" 作为参数。即

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

Answer 3

Dash 中使用的替代方法是：

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

Answer 4

您应该创建一个“资产”文件夹，然后在您的 Dash 应用程序中更新“__favicon”属性：

app._favicon = "favico.ico"

Answer 5

为了完整起见添加。现在推荐使用不同分辨率的图标包来取悦不同的浏览器并保证最佳的图片质量。您可以在 realfavicongenerator.net 的帮助下生成这样的包，或者您可能只想使用非标准的 .png 或 .svg 图标。

为此，您可以子类化 Dash 并将您想要的 link rel 和 meta 标签添加到它的 interpolate_index方法：

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()

不要忘记将解压缩的包放入您的 assets/favicons 子文件夹！

Answer 6

即使 OP 接受的答案不起作用，请参考官方文档：

It is recommended to add name to the dash init to ensure the resources in the assets folder are loaded, eg: app = dash.Dash(name, meta_tags=[...]). When you run your application through some other command line (like the flask command or gunicorn/waitress), the main module will no longer be located where app.py is. By explicitly setting name, Dash will be able to locate the relative assets folder correctly.

在 Dash 对象中包含 __name__：

app = Dash(__name__)

更改 Flask/Dash 中的图标

Changing the favicon in Flask/Dash

flask

plotly-dash