本帖是参考了 sitepoiont 的这篇文章《Quick Tip: Add Favicons Quickly and Easily to Your HTML》,补充一些个人的一点意见。下面来看看如何利用 Real Favicon Generator 这个网站制作favicon。

上传图片

打开 Real Favicon Generator 进入网站之后,点击右边的上传按钮即可上传准备用来制作 favicon 的图片,该图片有以下要求:

  1. 可以是 PNG JPG SVG 等格式
  2. 至少是 70X70 像素
  3. 要想有最棒的效果,建议像素在 260X260以上

这里我用了一张神烦狗的照片。

生成 favicon

成功上传之后,页面跳转到生成 favicon 的界面,在这里可以自动生成 iOS、Android、Safari、Windows 等多种样式的favicon,具体还可以调整细节。

在 favicon 生成选项里还有一些选项,我建议修改一下路径,还有一个压缩图片的也很实用。

一切设置好之后,点击生成 favicon按钮,就大功告成了。

使用 favicon

生成 favicon 之后页面会跳转到使用向导。想在你的网站上使用,你可以这么做,以在 HTML5 页面中使用为例:

  1. 首先下载生成的 favicon 包
  2. 解压到你的网站目录下
  3. 将生成的代码插进网页 <head> 标签里

结论

利用 Real Favicon Generator 可以很方便的批量生成 favicon,适合我们在PC、手机、平板的多种浏览器中查看,是不是很方便快捷?

发表评论

电子邮件地址不会被公开。 必填项已用*标注