Closed haobug closed 3 years ago
可能要参考一下主题的文档 https://github.com/olOwOlo/hugo-theme-even#favicon
In order to customize the favicon you need to place all the following files in the static folder at the root of your site, which will overwrite those files in the themes/even/static/ folder.
android-chrome-192x192.png android-chrome-512x512.png apple-touch-icon.png browserconfig.xml favicon.ico favicon-16x16.png favicon-32x32.png manifest.json mstile-150x150.png safari-pinned-tab.svg A favicon generator can help you generate these files.
看起来没生效
还没有 merge ,兄弟。
可能要参考一下主题的文档 https://github.com/olOwOlo/hugo-theme-even#favicon
In order to customize the favicon you need to place all the following files in the static folder at the root of your site, which will overwrite those files in the themes/even/static/ folder. android-chrome-192x192.png android-chrome-512x512.png apple-touch-icon.png browserconfig.xml favicon.ico favicon-16x16.png favicon-32x32.png manifest.json mstile-150x150.png safari-pinned-tab.svg A favicon generator can help you generate these files.
太多个了。在线生成的有白底,我自己写脚本写到一半都花梁半个小时了。于是就放弃了。
#!/bin/bash
infile=${1:-logo_200.png}
size=${2:-16}
fstem=$(filename $infile)
fstem="favicon"
convert $infile -background none -resize ${size} -density ${size}x${size} ${fstem}.ico
for size in 16 32 96;
do
convert $infile -background none -resize ${size} ${fstem}-${size}x${size}.png
done
fstem=android-chrome
for size in 192 512;
do
convert $infile -background none -resize ${size} ${fstem}-${size}x${size}.png
done
fstem="apple-icon"
for size in 57 60 72 114 120 144 152 180;
do
convert $infile -background none -resize ${size} ${fstem}-${size}x${size}.png
done
cp apple-icon-152x152.png apple-icon-precomposed.png
cp apple-icon-180x180.png apple-touch-icon.png
我到这了,你继续 @too
我到这了,你继续 @too
我感觉不需要自己造轮子,等我把 Hugo Post Guide for CDLUG 解决了,我去找找网上的工具做看看。 你确定是没有 merge 所以不生效吗? 我以为是 @QuantumGhost 已经在本地测试过了,你如果在本地测试过了的话,我就直接 merge 啦? 我还以为是缺少一些文件引起,所以说看看是不是官方文档这个说到的缺了。如果不是就当我白说了。
嗯,我下午把你的修改拉到我本地测试一下看看,没问题我 merge,主要是我有点不太熟悉这个多个远程仓库的 pull
我去找找网上的工具做看看。
网上工具第一结果有白底。
你确定是没有 merge 所以不生效吗?
目前的闪电符号是 hugo 的 even 主题自带的 favicon
你如果在本地测试过了的话,我就直接 merge 啦?
测试过。希望验证后再 merge,这才是换人 review 的意义
我还以为是缺少一些文件引起,所以说看看是不是官方文档这个说到的缺了。如果不是就当我白说了。
官方给出的那个是多个平台多个浏览器多种用途兼容的检查列表。从名称上看有用于最近访问的缩略图目的的,有生成手机系统桌面链接图标的(ios和android 各一套),同一用途的还支持各种分辨率。有两个问题
嗯,我下午把你的修改拉到我本地测试一下看看,没问题我 merge,主要是我有点不太熟悉这个多个远程仓库的 pull
TLTR;
git remote add cdlug https://github.com/cdlug/cdlug.github.io/
git remote update cdlug
git fetch cdlug pull/38/head:localTest
git checkout localTest
git submodule init
git submodule update
及得主题 submodule 也要下载
git submodule init git submodule update
及得主题 submodule 也要下载
非常感谢如此详细的回复!关于远程协作的提示很有帮助,拿出了小本子记录了。
我本地测试也是看不到生效,MacOS 下使用 Chrome 看到是自动获取的 /favicon-32x32.png
文件。 还是等我去找一个线上自动生成无白底的工具来做这个事情?
我拿第 3 个搜索结果 https://favicon.io/favicon-converter/ 试了一下,似乎没有什么白底,生成的列表里有 32x32 的,我放到本地测试没问题,足够使用了?
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- site.webmanifest
https://en.wikipedia.org/wiki/Favicon#HTML5_recommendation_for_icons_in_multiple_sizes
其实如果觉得麻烦可以不用配置多个的(或者只添加两种:retina 和 非 retina)
然后兼容性:
分辨率支持:
https://realfavicongenerator.net/favicon_compatibility
如果用 SVG Icon 的话,其实直接就是矢量图,也就不用区分分辨率了
follow up at #51
看起来没生效