faviconator
#settings #UserCSS
これは何？
各種リンクへ favicon を付けるための CSS です
この CSS への固有リンクは次の通りです
https://scrapbox.io/api/code/kalaclista/faviconator/style.css
ライセンスは ISC License です
なお各種アイコンのブランドの扱いはそれぞれの企業に属します
そのためブランドアイコンの使用については各企業のポリシーを確認してください
またアイコンの取得は各種 Web サイト本体、もしくは DuckDuckGo の隠しAPI から取得しています
そのため、場合によっては DuckDuckGo や各種 Web サービスから怒られる可能性もあります
テスト用ページは下記にあります
faviconator/test
記述用テンプレート
code:template.css
a[href^="https://"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/");
}
code:style.css
/*
ISC License
(c) 2026 Naoki OKAMURA a.k.a nyarla / kalaclista <me@nyarla.jp>
SPDX-License-Identifier: ISC
Permission to use, copy, modify, and /or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/
全体設定
code:style.css
a[href^="https://"]::before {
display: inline-block;
content: '';
background-image: url('https://icons.duckduckgo.com/ip3/');
background-repeat: no-repeat;
background-size: 16px 16px;
background-position-x: left 4px;
width: 24px;
height: 16px;
vertical-align: middle;
}
一部無効化
code:style.css
/* Ignore link to Gyazo */
a[href^="https://gyazo.com/"]::before {
display: none;
}
様々な Web サービス（アルファベット・ひらがな降順）
code:style.css
/* Amazon.co.jp */
a[href^="https://www.amazon.co.jp"]::before,
a[href^="https://amzn.to/"] {
background-image: url("https://icons.duckduckgo.com/ip3/www.amazon.co.jp.ico");
}
/* Bluesky */
a[href^="https://bsky.app/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/bsky.app.ico");
}
/* Booth */
a[href^="https://booth.pm/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/booth.pm.ico");
}
/* codeberg */
a[href^="https://codeberg.org/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/codeberg.org.ico");
}
/* Cosense (Scrapbox) */
a[href^="https://cosen.se/"]::before,
a[href^="https://scrapbox.io/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/cosen.se.ico");
}
/* Fedibird */
a[href^="https://fedibird.com/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/fedibird.com.ico");
}
/* FediSnap */
a[href^="https://fedisnap.com/"]::before {
background-image: url("https://fedisnap.com/img/favicon.png?v=2");
}
/* GitHub */
a[href^="https://github.com/"]::before,
a[href^="https://gist.github.com/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/github.com.ico");
}
/* MetaCPAN */
a[href^="https://metacpan.org/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/metacpan.org.ico");
}
/* misskey.io */
a[href^="https://misskey.io/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/misskey.io.ico");
}
/* mixi2 */
a[href^="https://mixi.social/"]::before {
background-image: url("https://mixi.social/favicon.ico");
}
/* Qiita */
a[href^="https://qiita.com/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/qiita.com.ico");
}
/* sizu.me */
a[href^="https://sizu.me"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/sizu.me.ico");
}
/* speakerdeck */
a[href^="https://speakerdeck.com/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/speakerdeck.com.ico");
}
/* X (Twitter) */
a[href^="https://x.com/"]::before,
a[href^="https://twitter.com/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/x.com.ico");
}
/* Zenn */
a[href^="https://zenn.dev/"]::before {
background-image: url("https://icons.duckduckgo.com/ip3/zenn.dev.ico");
}
様々な個人サイト
code:style.css
/* nyarla.jp */
a[href^="https://msg.nyarla.jp/"]::before,
a[href^="https://the.nyarla.jp/"]::before,
a[href^="https://let.nyarla.jp/"]::before,
a[href^="https://the.kalaclista.com/"]::before,
a[href^="https://let.kalaclista.com/"]::before {
background-image: url("https://the.nyarla.jp/icon/favicon");
}