I uses the https://realfavicongenerator.net/ to generate and check the icon, however I tried many times and couldn’t get rid of this two following errors:
The other three are all done and the final code are below, what do I need to change to make it work?
In home.html:
JavaScript
x
11
11
1
some code2
<head>3
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">4
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">5
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">6
<link rel="manifest" href="/site.webmanifest">7
<meta name="msapplication-TileColor" content="#da532c">8
<meta name="theme-color" content="#ffffff">9
</head> 10
some code11
And in my routes.py:
JavaScript
1
19
19
1
import os2
from flask import send_from_directory3
4
@app.route('/browserconfig.xml')5
def browserconfigXml():6
return send_from_directory(os.path.join(app.root_path, 'static'),'browserconfig.xml', mimetype='image/png')7
8
@app.route('/mstile-150x150.png')9
def mstilePng():10
return send_from_directory(os.path.join(app.root_path, 'static'),'mstile-150x150.png', mimetype='image/png')11
@app.route('/apple-touch-icon-precomposed.png')12
@app.route('/apple-touch-icon.png')13
def androidPng():14
return send_from_directory(os.path.join(app.root_path, 'static'),'apple-touch-icon.png', mimetype='image/png')15
16
@app.route('/favicon.ico')17
def favicon():18
return send_from_directory(os.path.join(app.root_path, 'static'),'favicon.ico', mimetype='image/vnd.microsoft.icon')19
Here are the files in my main/static folder:
JavaScript
1
11
11
1
main.css2
android-chrome-192x192.png3
android-chrome-512x512.png4
apple-touch-ico.png5
browserconfig.xml6
favicon.ico7
favicon-16x16.png8
favicon-32x32.png9
mstile-150x150.png10
site.webmanifest11
Thanks in Advance
Advertisement
Answer
So I did not really know how I made it work but this what I done: I move the head from home.html to layout.html an also add a few more line:
JavaScript
1
9
1
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">2
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">3
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">4
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">5
<link rel="manifest" href="/site.webmanifest">6
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">7
<meta name="msapplication-TileColor" content="#da532c">8
<meta name="theme-color" content="#ffffff"> 9
And here is my route.py file:
JavaScript
1
38
38
1
import os2
from flask import send_from_directory3
@app.route('/browserconfig.xml')4
def browserconfigXml():5
return send_from_directory(os.path.join(app.root_path, 'static'),'browserconfig.xml', mimetype='image/png')6
7
@app.route('/mstile-150x150.png')8
def mstilePng():9
return send_from_directory(os.path.join(app.root_path, 'static'),'mstile-150x150.png', mimetype='image/png')10
@app.route("/favicon-32x32.png")11
def andPeng():12
return send_from_directory(os.path.join(app.root_path, 'static'),'favicon-32x32.png', mimetype='image/png')13
@app.route('/apple-touch-icon-precomposed.png')14
15
@app.route('/android-chrome-192x192.png')16
def androidChromePng():17
return send_from_directory(os.path.join(app.root_path, 'static'),'android-chrome-192x192.png', mimetype='image/png')18
19
@app.route('/site.webmanifest')20
def siteWebman():21
return send_from_directory(os.path.join(app.root_path, 'static'),'site.webmanifest', mimetype='image/png')22
23
@app.route('/safari-pinned-tab.svg')24
def safariPinned():25
return send_from_directory(os.path.join(app.root_path, 'static'),'safari-pinned-tab.svg', mimetype='image/svg')26
27
@app.route('/android-chrome-512x512.png')28
def androidChromeFive():29
return send_from_directory(os.path.join(app.root_path, 'static'),'android-chrome-512x512.png', mimetype='image/png')30
@app.route('/apple-touch-icon.png')31
def applePng():32
return send_from_directory(os.path.join(app.root_path, 'static'),'apple-touch-icon.png', mimetype='image/png')33
34
35
@app.route('/favicon.ico')36
def favicon():37
return send_from_directory(os.path.join(app.root_path, 'static'),'favicon.ico', mimetype='image/vnd.microsoft.icon')38
I also noticed that I forgot to implement a file in the static folder. So now the static folder looks like this:
JavaScript
1
12
12
1
main.css2
android-chrome-192x192.png3
android-chrome-512x512.png4
apple-touch-ico.png5
browserconfig.xml6
favicon.ico7
favicon-16x16.png8
favicon-32x32.png9
mstile-150x150.png10
site.webmanifest11
safari-pinned-tab.svg12
I’m not sure if this is the best solution but I did know this allows users to see the favicon from android, ios, and windows devices!