创建Favicon

A类蚕豆(“收藏夹图标”的缩写)是与特定网站或网页关联的图标。它通常用于为网页添加书签。Web浏览器在URL栏、选项卡和其他地方使用它们来帮助直观地识别网站。Favicons也用作移动设备上的应用程序图标。

favicon通常是一个16 x 16像素的图形正方形,并保存为图标文件在服务器的根目录中。您可以对web服务器上允许访问根目录的任何WordPress站点使用favicon。

WordPress 4.3版或更高版本

WordPress(文字出版社)版本4.3实现了一个站点图标功能,可以在您的网站上启用favicons。

使用站点图标功能时,无需准备图标文件或修改模板文件。您只需导航到Customize屏幕并指定一个高度和宽度至少为512像素的方形图像。

本文后面的段落包含手动设置您自己的favicon的说明。然而,强烈建议您使用站点图标功能(WordPress内置的功能)。

按照以下步骤使用网站图标为您的网站设置收藏夹图标。

  1. 准备图像文件。(它必须是正方形,高度和宽度至少为512像素。)
  2. 引导到管理屏幕>外观>自定义
  3. 点击站点标识
  4. 点击选择图像(位于网站图标副标题)。
  5. 单击上传文件选项卡,然后单击选择文件上传您在上一步中准备的图像文件。
自定义站点图标

创建Favicon

可以使用任何允许保存.ico图标文件夹。还有一些在线服务可以让你免费创建favicon。

图像应清晰且具有视觉吸引力。理想情况下,它的设计应该与网站的品牌形象和/或内容相匹配。

准备要另存为的图像图标文件以下为:

  1. 通过裁剪或在图像周围添加空间,使图像成为正方形。
  2. 将图像大小调整为16 x 16像素。
  3. 将文件另存为图标文件.

如果您使用在线服务创建您的favicon(例如Faviconer.com网站动态驱动器)按照网站提供的说明进行操作,然后将favicon.ico图像下载到您的计算机上。

在WordPress中安装Favicon

如果您的主题或WordPress版本不支持上述站点图标选项,您可以使用此方法手动添加Favicon。

如果已经有一个旧的图标文件文件,使用FTP客户端.

  1. 使用FTP客户端上载新的图标文件文件到当前主题的主文件夹中。
  2. 上传另一份图标文件文件到站点的主目录(例如。http://example.com/favicon.ico). 这将在订阅者的feed阅读器中显示favicon。

为了让您的favicon在一些旧浏览器中显示,您需要编辑页眉。(请记住,编辑主题文件的最佳方法是通过子主题。当您按照以下说明进行操作时强烈推荐创建并修改位于子主题中的header.php副本。)

  1. 转到WordPress管理屏幕.
  2. 单击外观.
  3. 单击主题编辑器.
  4. 选择名为的文件标题页眉编辑文件。
  5. 搜索以开头的代码行<link rel=“快捷方式图标”以结尾/favicon.ico“/>。覆盖它(如果存在),或在HTML标记下面添加以下代码:
<link rel=“shortcut icon”href=“<?php echo get_stylesheet_directory_uri();?>/favicon.ico”/>

保存更改。

如何创建具有透明背景的favicon

在实现此方法之前,请确保源图像已经具有透明背景,这意味着它应该是GIF或PNG。其余步骤如上所述。代码中的一个区别是,使用favicon.png或favicon.gif代替favicon.ico文件。

搜索以开头的代码行<link rel=“快捷方式图标”以结尾/favicon.ico“/>。覆盖它(如果存在),或在HTML标记下面添加以下代码:

<link rel=“shortcut icon”href=“<?php echo get_stylesheet_directory_uri();?>/favicon.png”/>

为了看到你的新宠儿,清除浏览器的缓存。您可能需要重新启动浏览器才能看到新的favicon。

使用.ico而不是.png或.gif的优点

  1. 兼容性–在撰写本文时,最现代的浏览器–除了iOS Safari和Opera Mini之外–支持.ico格式。
  2. 避免404服务器错误–几乎所有现代浏览器都会请求favicon.ico,因此最好始终使用favicon.ico文件,以避免出现“404 not found”错误。
  3. 一个.ico文件可以包含多个图标,因此无需包含16×16和48×48图标的多个文件。

这篇文章有用吗?如何改进?

首次发布

上次更新时间