1Adding a favicon
2================
3
4A "favicon" is an icon used by browsers for tabs and bookmarks. This helps
5to distinguish your website and to give it a unique brand.
6
7A common question is how to add a favicon to a Flask application. First, of
8course, you need an icon. It should be 16 × 16 pixels and in the ICO file
9format. This is not a requirement but a de-facto standard supported by all
10relevant browsers. Put the icon in your static directory as
11:file:`favicon.ico`.
12
13Now, to get browsers to find your icon, the correct way is to add a link
14tag in your HTML. So, for example:
15
16.. sourcecode:: html+jinja
17
18    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
19
20That's all you need for most browsers, however some really old ones do not
21support this standard. The old de-facto standard is to serve this file,
22with this name, at the website root. If your application is not mounted at
23the root path of the domain you either need to configure the web server to
24serve the icon at the root or if you can't do that you're out of luck. If
25however your application is the root you can simply route a redirect::
26
27    app.add_url_rule('/favicon.ico',
28                     redirect_to=url_for('static', filename='favicon.ico'))
29
30If you want to save the extra redirect request you can also write a view
31using :func:`~flask.send_from_directory`::
32
33    import os
34    from flask import send_from_directory
35
36    @app.route('/favicon.ico')
37    def favicon():
38        return send_from_directory(os.path.join(app.root_path, 'static'),
39                                   'favicon.ico', mimetype='image/vnd.microsoft.icon')
40
41We can leave out the explicit mimetype and it will be guessed, but we may
42as well specify it to avoid the extra guessing, as it will always be the
43same.
44
45The above will serve the icon via your application and if possible it's
46better to configure your dedicated web server to serve it; refer to the
47web server's documentation.
48
49See also
50--------
51
52* The `Favicon <https://en.wikipedia.org/wiki/Favicon>`_ article on
53  Wikipedia
54