●特定のリンクにfaviconをつける

こういうこと↓

これはアイコン記法を使っているのではなくUserCSSでサイトのfaviconを取得して表示しています。

code:基本形.css

.line a.linkhref^="faviconを表示したいURL"::before {

content: '';

background: url(http://www.google.com/s2/favicons?domain=faviconを取得したいURL);

display: inline-block;

width: 16px;

height: 16px;

vertical-align: -3px;

background-size: contain;

margin-right: 2px;

}

備考

http://www.google.com/s2/favicons?domain=URLでURLのfaviconを取得できる

[href=~]の部分の書き方（属性セレクタ）は●UserCSSでページ一覧でのカードの見た目を変えるためのタイトル指定方法#60a912b0f6530000000f30d3

このプロジェクトで実際に適用しているCSS

code:例.css

.line a.link:is(

[href^="https://twilog.org/Foam_Crab/"],

[href^="https://noratetsu.blogspot.com/"],

[href^="https://note.com/"],

[href="https://twitter.com/Foam_Crab"]

)::before {

display: inline-block;

width: 16px;

height: 16px;

vertical-align: -3px;

background-size: contain;

background-repeat: no-repeat;

margin-right: 2px;

}

.line a.link[href^="https://twilog.org/Foam_Crab/"]::before {

content: '';

background: url(http://www.google.com/s2/favicons?domain=https://twilog.org);

}

.line a.link[href^="https://noratetsu.blogspot.com/"]::before {

content: '';

background: url(http://www.google.com/s2/favicons?domain=https://www.blogger.com/);

}

.line a.link[href^="https://note.com/"]::before {

content: '';

background: url(http://www.google.com/s2/favicons?domain=https://note.com/);

}

.line a.link[href="https://twitter.com/Foam_Crab"]::before {

content: '';

background: url(http://www.google.com/s2/favicons?domain=https://twitter.com/);

}

備考

:is()

:is() (:matches(), :any()) - CSS: カスケーディングスタイルシート | MDN

意外と知られていないCSSの:is()擬似クラス関数の使い方 | iwb.jp

background-repeat: no-repeat;はfavicon以外のものをつける可能性を想定して付けているけど基本的には書かなくていいと思います

CSSを適用させたいURLとfaviconを取得するURLは同じでなくて良い

Noratetsu Labはfaviconを自分のアイコンにしているが、ここで表示したいのはBloggerというサービスのfaviconなのでURLを変えている

#UserCSS