CINXE.COM
Adding a favicon — Flask Documentation (3.1.x)
<!DOCTYPE html> <html lang="en" data-content_root="../../"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Adding a favicon — Flask Documentation (3.1.x)</title> <link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=6625fa76" /> <link rel="stylesheet" type="text/css" href="../../_static/flask.css?v=b87c8d14" /> <script src="../../_static/documentation_options.js?v=d71c4578"></script> <script src="../../_static/doctools.js?v=9bcbadda"></script> <script src="../../_static/sphinx_highlight.js?v=dc90522c"></script> <link rel="canonical" href="https://flask.palletsprojects.com/en/stable/patterns/favicon/" /> <link rel="icon" href="../../_static/shortcut-icon.png"/> <link rel="index" title="Index" href="../../genindex/" /> <link rel="search" title="Search" href="../../search/" /> <link rel="next" title="Streaming Contents" href="../streaming/" /> <link rel="prev" title="MongoDB with MongoEngine" href="../mongoengine/" /> <script async type="text/javascript" src="/_/static/javascript/readthedocs-addons.js"></script><meta name="readthedocs-project-slug" content="flask" /><meta name="readthedocs-version-slug" content="stable" /><meta name="readthedocs-resolver-filename" content="/patterns/favicon/" /><meta name="readthedocs-http-status" content="200" /></head><body> <div class="related" role="navigation" aria-label="Related"> <h3>Navigation</h3> <ul> <li class="right" style="margin-right: 10px"> <a href="../../genindex/" title="General Index" accesskey="I">index</a></li> <li class="right" > <a href="../../py-modindex/" title="Python Module Index" >modules</a> |</li> <li class="right" > <a href="../streaming/" title="Streaming Contents" accesskey="N">next</a> |</li> <li class="right" > <a href="../mongoengine/" title="MongoDB with MongoEngine" accesskey="P">previous</a> |</li> <li class="nav-item nav-item-0"><a href="../../">Flask Documentation (3.1.x)</a> »</li> <li class="nav-item nav-item-1"><a href="../" accesskey="U">Patterns for Flask</a> »</li> <li class="nav-item nav-item-this"><a href="">Adding a favicon</a></li> </ul> </div> <div class="document"> <div class="documentwrapper"> <div class="bodywrapper"> <div class="body" role="main"> <section id="adding-a-favicon"> <h1>Adding a favicon<a class="headerlink" href="#adding-a-favicon" title="Link to this heading">¶</a></h1> <p>A “favicon” is an icon used by browsers for tabs and bookmarks. This helps to distinguish your website and to give it a unique brand.</p> <p>A common question is how to add a favicon to a Flask application. First, of course, you need an icon. It should be 16 × 16 pixels and in the ICO file format. This is not a requirement but a de-facto standard supported by all relevant browsers. Put the icon in your static directory as <code class="file docutils literal notranslate"><span class="pre">favicon.ico</span></code>.</p> <p>Now, to get browsers to find your icon, the correct way is to add a link tag in your HTML. So, for example:</p> <div class="highlight-html+jinja notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"shortcut icon"</span> <span class="na">href</span><span class="o">=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">url_for</span><span class="o">(</span><span class="s1">'static'</span><span class="o">,</span> <span class="nv">filename</span><span class="o">=</span><span class="s1">'favicon.ico'</span><span class="o">)</span> <span class="cp">}}</span><span class="s">"</span><span class="p">></span> </pre></div> </div> <p>That’s all you need for most browsers, however some really old ones do not support this standard. The old de-facto standard is to serve this file, with this name, at the website root. If your application is not mounted at the root path of the domain you either need to configure the web server to serve the icon at the root or if you can’t do that you’re out of luck. If however your application is the root you can simply route a redirect:</p> <div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">app</span><span class="o">.</span><span class="n">add_url_rule</span><span class="p">(</span> <span class="s2">"/favicon.ico"</span><span class="p">,</span> <span class="n">endpoint</span><span class="o">=</span><span class="s2">"favicon"</span><span class="p">,</span> <span class="n">redirect_to</span><span class="o">=</span><span class="n">url_for</span><span class="p">(</span><span class="s2">"static"</span><span class="p">,</span> <span class="n">filename</span><span class="o">=</span><span class="s2">"favicon.ico"</span><span class="p">),</span> <span class="p">)</span> </pre></div> </div> <p>If you want to save the extra redirect request you can also write a view using <a class="reference internal" href="../../api/#flask.send_from_directory" title="flask.send_from_directory"><code class="xref py py-func docutils literal notranslate"><span class="pre">send_from_directory()</span></code></a>:</p> <div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="kn">import</span><span class="w"> </span><span class="nn">os</span> <span class="kn">from</span><span class="w"> </span><span class="nn">flask</span><span class="w"> </span><span class="kn">import</span> <span class="n">send_from_directory</span> <span class="nd">@app</span><span class="o">.</span><span class="n">route</span><span class="p">(</span><span class="s1">'/favicon.ico'</span><span class="p">)</span> <span class="k">def</span><span class="w"> </span><span class="nf">favicon</span><span class="p">():</span> <span class="k">return</span> <span class="n">send_from_directory</span><span class="p">(</span><span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="n">app</span><span class="o">.</span><span class="n">root_path</span><span class="p">,</span> <span class="s1">'static'</span><span class="p">),</span> <span class="s1">'favicon.ico'</span><span class="p">,</span> <span class="n">mimetype</span><span class="o">=</span><span class="s1">'image/vnd.microsoft.icon'</span><span class="p">)</span> </pre></div> </div> <p>We can leave out the explicit mimetype and it will be guessed, but we may as well specify it to avoid the extra guessing, as it will always be the same.</p> <p>The above will serve the icon via your application and if possible it’s better to configure your dedicated web server to serve it; refer to the web server’s documentation.</p> <section id="see-also"> <h2>See also<a class="headerlink" href="#see-also" title="Link to this heading">¶</a></h2> <ul class="simple"> <li><p>The <a class="reference external" href="https://en.wikipedia.org/wiki/Favicon">Favicon</a> article on Wikipedia</p></li> </ul> </section> </section> <div class="clearer"></div> </div> </div> </div> <span id="sidebar-top"></span> <div class="sphinxsidebar" role="navigation" aria-label="Main"> <div class="sphinxsidebarwrapper"> <p class="logo"><a href="../../"> <img class="logo" src="../../_static/flask-vertical.png" alt="Logo of Flask"/> </a></p> <h3>Contents</h3> <ul> <li><a class="reference internal" href="#">Adding a favicon</a><ul> <li><a class="reference internal" href="#see-also">See also</a></li> </ul> </li> </ul> <h3>Navigation</h3> <ul> <li><a href="../../">Overview</a> <ul> <li><a href="../">Patterns for Flask</a> <ul> <li>Previous: <a href="../mongoengine/" title="previous chapter">MongoDB with MongoEngine</a> <li>Next: <a href="../streaming/" title="next chapter">Streaming Contents</a></ul> </li> </ul> </li> </ul> <search id="searchbox" style="display: none" role="search"> <h3 id="searchlabel">Quick search</h3> <div class="searchformwrapper"> <form class="search" action="../../search/" method="get"> <input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/> <input type="submit" value="Go" /> </form> </div> </search> <script>document.getElementById('searchbox').style.display = "block"</script><div id="ethical-ad-placement"></div> </div> </div> <div class="clearer"></div> </div> <div class="footer" role="contentinfo"> © Copyright 2010 Pallets. Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 8.2.3. </div> </body> </html>