favicon是什么?网址收藏小图标ico在线制作生成器

使用谷歌浏览器,进入陈沩亮博客,在浏览器标签、网址栏前面,会显示网站的小图标。

部分WordPress主题,拥有内置上传Favorites Icon(收藏夹图标)的功能。

什么是Favicon Ico?

网址前面的收藏小图标

就如其名称所暗示的,所谓的favicon,就是Favorites Icon(收藏夹图标)的缩写。

  • 它允许浏览器的收藏夹除了相应的标题外,还以图标来区分不同的网站。

当然,根据不同浏览器,Favicon的显示模式也有所不同:

  • 在大多数主流浏览器中,例如FireFox和Internet Explorer(5.5及以上版本)。
  • favicon不仅出现在收藏夹中,而且还出现在地址栏中。
  • 用户可以在桌面上,拖放图标以创建网站快捷方式;
  • 此外,标签式浏览器甚至还有很多扩展,例如FireFox甚至支持动画格式图标等……
  • favicon.ico图标是网站的缩略图,它可以显示在浏览器标签选项卡上,地址栏左侧和收藏夹中。

这是显示网站个性的缩略图标志。

  • 如果你想让网站看起来更专业,它可说是网站的头像。
  • 若想要让你的网站,变得更漂亮、更个性化,favicon.ico是必不可少的。

所以你可以在这个网站上使用ICO图标转换工具,轻松满足你的要求。

在我们用WordPress建设网站过程中,有必要创建一个符合网站主题的个性化标识,这与成功打造网站品牌有直接关系。

从某个角度来看,这仍然在网站做网络推广的范围之内。

要成功,它不仅包括良好的页面设计,令人印象深刻的网站标志,还包括图标:

  • 从具体的技术角度来看,favicon不仅为人们提供了更专业的外观和感觉,而且也在一定程度上减少了服务器的带宽消耗:
  • 一般来说,为了增加站点的可用性,我们会给自己的网站,创建一个网站的自定义404错误文件。
  • 在这种情况下,如果网站没有相应的favicon.ico文件,则Web服务器将调用此自定义404文件,并且记录在网站的录错误日志里,这显然应该避免。

Favicon.ico如何添加和使用?

在Web应用程序代码的head与/head之间,添加以下代码 ▼

<head>
...
<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="bookmark" href="/favicon.ico"/>
...
</head>

如何制作favicon.ico图标?

使用你熟悉的图形软件创建一个16 * 16像素、32 * 32像素、48 * 48像素的渲染,保存为.png或.gif或.jpg格式的图像。

第 1 步:进入favicon.ico图标在线生成制作的网站 ▼

点此访问 favicon.ico 图标在线制作生成器

第 2 步:浏览刚才保存的图像。

第 3  步:点击:“在线生成favicon.ico图标”。

第 4 步:按照提示进行操作,并将其上传到你网站的根目录。

如何制作透明的favicon.ico图标?

第 1 步:用PS制作透明的PNG图标。

第 2 步:打开在线生成favicon.ico图标工具 ▼

点此访问 favicon.ico 图标在线制作生成器

第 3 步:浏览新保存的图片 

第 4 步:点击:“在线生成favicon.ico图标”。

第 5 步:按照提示,将其上传到网站根目录。

如何更新Favicon.ico图标?

  1. 关闭所有打开的浏览器,并清除浏览器缓存。
  2. 打开一个网站,并添加收藏夹。
  3. 关闭所有浏览器,重新打开网站并进行更新。

如果此时favicon.ico图标尚未更新,请稍等片刻,然后再打开浏览尝试。

如果你使用Firefox或Chrome浏览器,更新更容易 ▼

  • 使用Firefox和Chrome的隐私模式浏览,就能更新favicon.ico图标的缓存。