●特定のリンクにfaviconをつける
こういうこと↓
これはアイコン記法を使っているのではなくUserCSSでサイトのfaviconを取得して表示しています。
基本形.css.line a.link[href^="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を取得できる
このプロジェクトで実際に適用しているCSS
例.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()
background-repeat: no-repeat; はfavicon以外のものをつける可能性を想定して付けているけど基本的には書かなくていいと思います
CSSを適用させたいURLとfaviconを取得するURLは同じでなくて良い
Noratetsu Labはfaviconを自分のアイコンにしているが、ここで表示したいのはBloggerというサービスのfaviconなのでURLを変えている