显示网址的 favicon

今天我想讲一下对于我做的哪啊哪啊启动页【补充 Github 链接】，我是如何显示 favicon 的。

一、Chrome 自带的 favicon service

首先，我的需求是：对于每个书签，我想要展示它们各自的 favicon，因为我觉得图片的辨识度要比文字强许多。

一开始我是在 Chrome 浏览器下做测试的，在这篇文档里，我发现原来 Chrome extension 是可以直接拿到一个网站的 favicon 的，方法是：首先在 manifest.json 里添加 favicon 这个 permission，然后【...】

manifest.json

  "permissions": ["favicon"]

utils.js

/**
 * @param {string} url The page URL
 */
export function faviconURL(url) {
  const u = new URL(chrome.runtime.getURL("/_favicon/"));
  u.searchParams.set("pageUrl", url);
  u.searchParams.set("size", "48");
  return u.toString();
}

但是我很快意识到这在其他浏览器里肯定是行不通的，我试了下 Firefox，果然不行。所以我需要找一个更通用的 favicon service。

二、谷歌

/**
 * @param {string} url The page URL
 * @param {number} size The size of favicon image. Default is 48.
 */
export function faviconURL(url, size = 48) {
  const u = new URL(url);
  return `https://www.google.com/s2/favicons?domain=${u.hostname}&sz=${size}`;
}

这个方案存在的问题是：favicon service 因为是谷歌的，所以没有翻墙就用不了。

三、unavator

接着我们来看看 unavator ，这是一个开源的头像获取服务，但我们也可以用它来拿网站的 favicon。

它的问题是没法调整尺寸，默认返回 400x400px，所以需要一个额外的 image resize serivce，这里我用的是 wsrv ，它是一个 image cache & resize service。

// https://unavatar.io/ - retrieve user avatars
// https://wsrv.nl/ - An image cache & resize service
/**
 * @param {string} url The page URL
 * @param {number} size The size of favicon image. Default is 48.
 */
export function faviconURL(url, size = 48) {
  const domain = new URL(url).hostname;

  // e.g., jimhonor.github.io
  const isGithubPage = domain.endsWith(".github.io");

  const favicon = !isGithubPage
    ? `https://unavatar.io/${domain}?fallback=false`
    : `https://unavatar.io/github/${domain.slice(0, -10)}?fallback=false`;

  const u = new URL("https://wsrv.nl/");
  u.searchParams.set("url", favicon);
  u.searchParams.set("w", size);
  u.searchParams.set("h", size);
  return u.toString();
}

unavator 无法 resolve Github Page，比如 https://jiminpublic.github.io/lab-astro/biolink/ ，但可以通过这个 https://unavatar.io/#/?id=github 拿到 Github 用户的头像。