1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adding a favicon — Flask 0.8 documentation</title>
<link rel="stylesheet" href="../_static/flasky.css" type="text/css" />
<link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '../',
VERSION: '0.8',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="../_static/jquery.js"></script>
<script type="text/javascript" src="../_static/underscore.js"></script>
<script type="text/javascript" src="../_static/doctools.js"></script>
<link rel="top" title="Flask 0.8 documentation" href="../index.html" />
<link rel="up" title="Patterns for Flask" href="index.html" />
<link rel="next" title="Streaming Contents" href="streaming.html" />
<link rel="prev" title="MongoKit in Flask" href="mongokit.html" />
<link rel="apple-touch-icon" href="../_static/touch-icon.png" />
<link media="only screen and (max-device-width: 480px)" href="../_static/small_flask.css" type= "text/css" rel="stylesheet" />
</head>
<body>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="../genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="streaming.html" title="Streaming Contents"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="mongokit.html" title="MongoKit in Flask"
accesskey="P">previous</a> |</li>
<li><a href="../index.html">Flask 0.8 documentation</a> »</li>
<li><a href="index.html" accesskey="U">Patterns for Flask</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="adding-a-favicon">
<h1>Adding a favicon<a class="headerlink" href="#adding-a-favicon" title="Permalink to this headline">¶</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
<tt class="file docutils literal"><span class="pre">favicon.ico</span></tt>.</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"><div class="highlight"><pre><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"shortcut icon"</span> <span class="na">href=</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="nt">></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 webserver 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-python"><div class="highlight"><pre><span class="n">app</span><span class="o">.</span><span class="n">add_url_rule</span><span class="p">(</span><span class="s">'/favicon.ico'</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="s">'static'</span><span class="p">,</span> <span class="n">filename</span><span class="o">=</span><span class="s">'favicon.ico'</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.html#flask.send_from_directory" title="flask.send_from_directory"><tt class="xref py py-func docutils literal"><span class="pre">send_from_directory()</span></tt></a>:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="kn">import</span> <span class="nn">os</span>
<span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">send_from_directory</span>
<span class="nd">@app.route</span><span class="p">(</span><span class="s">'/favicon.ico'</span><span class="p">)</span>
<span class="k">def</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="s">'static'</span><span class="p">),</span>
<span class="s">'favicon.ico'</span><span class="p">,</span> <span class="n">mimetype</span><span class="o">=</span><span class="s">'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
webserver’s documentation.</p>
<div class="section" id="see-also">
<h2>See also<a class="headerlink" href="#see-also" title="Permalink to this headline">¶</a></h2>
<ul class="simple">
<li>The <a class="reference external" href="http://en.wikipedia.org/wiki/Favicon">Favicon</a> article on
Wikipedia</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper"><p class="logo"><a href="../index.html">
<img class="logo" src="../_static/flask.png" alt="Logo"/>
</a></p>
<h3><a href="../index.html">Table Of Contents</a></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>Related Topics</h3>
<ul>
<li><a href="../index.html">Documentation overview</a><ul>
<li><a href="index.html">Patterns for Flask</a><ul>
<li>Previous: <a href="mongokit.html" title="previous chapter">MongoKit in Flask</a></li>
<li>Next: <a href="streaming.html" title="next chapter">Streaming Contents</a></li>
</ul></li>
</ul></li>
</ul>
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="../_sources/patterns/favicon.txt"
rel="nofollow">Show Source</a></li>
</ul>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="../search.html" method="get">
<input type="text" name="q" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="footer">
© Copyright 2010, Armin Ronacher.
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a>.
</div>
</body>
</html>
|
