大家好，我是哥飞。
今天下午的哥飞小课堂又是很精彩的一课，可惜仅限社群成员可见，不过今晚这篇文章给大家分享一个 Favicon 生成工具，教大家怎么做一个好用的小工具。
工具域名是 realfavicongenerator.net ，注册于 2013年9月，目前月访问21万。
网站的主要流量来源是自然搜索，占比58%，还有31%来自于直接打开，这两个加起来就是89%了。另外，外链和社交媒体加起来也带来了10%的访问量。这说明有很多人自发的推荐这个小工具，证明这个小工具真的做得很好用。
在今天发现这个小工具之前，哥飞经常用的是另一个小工具 favicon.io 。
favicon.io 的流量更大，每个月有58万访问量。
这两个工具，都支持上传一张图片，生成各种尺寸和类型所需的 Favicon 图标功能。
注意，不是帮你从零生成一个图标，而是你已经有一个图标之后，帮你做进一步处理。
从交互和易用性来说，哥飞其实更推荐 realfavicongenerator.net ，所以今天这篇文章，就来分析一下这个网站。
realfavicongenerator.net 首页截图如下所示，很朴素，但也很实在，把大家做图标时可能会遇到的困难都描述出来了，并且告诉大家要怎么做才能更好的做好一个 Favicon 图标。
你上传一个图标之后，页面里就会给你模拟显示你的图标在各种场景下的显示效果。可以让你知道，你的图标设计是否合理。
你还可以自己调整图标的背景颜色，还可以输入App名称或者网站名称来看预览效果。
你还可以设置你的图片放置的路径位置，之后点击下一步，就会帮你生成各种尺寸和格式的图标。
点击 Download 按钮，可以下载生成好的图标，如下图所示，有 ico 文件，svg文件，也有各种尺寸的 png 图标，甚至还有 site.webmanifest 文件。
你还可以根据你的项目实际使用的代码框架来切换，如选择 next.js ，就会告诉你在 next.js 里怎么使用这些图标，代码和命令都告诉你了。
从上面的使用步骤就可以看出来，这个工具真的做到了一站式服务，大家使用过程中可能有需要用到的，他都贴心的想到了。
这个网站也做了其它一些好用的小工具，如下面这个是帮助你检测任意网站的 Favicon 图标是否设置正确了。
如下面是我把这个工具网站自己的网址放进去之后的检测结果，可以看到很详细的检测了各种设置，并且也给了预览效果，真的是太贴心了。
这个站，如果再把图标从零生成也做了，就圆满了，估计会有更多人使用。
好了，以上就是今天的文章。
没有评论:
发表评论