Obsidian 插件：Link Favicons 为笔记中的网页链接增加网站图标

概述

有时候我们的笔记中会记录、收藏一些网站链接，又或是援引一些文献参考链接。但是这些链接，往往不是以单纯的网址记录，而是以标题 + 链接的形式（[网页标题](网页链接)）。只看标题无法快速知道网页所属网站。

有了 Link Favicons 这个插件，你可以在不使用任何自定义 CSS 的情况下看到链接对应的网站图标（Favicons）。

效果&特性

使用

• 自动检测当前笔记中链接内容，获取网站图标。
• 支持针对两种格式链接的
  • 链接形式 1：[Obsidian](https://obsidian.md/)
  • 链接形式 2：https://obsidian.md/
• 支持对于特定链接不添加网站图标（Favicons）
  • 在链接形式中增加 |nofavicon 即可，如：[Display text|nofavicon](https://example.org)

样式

• 添加的网站图标，支持源码模式、实时阅览模式、支持阅读模式，在插件设置中找到 Show in Reading mode、Show in Source mode、Show in live preview 打开即可，默认均为打开。
• 支持将网站图标位置的修改，在插件设置 Icon Position 中可以选择：
  • Before the link（在链接前插入网站图标）
  • After the link （在链接后插入网站图标）

覆盖图标

您可以在设置中使用您选择的图标覆盖任何域名的网站图标。

（请参见下面的演示 gif）

为 URI 方案定义图标

您还可以为 mailto://、obsidian:// 或 calculator:// 等 URI 方案添加图标。

要做到这一点，请在设置中指定 URI 方案的名称（不包括 ://）。

（请参见下面的演示 gif 图）

禁用特定链接上的网站图标

如果您有一个链接，您不想看到网站图标，请在链接别名中添加 |nofavicon。

[显示文本|nofavicon](https://example.org)

颜色反转

默认情况下，对于被认为不可读的图标，会应用颜色滤镜以提高可读性。

有多个指标可以用来判断图标是否可读：

• is-dark，is-light：图标的颜色感知亮度是否为暗色/亮色。
• is-readable-a-a：根据 W3C AA规范。
• is-readable-a-a-a：根据 W3C AAA规范。

默认情况下，使用 AA 值。

不建议使用 is-dark，is-light 值，因为它们不考虑背景颜色。

这些值是从平均颜色计算得出的。

使用最主要的颜色会更准确，但目前尚未实现。

网站图标获取方式

以下是插件提供的网站图标获取方式的对比表格，你可以根据你实际情况进行调整。

兼容性

• 插件作者贴心的在插件设置中 Test Providers ，让你检测图标获取的有效性和速度。

高级自定义样式

如果想对网站图标（Favicons） 进行样式修改，则可以参考下面的 CSS 片段：

body .link-favicon[data-is-readable-a-a] {
	filter: grayscale(100%);
}

如果想禁用网站图标（Favicons）样式，则可以参考下面的 CSS 片段：

.external-link::after {
	display: none;
	content: '';
}

.external-link {
	background-image: none;
}

颜色反转

默认情况下，对于不易显示的图标，会应用颜色滤镜以提高可读性。

有多个指标可以用来判断图标是否可读：

• is-dark，is-light：图标的颜色感知亮度是否为暗色/亮色。
• is-readable-a-a：根据 W3C AA规范。
• is-readable-a-a-a：根据 W3C AAA规范。

默认情况下，使用 AA 值。

不建议使用 is-dark，is-light 值，因为它们不考虑背景颜色。

这些值是从平均颜色计算得出的。

使用最主要的颜色会更准确，但目前尚未实现。

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。