如何为网站创建图标:有用的提示和服务

  1. 如何创建一个favicon
  2. 如何在Photoshop中制作图标
  3. 如何保存图标
  4. 如何插入favicon网站
  5. 如何替换favicon
  6. 如何创建更复杂的favicon

当你第一次听到这个词时,很难猜出一个favicon是什么。 这是一个微型图标 ,显示在浏览器,地址行和其他区域的选项卡上,具体取决于您使用的操作系统和Internet浏览器。 它可以被安全地称为网站设计中最复杂和反复无常的元素之一。

创建一个好的图标非常困难,因为图标很小,应该清晰并显示与您的网站相关的内容。 创建与所有流行浏览器兼容的favicon也是一项艰巨的任务。 在本文中,我们将讨论其创建的所有复杂方面。 如果您还需要徽标,那么我们就有  一篇文章  怎么做
创建一个好的图标非常困难,因为图标很小,应该清晰并显示与您的网站相关的内容。 创建与所有流行浏览器兼容的favicon也是一项艰巨的任务。 在本文中,我们将讨论其创建的所有复杂方面。 如果您还需要徽标,那么我们就有 一篇文章 怎么做

如何创建一个favicon

让我们从favicon的设计开始。 良好的设计,尽管其紧凑,应该反映您的网站的本质,并成为企业形象的有机组成部分。 通常,图标是公司的图形符号(图标),而不是整个徽标(图标,文本和标语)。

作为图标,这些网站使用他们的图标(或接近他们的图像)。 作为图标,这些网站使用他们的图标(或接近他们的图像)。

不应使用favicon中的文本,因为由于图像尺寸较小,此文本将无法读取。 此规则的唯一例外是世界着名的文本字符,它们会自动与特定品牌相关联。 例如,在线资源维基百科在favicon上留下了大写字母“W”和Facebook - 字母“F”。

在这些favicons上,有些字母与特定品牌密切相关。  例如,Facebook使用其图形符号。  另请注意,迪士尼图像上可见像素。  这是因为截图是在Retina显示屏上拍摄的,它与16×16图标兼容,而网站则使用32×32图标。
在这些favicons上,有些字母与特定品牌密切相关。 例如,Facebook使用其图形符号。 另请注意,迪士尼图像上可见像素。 这是因为截图是在Retina显示屏上拍摄的,它与16×16图标兼容,而网站则使用32×32图标。

由于favicons是小图像,每个像素起着重要作用。 有时在减少徽标后,单个像素变得可见,因此图像变得“模糊”。 为了清晰起见,您需要在像素级别编辑图标。

为避免这种情况,您需要使用Photoshop或GIMP等特殊编辑器调整徽标大小。 首先,您需要将图像的大小减小到64x64像素(这是最大尺寸的图标)。 然后,您需要使用铅笔工具编辑每个像素,直到图像清晰。 这是一个艰苦的过程,但结果是值得的。 当favicon 64x64准备就绪时,您需要使用16×16,24×24和32×32像素的图像执行相同的工作。 您需要在所有浏览器和小工具中正确显示图像的大量尺寸:
为避免这种情况,您需要使用Photoshop或GIMP等特殊编辑器调整徽标大小。 首先,您需要将图像的大小减小到64x64像素(这是最大尺寸的图标)。 然后,您需要使用铅笔工具编辑每个像素,直到图像清晰。 这是一个艰苦的过程,但结果是值得的。 当favicon 64x64准备就绪时,您需要使用16×16,24×24和32×32像素的图像执行相同的工作。 您需要在所有浏览器和小工具中正确显示图像的大量尺寸:

  • 64x64 - Safari浏览器书签;
  • 32x32 - 高分辨率显示器(Retina);
  • 24x24 - 书签Internet Explorer和MicroSoft Edge;
  • 16x16 - 谷歌浏览器和其他浏览器。

如何在Photoshop中制作图标

首先,您需要创建一些具有上述尺寸的画布。

然后,您需要在画布上添加图标,字母或其他图像。
然后,您需要在画布上添加图标,字母或其他图像。

然后,您需要在画布上添加图标,字母或其他图像。

如何保存图标

创建了不同大小的图标后,将每个图标保存为透明的PNG文件(24位)。 在Photoshop中,您可以使用“文件”菜单中的“存储为Web”功能。 然后,您需要将所有PNG文件合并为一个ICO文件。 您可以同时使用PNG文件和ICO文件,但Safari和Chrome通常更喜欢ICO格式。 在我看来,创建一个ICO文件更容易。 ICO格式并不常见,但幸运的是,有许多工具可以帮助您将文件转换为此格式。 为此,我更喜欢使用 X-Icon编辑器 。 这是一个免费的在线服务,可以立即将下载的图像转换为一个ICO文件,然后您可以下载它。 这并不复杂,只需按照网站上的说明操作即可。 如果您认为自己是一个绝望的人,您可以尝试使用此服务的像素编辑器并自己绘制一个favicon。 (虽然我更喜欢在更专业的编辑器中编辑favicon,例如,在Photoshop中)。

通过将PNG图像上传到X-Icon Editor,您将在输出中获得一个ICO文件。
通过将PNG图像上传到X-Icon Editor,您将在输出中获得一个ICO文件。

如何插入favicon网站

所以,你已经有了一个ICO文件。 现在您需要将其添加到网站。 将文件重命名为favicon.ico并将其放在网站的根文件夹中(存储index.html文件和其他标准文件的位置)。 成功添加后,您可以在您的网站.com / favicon.ico上查看。 几乎所有浏览器都在根文件夹中查找favicon.ico文件。 因此,请务必在此文件夹中下载favicon。 为了与不同浏览器兼容,最好不要添加任何指示其位置的HTML元素或链接。 这个技巧适用于所有浏览器,最高可达IE6。 此外,如果您有一个WordPress网站,那么在许多主题中,您可以在主题设置中添加一个favicon。 也可以使用该方法。

如何替换favicon

出于某种莫名其妙的原因,浏览器将其添加到缓存中。 因此,当您上传新的ICO文件时,浏览器可能会继续显示您的旧图标。 在这种情况下该怎么办? 您可以添加一个临时HTML文件,指示新favicon的位置。 同样在URL的末尾,您需要添加一个简短的查询字符串:

<link rel =“快捷图标”href =“你的网站.com / favicon.ico?v = 2”/>

因此浏览器会认为这是一个唯一的URL,因此将被强制显示一个新图标。 更新favicon后,可以完全删除此HTML代码。 如果需要对favicon进行更改,请使用相同的技术,每次增加查询字符串中“v”后面的数字。 因此,浏览器每次都会将此URL视为唯一并显示其新版本。 并且不要忘记在成功更新后删除HTML代码。

如何创建更复杂的favicon

在本文中,我想描述一种创建可在几乎任何平台上运行的favicon的通用且简单的方法。 但在网页设计和开发方面,完美无限。 如果您想学习如何创建更复杂的图标,可以尝试使用该服务 favico.js 。 它允许您创建具有不同数字的动态图像。 由于此图标,即使相应的选项卡未处于活动状态,您也可以看到未读消息的数量。 如果要在线创建动画favicon,可以尝试使用favicon生成器 favicon.cc

您可以找到更多在线生成器 这里

如果您想分享关于创建favicon或提问的提示,我会在评论中等你!