cdlug / cdlug.github.io

Website of Chengdu GNU/Linux User Group
https://cdlug.org
Creative Commons Attribution Share Alike 4.0 International
6 stars 3 forks source link

override favicon.ico #38

Closed haobug closed 3 years ago

QuantumGhost commented 4 years ago

图片

看起来没生效 

too commented 4 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.

haobug commented 4 years ago

图片

看起来没生效

还没有 merge ,兄弟。

haobug commented 4 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.

太多个了。在线生成的有白底,我自己写脚本写到一半都花梁半个小时了。于是就放弃了。

haobug commented 4 years ago
#!/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 commented 4 years ago

我到这了,你继续 @too

我感觉不需要自己造轮子,等我把 Hugo Post Guide for CDLUG 解决了,我去找找网上的工具做看看。 你确定是没有 merge 所以不生效吗? 我以为是 @QuantumGhost 已经在本地测试过了,你如果在本地测试过了的话,我就直接 merge 啦? 我还以为是缺少一些文件引起,所以说看看是不是官方文档这个说到的缺了。如果不是就当我白说了。

嗯,我下午把你的修改拉到我本地测试一下看看,没问题我 merge,主要是我有点不太熟悉这个多个远程仓库的 pull

haobug commented 4 years ago

我去找找网上的工具做看看。

网上工具第一结果有白底。

你确定是没有 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

或者看完整故事 https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/checking-out-pull-requests-locally

git submodule init
git submodule update

及得主题 submodule 也要下载

too commented 4 years ago

或者看完整故事 https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/checking-out-pull-requests-locally

git submodule init
git submodule update

及得主题 submodule 也要下载

非常感谢如此详细的回复!关于远程协作的提示很有帮助,拿出了小本子记录了。

too commented 4 years ago

我本地测试也是看不到生效,MacOS 下使用 Chrome 看到是自动获取的 /favicon-32x32.png 文件。 还是等我去找一个线上自动生成无白底的工具来做这个事情?

too commented 4 years ago

我拿第 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
QuantumGhost commented 4 years ago

https://en.wikipedia.org/wiki/Favicon#HTML5_recommendation_for_icons_in_multiple_sizes

其实如果觉得麻烦可以不用配置多个的(或者只添加两种:retina 和 非 retina)

然后兼容性:

PNG Icon SVG Icon

分辨率支持:

https://realfavicongenerator.net/favicon_compatibility

如果用 SVG Icon 的话,其实直接就是矢量图,也就不用区分分辨率了

haobug commented 3 years ago

follow up at #51