什么是Favicon?定义,例子和设计技巧
本文是关于乐鱼游戏app下载小型企业网站.
Favicons,意思是“最喜欢的图标”,是显示在浏览器选项卡、搜索结果、历史档案和书签列表中的url旁边的小图形。Favicons通常是缩小尺寸的logo,虽然很小,但它们提高了品牌知名度,改善了用户体验。继续阅读,了解更多关于favicons是什么,它们在哪里使用,例子,大小建议,以及如何为您的品牌免费制作一个。
Favicons的目的和示例使用
favicon的目的是帮助你快速识别一个网站,特别是当你有多个选项卡打开或需要在列表中发现一个特定品牌的URL。favicon是“最喜欢的图标”的缩写,它的意思是网站或网站图标、URL图标和书签图标的同义词。把favicons想象成应用程序图标——视觉上可识别的正方形图形,帮助你更快地找到你想要的内容。
除了放置在浏览器上,favicons也被用在许多其他地方。例如,你会看到它们在你的书签栏的左边,以及你保存的书签网站列表,以供以后再次访问。当你进入一个谷歌搜索页面时,经常会在你最近访问过的网站的搜索栏下面看到它们。
你可以在以下替代位置找到favicons的例子:
图标示例使用1:自动完成搜索建议
有时,当你在搜索栏中搜索某些东西或开始输入一个网站的URL时,你会得到自动填充的推荐,其中包括网站的图标。这有助于你选择你想要的品牌或公司,因为你可能会更快地认出一个熟悉的标志或配色方案,而不是公司的名称。
示例2:搜索结果列表
在某些情况下,你也会在搜索结果中看到favicons。例如,如果您访问谷歌News,它们将显示在搜索结果中,以便读者可以快速、轻松地识别结果来自哪个新闻来源。
示例3:浏览器历史列表
浏览器历史记录是你看到favicons的另一个地方,它可以让你很容易地从一长串访问过的网站列表中找到你最近访问过的一个网站。你应该能够快速识别一个网站或文章,你想重新访问只是通过这个小品牌的形象。
示例4:移动搜索结果
尽管上面的favicon例子都来自桌面,但它们也大量出现在移动设备上。看看你是否能从下面的移动设备搜索中找到favicons(提示:它们就在网站的URL旁边)。
Favicon设计最佳实践
当创建你的乐鱼游戏app下载小型企业网站,设计一个自定义favicon。在为你的企业创建一个图标时,并没有什么严格的规则,但它在理想情况下有助于提高品牌知名度。并不是所有的企业都使用徽标,也不是所有的徽标都适合用作浏览器选项卡的图标。
下面是一些favicon的例子和小贴士,教你如何制作自己的favicon:
- 业务标识:可以说,最常见的favicon是公司logo的缩小版。
- 你的标志的一部分:如果你的logo太大了,或者用小一点的尺寸看起来不太好,试着使用logo中容易识别的部分作为徽标。
- 类似于你的logo:用你的品牌的主颜色和字体制作一个简单的方形,用你的企业的首字母缩写,或者用代表你的企业或行业的图标制作一个圆形,比如用一把剪刀代表沙龙或理发店,用一把刀叉代表餐馆。
为你的网站创建一个优秀的favicon——即使是在受到上面favicon例子的启发之后——也是具有挑战性的。如果你想把它留给专业人士,那就试试Fiverr在那里,你可以找到专业的平面设计师,他们只需要5美元就可以完成这项工作。
最好的图标大小
favicon的大小是多少?没有唯一的答案。Favicon的大小范围从16×16像素(px)到512×512像素。许多乐鱼游戏app下载小型企业网站建设者它们都有自己的具体建议,因此值得遵循您用于构建站点的内容管理系统的建议。一般来说,它应该是方形的,并为在线使用进行了优化,这样当有人访问您的网站时,它不会减慢页面加载时间。
提供者 |
推荐图标大小 |
---|---|
谷歌 |
48x48px的倍数(例如,48x48px, 96x96px等) |
Squarespace |
100年x100px 300 x300px |
GoDaddy |
180 x180px或更少 |
IONOS |
16x16px的倍数(例如,16x16px, 32x32px, 48x48px等) |
Shopify |
16 x16px或32 x32px |
拥有/平方 |
64 x64px或更少 |
款 |
48x48px的倍数(例如,48x48px, 96x96px等) |
WordPress |
512年x512px |
基于像素的图像不能很好地放大,放大后会变得模糊,但如果它们以较高的分辨率开始,大多数图像可以很好地缩小。从CMS支持的最大分辨率开始总是最好的,因为favicons会自动缩小以适应所需的尺寸。换句话说,如果你提交一个512×512-pixel favicon大小的图像,它将自动缩小以适应16×16-pixel favicon图像区域。
最佳Favicon格式:ICO vs PNG vs SVG
微软在1999年首次推出ICO (. ICO)扩展时引入了favicons这个概念。其他浏览器很快就采用了这种文件格式和favicons的用法。不过,最近最流行的浏览器开始接受PNG和SVG图像文件作为favicons。那么,什么是最好的favicon格式:ICO、PNG还是SVG?
- ICO的好处:所有的浏览器都支持ICO,它提供向后兼容性,所以如果有人仍然使用Internet Explorer 5 (IE 5),例如,他们仍然可以看到你的favicon。
- PNG的好处:它体积小,与所有浏览器兼容(除了一些旧版本的IE)。PNG提供了一个没有像素边缘的高质量图像。
- SVG的好处:SVG是一种可伸缩的格式,这意味着您可以在不影响图像质量的情况下提升或缩小图像的大小——这与PNG不同。大多数浏览器都支持SVG。
除了了解favicon是什么以及如何使用它之外,要确保您的favicon格式能够正确显示,请考虑网页浏览器市场份额.根据W3Counter的数据:超过67%的用户使用Chrome, 16.2%使用Safari, 5.5%使用ie和Edge, 3.2%使用Firefox,而不到2%使用Opera。
如果大多数用户使用Chrome和Safari浏览器,PNG文件类型和512×512-pixel favicon图像大小就可以了。因为PNG是高质量的,所有浏览器和应用程序都支持,只有在升级时才会出现质量损失,它是您favicon最安全的选择。
收藏夹图标设计技巧
Favicon设计类似于《金发女孩和三只熊》的故事,你需要寻找颜色和可识别图形的恰当组合。这里有一些favicon设计技巧,为你的网站创造最佳形象:
- 保持简洁——如果你避免了繁琐复杂的设计,你的favicon会更加突出。
- 缩小你的logo,或者使用你的logo的一个可识别的部分,一个缩略词,甚至一个字母,如果你的整个logo不适合,或者太详细了,它看起来不合适。
- 使用你品牌的颜色,包括对比色,使你的favicon在视觉上流行起来。
- 不要太过分——最好的favicons都是清晰且容易识别的。
- 使用透明的背景,使您的favicon在任何浏览器选项卡上都显得独立。
如何获得网站图标
如果你没有一个企业标志,或者它不能很好地缩放图标的大小,你有更多的选择。例如,你可以通过购买网页大小的图标,或雇佣专业人士为你的企业创建一个令人难忘的、有品牌的图标,使用图形设计软件来设计你的图标。
这里有一些为你的小企业网站获得favicon的最佳方法:乐鱼游戏app下载
- Fiverr:找专业的自由平面设计师,在Fiverr网站上创建一个低至5美元的自定义图标(或标识)。
- Envato:购买图标和其他图形为您的业务创建favicon。它可以通过订阅获得Envato元素为那些想要一个长期的,低成本的资源网站和营销图形,或通过Envato市场一次性购买。
- 帆布:使用Canva的免费在线图形设计软件,包括免费和付费图像,您可以编辑和调整favicons和logo的大小。
- Squarespace商标制造商:即使你没有使用Squarespace建立网站,你也可以使用免费的logo生成器创建一个自定义的favicon来代表你的品牌。
想要更多选择吗?看看这13个网站,你可以在那里寻找资源免费的专业形象这是高质量和可编辑的favicons,徽标,和更多。
Favicons如何帮助用户体验和品牌知名度
那么,favicon是干什么用的呢?除了了解favicon是什么之外,了解它能做什么(和不能做什么)也很重要。例如,添加一个到你的网站不会直接影响搜索引擎优化(SEO)。然而,它仍然可以通过用户体验(UX)和品牌知名度间接地有利于您的SEO。
当人们反复看到你的品牌时,他们更有可能记住你的业务,并将其与他们在你公司的经历联系起来。反过来,他们会把你的品牌放在脑海中,更有可能再次访问你的网站或从你的企业购买。
搜索引擎青睐那些提供高质量用户体验的网站,因此这些网站排名更高。为此,搜索引擎在很大程度上依赖于衡量用户体验的指标;例如,他们是新访问者还是重复访问者?他们在你的网站上花了多少时间?他们是否浏览多个页面?他们是否采取了诸如购买、提交网页表单或下载内容之类的行动?
favicon帮助用户在浏览器选项卡、历史文件和书签中轻松识别特定网站。所以,这一点用户体验可能会影响你的排名。此外,当你的favicon导致人们访问你的网站而不是你的竞争对手,你将获得回头客和增加流量,将帮助你在谷歌和其他搜索引擎排名更高。
如果你没有Favicon会发生什么
如果你没有图标,一个通用的灰色全局占位符或空白图标将显示在你的URL(下图中的第四个选项卡)。如果你使用的是内容管理系统(CMS),而没有上传favicon,你可能会看到内容管理系统的logo(例如,WordPress,就像图片中的第三个选项卡)。不幸的是,与favicon相比,这并不能提供最佳的用户体验或提高企业的品牌知名度。
常见问题(FAQs)
我如何创建一个favicon免费?
如果你没有平面设计软件,你可以使用在线平面设计应用程序免费创建一个favicon帆布.一些网站建设者有标志创造者,所以你可以同时设计你的标志和favicon,这应该不会花费你额外的任何东西。对此,我们强烈推荐Squarespace的免费商标制造商。
我知道favicon是什么,但有必要吗?
虽然favicon不是绝对必要的,但它是网站基础知识包括在我们的检查清单中。这是一个小的,简单的,通常免费的方法来帮助品牌和改善用户体验。favicon使用户更容易在书签、历史档案和浏览器选项卡列表中识别和查找站点。从自由职业者那里获得一个专业制作的,难忘的,高质量的自定义favicon图像,只需5美元Fiverr.
我应该把图标放在哪里?
一个favicon会出现在浏览器标签的左上角,但要想让它出现在那里,你必须使用CMS在正确的位置上传你的图片。通常情况下,你不需要编辑任何代码,大多数网站建设者也是如此WordPress页面建筑商让您添加您的favicon在网站设置菜单与一个简单的上传。
底线
favicon是出现在网页浏览器、浏览历史、书签栏以及桌面和移动设备上的搜索结果中的一个小图像。大多数企业使用较小版本的标识作为徽标,以提高品牌知名度和可见度。我们强烈建议在你的网站上添加一个图标,作为一种免费的方式来改善用户体验,从而,SEO。
在创建您的logo或favicon上获得帮助Fiverr-在这个平台上,你可以以低至5美元的价格找到专业的平面设计师来帮助你。
你可能还会喜欢……
- 你知道创造品牌知名度需要五到七次印象吗?在我们的列表中了解更多品牌的统计数据.
- 使用WordPress ?这里有30个WordPress提示和技巧帮助您从您的网站中获得最大的收益。
- 一体化网站建设者喜欢Squarespace,款,GoDaddy它们都有图形设计工具,你可以免费使用来创建favicon。了解更多有关最好的网站建设者为小型企业乐鱼游戏app下载在这个指南。