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:
...some code... <head> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> </head> ...some code...
And in my routes.py:
import os
from flask import send_from_directory
@app.route('/browserconfig.xml')
def browserconfigXml():
return send_from_directory(os.path.join(app.root_path, 'static'),'browserconfig.xml', mimetype='image/png')
@app.route('/mstile-150x150.png')
def mstilePng():
return send_from_directory(os.path.join(app.root_path, 'static'),'mstile-150x150.png', mimetype='image/png')
@app.route('/apple-touch-icon-precomposed.png')
@app.route('/apple-touch-icon.png')
def androidPng():
return send_from_directory(os.path.join(app.root_path, 'static'),'apple-touch-icon.png', mimetype='image/png')
@app.route('/favicon.ico')
def favicon():
return send_from_directory(os.path.join(app.root_path, 'static'),'favicon.ico', mimetype='image/vnd.microsoft.icon')
Here are the files in my main/static folder:
main.css android-chrome-192x192.png android-chrome-512x512.png apple-touch-ico.png browserconfig.xml favicon.ico favicon-16x16.png favicon-32x32.png mstile-150x150.png site.webmanifest
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:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">
And here is my route.py file:
import os
from flask import send_from_directory
@app.route('/browserconfig.xml')
def browserconfigXml():
return send_from_directory(os.path.join(app.root_path, 'static'),'browserconfig.xml', mimetype='image/png')
@app.route('/mstile-150x150.png')
def mstilePng():
return send_from_directory(os.path.join(app.root_path, 'static'),'mstile-150x150.png', mimetype='image/png')
@app.route("/favicon-32x32.png")
def andPeng():
return send_from_directory(os.path.join(app.root_path, 'static'),'favicon-32x32.png', mimetype='image/png')
@app.route('/apple-touch-icon-precomposed.png')
@app.route('/android-chrome-192x192.png')
def androidChromePng():
return send_from_directory(os.path.join(app.root_path, 'static'),'android-chrome-192x192.png', mimetype='image/png')
@app.route('/site.webmanifest')
def siteWebman():
return send_from_directory(os.path.join(app.root_path, 'static'),'site.webmanifest', mimetype='image/png')
@app.route('/safari-pinned-tab.svg')
def safariPinned():
return send_from_directory(os.path.join(app.root_path, 'static'),'safari-pinned-tab.svg', mimetype='image/svg')
@app.route('/android-chrome-512x512.png')
def androidChromeFive():
return send_from_directory(os.path.join(app.root_path, 'static'),'android-chrome-512x512.png', mimetype='image/png')
@app.route('/apple-touch-icon.png')
def applePng():
return send_from_directory(os.path.join(app.root_path, 'static'),'apple-touch-icon.png', mimetype='image/png')
@app.route('/favicon.ico')
def favicon():
return send_from_directory(os.path.join(app.root_path, 'static'),'favicon.ico', mimetype='image/vnd.microsoft.icon')
I also noticed that I forgot to implement a file in the static folder. So now the static folder looks like this:
main.css android-chrome-192x192.png android-chrome-512x512.png apple-touch-ico.png browserconfig.xml favicon.ico favicon-16x16.png favicon-32x32.png mstile-150x150.png site.webmanifest safari-pinned-tab.svg
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!