如何将网站图标添加到 android 主页快捷方式和 mac Capitan Safari

Question

我使用https://realfavicongenerator.net/来生成并检查图标，但是我尝试了很多次都无法摆脱以下两个错误：

其他三个都搞定了，下面是最终代码，我需要改什么才能让它生效？

在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...

在我的 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')

这是我的 main/static 文件夹中的文件：

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

提前致谢

Answer 1

所以我真的不知道我是如何让它工作的，但这是我所做的：我将头部从 home.html 移动到 layout.html 并且还添加了几行：

<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">

这是我的 route.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("/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')

我也注意到我忘了在静态文件夹中实现一个文件。所以现在静态文件夹看起来像这样：

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

我不确定这是否是最佳解决方案，但我确实知道这允许用户从 android、ios 和 windows 设备上查看图标！

如何将网站图标添加到 android 主页快捷方式和 mac Capitan Safari

how to add favicon to android home shortcut and mac Capitan Safari

html

python

favicon

flask