网站图标:你需要知道的关于它们的一切

Favicons: Everything You Need to Know About Them

当您开始阅读本文时,您的浏览器中打开了多少个标签页?

让我们对此进行快速调查!

网民一般有两种,你要分清自己是哪一种!


您更喜欢打开 3-4 个浏览器窗口吗?

您是否对同时打开多个文件感到宾至如归?


我们猜你现在已经准备好答案了!


所以,如果你是第一种,那么恭喜你,你离多窗口领域又近了一步!


如果您是第二种,我们确信至少在潜意识层面,您依靠标签顶部的一个小徽标来确定您正在打开哪个页面。


你去吧,Favicon 来拯救你了!


那么,它们到底是什么?


当您打开网络浏览器时,通常会在主页上看到您最喜欢的网站。名称与图标一起显示,该图标是无需名称即可表明其身份的显着因素!我的朋友们,那些是网站图标.

让我们更进一步。想象一下,您在浏览器中打开了多个选项卡,如下图所示。你怎么知道哪个页面是哪个页面?

如果你看不懂名字,你肯定能看到名字旁边的小图标!这些是网站图标!

与特定网站关联的图标,通常显示在访问该网站的浏览器的地址栏中或用户书签列表中的网站名称旁边。这个词有一个非常独特的环,这是因为它是两个词的组合。 “最爱”和“图标”。

那么这一切是从哪里开始的呢?

早在 1999 年,Netscape Navigator 和 Microsoft Internet Explorer 这两个最大的浏览器就争夺虚拟市场的控制权。微软 Internet Explorer 准备发布 Internet Explorer 5,这将把 Netscape Navigator 的市场份额吹出窗外。为了突破界限并获得对竞争对手的显着优势,两个组织都将在后端进行实验,这导致了 Favicons 的诞生!

 微软的功能,用户可以将网站添加到他们最喜欢的列表中,缺乏简单的导航。 Microsoft 的开发人员 Bharat Shyam 添加了 16 x 16 像素的图标,可以帮助用户将一个网站与另一个网站区分开来。  

Shyam 开发了一个 favicon.ico 文件,该文件可以直接放在 其 Web 服务器的根目录中。 Internet Explorer 会知道在将站点添加到用户的收藏列表之前在那里查找可能的图标。

 他选择 .ico 格式是因为 Windows 操作系统广泛使用的标准 Windows 图标格式。

 结果?

 巨大的成功!

起初,它仅用作收藏夹列表中的导航辅助工具,但很快它就流行起来并被用作网站本身的图形表示。此外,它还用于通过挖掘 favicon.ico 文件的服务器日志来准确计算将网站添加为书签的人数。

说了这么多,为什么它们如此重要?

  • 首先,它可以轻松识别您正在查看的网页。 Neil Patel 在他的文章中,您在网站设计中做错的 32 件事 提到网站图标是“视觉提示用户需要定位自己以找到什么他们正在寻找。”
  • 当用户开始将您的网站图标与您的网站相关联时,它有助于召回。以 Gmail 为例,如下所示。仅仅看到信封图标就足以让用户了解页面名称

  • 最后,它对 SEO 有好处。虽然不直接负责,但他们通过以下方式间接负责:
  • 用户友好的网站导致使用量增加:
    • 在您的浏览器选项卡、书签、历史档案等上显示网站图标可以使网站用户友好。它可以节省时间并允许毫无困难地浏览。这增加了用户交互的可能性。
  • 书签:
    • 带有网站图标的网站比没有网站图标的网站具有一定的优势。 它们脱颖而出,处于更好的被重新审视的位置。此外,Chrome 浏览器会为已添加书签的网站收集数据,如果没有,则会增加错过谷歌数据的机会。
  • 品牌和知名度:
    • SEO 是关于品牌和营销的。知名度越高,品牌召回的机会就越高。  

您可以通过 SEOBook!Favicon SEO 查看​​有关网站图标和 SEO 的所有信息>


那么如何制作网站图标呢?

嗯,有几种方法可以解决这个问题。你可以:

查看下面的一些网站图标生成器:

  • Favicon.cc
  • 动态驱动
  • 图片中的网站图标
  • 网站图标生成器
  • 破坏网站图标
  • 反网站图标
  • Gen Favicon
  • 法维根
  •  

    指南:

    在设计网站图标时牢记一些指导原则,一切顺利!

    • 用户只有在加入书签或访问您的网页后才能查看您的网站图标。因此,将您的品牌作为您品牌的代表,而不是销售的手段
    • 文字不能很好地缩放,所以要设计没有文字。
    • 如果您的徽标有文字,请确保您设计一个没有文字的徽标以用作网站图标
    • 为确保它在不同的上下文中看起来不错,请设计两个模板:
      • 透明背景上的徽标
      • 实心填充徽标
    • 以前首选的文件格式是 .ico,但现在也接受 JPEG 和 PNG。如果您想要一种简单的方法来设计和导出所有网站图标大小,请查看应用像素中的网站图标模板
    • 您使用它的每个网站都有不同的维度。标准尺寸是 16x16 像素,但更大尺寸(例如 32x32 像素)也并非闻所未闻。
    • 一刀切的策略是行不通的,因为浏览器会根据使用的尺寸有不同的尺寸要求。

    您可以在 Greg Gant 的“2020 年几乎所有人和所有浏览器的 FavIcons 指南” 中查看其他指南。

    结论:

    重要的是要记住,网络世界都是关于回忆的。网站图标只是让您的品牌走上成功之路的另一个齿轮!世界上大多数人已经将它们纳入他们的网站战略

    你什么时候上 favicon 火车? 

    参考书目:

    (本博客参考了以下文章)

    https://thehistoryoftheweb.com/how-we-got-the-favicon/

    https://www.seoptimer.com/blog/what-is-a-favicon/

    https://www.creativebloq.com/illustrator/create-perfect-favicon-12112760

    https://www.clickfusion.co.uk/what-is-a-favicon-and-why-are-they-necessary-in-2019/

    http://www.seobook.com/favicon-seo

    https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/

    https://medium.com/visualmodo/favicons-seo-benefits-ce21f1e91d19

    https://medium.com/@coreyhodgedotnet/a-favicon-is-that-tiny-icon-on-a-browser-tab-here-are-the-basics -to-make-one-5e9d895f3df0

    https://medium.com/cucumbertown-magazine/what-s-the-big-deal-about-favicons-why-are-they-important-2353936d47ea

    https://medium.com/@whosale/a-quick-history-of-favicon-41e51e146184