V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
hzcer
V2EX  ›  分享创造

做了一个 Favicon 生成器 PWA

  •  3
     
  •   hzcer · 132 天前 · 2046 次点击
    这是一个创建于 132 天前的主题,其中的信息可能已经有所发展或是发生改变。

    做了一个 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
    • 实时预览,所见即所得
    26 条回复    2023-12-08 20:57:41 +08:00
    cowcomic
        1
    cowcomic  
       132 天前
    看着不错啊
    yafoo
        2
    yafoo  
       132 天前 via Android
    谢谢,收藏了
    xudashan
        3
    xudashan  
       132 天前
    点个赞
    subframe75361
        4
    subframe75361  
       132 天前
    很棒👍已 Star

    希望可以支持 icns ,electron 中需要使用。现有库只支持 nodejs ,比如 https://github.com/akabekobeko/npm-icon-gen
    totoro625
        5
    totoro625  
       132 天前
    提问:仅在 PWA "purpose": "maskable"设置界面可以放大图标,其他界面只能缩小图标
    而 Desktop Browser & Google Result ,既不能缩小也不能放大
    这是出于什么考虑的呢?
    Seanfuck
        6
    Seanfuck  
       132 天前
    正好用上了,已收藏
    hzcer
        7
    hzcer  
    OP
       132 天前
    @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
        8
    marcong95  
       132 天前
    好东西,mark 一下,之后可能用得上~~
    bjfane
        9
    bjfane  
       132 天前
    页面风格不错,喜欢。
    Ma4cus
        10
    Ma4cus  
       132 天前
    好+活,做的比我之前用的国外网站好看
    hzcer
        11
    hzcer  
    OP
       132 天前   ❤️ 1
    @subframe75361 icns 格式看起来挺复杂的,试试看能不能将这个库移植到到浏览器环境
    jiannei
        12
    jiannei  
       131 天前
    感谢,效果不错,已 star ~
    另外,我在做工具收集,希望能收纳进 https://sinan.fun/links
    dianso
        13
    dianso  
       131 天前
    支持 emoji 吗
    ivershuo
        14
    ivershuo  
       131 天前
    LZ 这个 https://inbrowser.app 的工具都很不错啊,网站风格也深得我心
    mokeyjay
        15
    mokeyjay  
       131 天前
    favicon 不是支持 ico 以外的格式了吗(例如 png ),现在使用 ico 还有什么优势?
    hzcer
        16
    hzcer  
    OP
       131 天前   ❤️ 1
    @mokeyjay 新时代 IE (说的就是 Safari )不支持 svg 格式的 favicon ( svg 格式可以用来实现黑暗模式不同图标)。还有很多老系统还是需要 ico 格式的。参考链接: https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7
    hzcer
        17
    hzcer  
    OP
       131 天前
    @mokeyjay 从这个链接你可以看到浏览器选择 favicon 多么的拧巴,随随便便就有坑
    hzcer
        18
    hzcer  
    OP
       131 天前
    @dianso 有计划支持从不同的 icon set 包括 emoji 和 font awesome 之类的直接生成,但还没做
    hzcer
        19
    hzcer  
    OP
       131 天前 via iPhone   ❤️ 1
    @jiannei 可以收纳
    szmx
        20
    szmx  
       131 天前
    不错不错,之前一直用标小智,下个产品换着看看
    ydong
        21
    ydong  
       131 天前
    没有国际化差评
    lyxeno
        22
    lyxeno  
       131 天前
    OP 的另外一个工具 tldr 好流畅😲
    fatelight
        23
    fatelight  
       131 天前
    不错
    chenzw2
        24
    chenzw2  
       131 天前
    我也做过一个,哈哈
    https://online.bqrdh.com/icon/marker
    tool2d
        25
    tool2d  
       131 天前
    大家都在做哈,我也做了一个,感觉 OP 比我做的好多了。
    june4
        26
    june4  
       130 天前
    似乎少了个 mac os 安装后的效果
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5903 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 02:35 · PVG 10:35 · LAX 19:35 · JFK 22:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.