做了一个 Favicon 生成器 PWA

[hzcer]

做了一个 Favicon 生成器 PWA ，生成网站所需的 favicon.ico, favicon.svg, apple-touch-icon.png 等多种格式的资产。网站功能类似 realfavicongenerator 。

网站地址: https://favicon.inbrowser.app/tools/favicon-generator

主要特点有以下几点：

• 纯前端 PWA ，没有后端，无需等待网络
• 支持 svg 等多种格式图片，浏览器支持的格式都支持，包括 av1 等先进格式
• 使用 oxipng 和 svgo 无损优化
• 使用最佳的 Favicon 实践，例如 maskable, svg favicon
• 实时预览，所见即所得

[cowcomic]

看着不错啊

[yafoo]

谢谢，收藏了

[xudashan]

点个赞

[subframe75361]

很棒👍已 Star

希望可以支持 icns ，electron 中需要使用。现有库只支持 nodejs ，比如 https://github.com/akabekobeko/npm-icon-gen

[totoro625]

提问：仅在 PWA "purpose": "maskable"设置界面可以放大图标，其他界面只能缩小图标
而 Desktop Browser & Google Result ，既不能缩小也不能放大
这是出于什么考虑的呢？

[Seanfuck]

正好用上了，已收藏

[hzcer]

@totoro625 其实 PWA "purpose": "maskable" 设置界面也不可以放大图标，只是 "purpose": "maskable" 的外面存在很大的 margin ，具体你可以看看 https://web.dev/articles/maskable-icon 。
Desktop Browser & Google Result ，你取消 Use the original image as is 就可以缩小。不过确实可以将 marigin 改成 scale 然后支持放大。谢谢建议。

[marcong95]

好东西，mark 一下，之后可能用得上~~

[bjfane]

页面风格不错，喜欢。

[Ma4cus]

好+活,做的比我之前用的国外网站好看

[hzcer]

@subframe75361 icns 格式看起来挺复杂的，试试看能不能将这个库移植到到浏览器环境

[jiannei]

感谢，效果不错，已 star ~
另外，我在做工具收集，希望能收纳进 https://sinan.fun/links

[dianso]

支持 emoji 吗

[ivershuo]

LZ 这个 https://inbrowser.app 的工具都很不错啊，网站风格也深得我心

[mokeyjay]

favicon 不是支持 ico 以外的格式了吗（例如 png ），现在使用 ico 还有什么优势？

[hzcer]

@mokeyjay 新时代 IE （说的就是 Safari ）不支持 svg 格式的 favicon （ svg 格式可以用来实现黑暗模式不同图标）。还有很多老系统还是需要 ico 格式的。参考链接： https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7

[hzcer]

@mokeyjay 从这个链接你可以看到浏览器选择 favicon 多么的拧巴，随随便便就有坑

[hzcer]

@dianso 有计划支持从不同的 icon set 包括 emoji 和 font awesome 之类的直接生成，但还没做

[hzcer]

@jiannei 可以收纳

[szmx]

不错不错，之前一直用标小智，下个产品换着看看

[ydong]

没有国际化差评

[lyxeno]

OP 的另外一个工具 tldr 好流畅😲

[pC0oc4EbCSsJUy4W]

不错

[chenzw2]

我也做过一个，哈哈
https://online.bqrdh.com/icon/marker

[tool2d]

大家都在做哈，我也做了一个，感觉 OP 比我做的好多了。

[june4]

似乎少了个 mac os 安装后的效果

[go233]

@chenzw2 你的网站有个问题，怎么选什么格式都是生成 ico 的文件？