获取网站 favicon 图标的方法大汇总
前言
网站的 favicon(网站图标)不仅仅是网站的标识,更是用户在浏览器标签页和收藏夹中的视觉代表。然而,在工作中,有时候我们会需要用到一些网站图标,(比如,我在博客新建了一个生产力页面用于收藏我常用的网站,这时需要 favicon 图标增加辨识度)。但是浏览器上并没有提供直接下载网站图标的方法,想要下载必须使用一些技巧。
在本文中,我们将介绍几种简单而有效的方法,轻松下载网站的 favicon 图标。
通过 favicon 地址获取 ico 图标
一般情况下,这种 ico
图标的文件名叫favicon.ico
,放置在网站的根目录。如果我们想要快速的获取这个网站的图标,可以打开网站后,在网站主域名
的后面输入 /favicon.ico
(记得要有斜杠/哦),按回车就会出现这个图标。
比如 Google 的网站图标就是:
https://www.google.com/favicon.ico
然而,并非所有网站都遵循这种命名和放置 favicon 的方式。有些网站可能使用不同的文件名、文件类型或位置来存储其 favicon。在这种情况下,简单地在网站域名后加上 /favicon.ico
往往无法获取到图标。
查看网页源代码解决
打开网页源代码
在你想要获取 favicon 的网站上右键点击页面的任意位置,然后选择“查看页面源代码”或按 F12
打开“开发人员工具”。这会打开一个包含网页源代码的新窗口或标签页。
搜索favicon标签
在源代码“元素”里找到 <head>
标签并展开,搜索<link>
标签,这是用于指定favicon的常见标签之一。通常,favicon的链接会以rel="icon"
或rel="shortcut icon"
属性开始。例如:
<link rel="icon" type="image/x-icon" href="favicon.ico" />
或者:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
复制并打开favicon的URL
一旦找到favicon的<link>
标签,复制href
属性中的URL地址。这个URL地址指向了favicon的位置。例如,它可能是一个相对路径或绝对路径,如href="/favicon.ico"
或href="https://example.com/favicon.ico"
。
将复制的favicon URL地址粘贴到浏览器的地址栏中,然后按下回车键。这样就会直接打开favicon图标文件。如果网站使用的是ICO格式的favicon,浏览器可能会直接显示该图标;如果是其他格式,可能会下载一个图片文件。
通过浏览器插件抓取
Chrome应用商店中的 Get Favicon
插件可以一键获取网站的超清图标。
【点击安装插件】
以https://www.google.com/intl/en_uk/chrome/
为例,点击插件图标,即可出现网站图标,可以右键进行另存为到本地,也可以复制链接到需要应用的地方。
这个插件基本在我测试的网站中都能抓到站点图标。
推荐指数:⭐⭐⭐⭐⭐
通过工具网站抓取
如果你遇到了不能直接访问下载的网站,或者想要更简单的下载方法,那么一些 favicon下载的网站是非常好的选择,这样的网站有很多,下面列举一些好用的网站。
ToolB
点击进入:【网站图标Favicon获取 - ToolB】
以我的小博客网站为例,轻轻松松获取到了图标
轻略应用
点击进入:【网页图标(favicon.ico)在线抓取 - 轻略应用】
OnlineminiTools
点击进入:【Website favicon downloader】
站长工具网
点击进入:【favicon图标获取工具 - 站长工具网】
The Favicon Finder
点击进入:【The Favicon Finder】
getfavicon
点击进入:【Get free favicon - download get favicon from site free】
使用 API 获取网站 favicon
为了克服获取 favicon 的麻烦,应运而生了一些获取 favicon 的公共API,给其他的开发者或者特殊用途使用,可以更快捷的获取到网站图标。
Google 的 API
使用 Google 的 API,你只要把搜索的网址替换如下「域名」的位置。,就可以获取到对应的网站图标了,图片格式为 PNG,大小 16*16
像素。
https://www.google.com/s2/favicons?domain=域名
比如,要查Google官网的 favicon ,可以这样写:
https://www.google.com/s2/favicons?domain=google.com
The Favicon Finder 的 API
https://besticon-demo.herokuapp.com/icon?url=google.com&size=80..120..200
The Favicon Finder 的 API 和它的网站一样,提供了很多专业级的参数选项,你可以在它的Github文档上查看到具体的用法。
Favicon获取
点击进入:【Favicon.ico图标获取Api接口】
Tips:网址前面的http(s)://必须加。
酷猫网络
点击进入:【酷猫网络】
Favicon.ico远程获取API
点击进入:【Favicon.ico远程获取API - 网站icon图标在线获取API】
http://icon.hhpp.net/get.php?url=域名
getFavicon
使用PHP自己创建API获取网站的Favicon图标并显示在你的网页上。
GitHub地址:【owen0o0/getFavicon】
- 感谢你赐予我前进的力量