[[favicon]]がどのように取得されるかについて、実際に動作を確認した事実を記録していく。
## コード
```js
function getFaviconUrl(dom, url) {
let iconHref =
dom.querySelector("link[rel='icon']")?.attributes?.href?.value ??
dom.querySelector("link[rel='shortcut icon']")?.attributes?.href?.value;
if (!iconHref) {
return new URL("favicon.ico", url).toString();
}
const baseUrl = dom.querySelector("base")?.attributes?.href?.value;
return baseUrl
? new URL(iconHref, new URL(baseUrl, url).toString()).toString()
: new URL(iconHref, url).toString();
}
```
> [!info]- `new URL`をうまく使っていなかったときのコード
>
> ```js
> function normalizeSlash(url) {
> return url.replaceAll(/(?<!:)\/{2,}/g, "/");
> }
>
> function getFaviconUrl(dom, url) {
> let iconHref =
> dom.querySelector("link[rel='icon']")?.attributes?.href?.value ??
> dom.querySelector("link[rel='shortcut icon']")?.attributes?.href?.value;
> if (!iconHref) {
> return normalizeSlash(new URL(url).origin + "/favicon.ico");
> }
>
> if (iconHref.includes("http")) {
> return iconHref;
> }
> if (iconHref.startsWith("//")) {
> return normalizeSlash(new URL(url).protocol + iconHref);
> }
>
> iconHref = iconHref.replace(/\.+\//, "/");
> if (iconHref.startsWith("/")) {
> return normalizeSlash(`${new URL(url).origin}/${iconHref}`);
> }
>
> const baseUrl = dom.querySelector("base")?.attributes?.href?.value;
> if (baseUrl === "/") {
> return normalizeSlash(new URL(url).origin + "/" + iconHref);
> }
> if (baseUrl) {
> return normalizeSlash(baseUrl + iconHref);
> }
>
> return normalizeSlash(`${new URL(url).origin}/${iconHref}`);
> }
> ```
## パターン
A. `<link rel="icon">`の`href`に絶対[[URL]]指定
B. `<link rel="icon">`の`href`に`/`から始まらない相対[[URL]]指定
C. `<link rel="icon">`の`href`に`/`から始まる相対[[URL]]指定
### [[mockito]]
パターンB (baseなし)
https://site.mockito.org/
↓
https://site.mockito.org/favicon.ico
```html
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
```
### [[ESLint]]
パターンC (baseあり)
https://eslint.org/docs/latest/rules
↓
https://eslint.org/favicon.ico
```html
<link rel="icon" href="/favicon.ico" sizes="any">
```
[[ESLint]]の場合は`base`に従うと`favicon`がエラーになる...? `/`始まりの相対パスはbaseを意識してはいけない?
### [[GitHub]]
パターンA。
https://github.com/tadashi-aikawa/obsidian-another-quick-switcher
↓
https://github.githubassets.com/favicons/favicon.svg
```html
<link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg">
```
### [[voicy]]
パターンB (baseあり)
https://voicy.jp/channel/1380/459280
↓
https://voicy.jp/favicon.ico
```html
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
```
- `<link rel="icon">`の`href`指定
- 相対[[URL]]なので`https://voicy.jp` + `/` + `favicon.ico` となっている
### [[Zenn]]
パターンA。
https://zenn.dev/estra/books/obsidian-dot-zenn
↓
https://zenn.dev/images/logo-transparent.png
```html
<link rel="shortcut icon" type="image/png" href="https://zenn.dev/images/logo-transparent.png"/>
```
- `<link rel="icon">`の`href`指定
- 絶対[[URL]]の場合はそのまま
### [[Qiita]]
パターンA。
https://qiita.com/ugr0/items/514dcab4275aa74f3add
↓
https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico
```html
<link rel="shortcut icon" type="image/x-icon" href="https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico" />
```