Issue
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
Solution
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!
Answered By - Yu-Chueh Wang
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.