Feedlyのfaviconをカスタマイズする方法
この記事では、Feedlyのフィード選択画面に表示されるfaviconをカスタマイズする方法をまとめます。
Feedlyのサムネイルをカスタマイズする方法は、こちらの記事で解説しています。

Feedlyのデフォルトのfavicon
Feedlyのデフォルトのfaviconは、Googleの非公式APIから取得されているようです。次のURLにアクセスすると、任意のドメインのfaviconを取得できます。
http://www.google.com/s2/favicons?domain=<ドメイン名>
たとえば、example.com
のfaviconを取得するには、次のURLにアクセスします。
http://www.google.com/s2/favicons?domain=example.com
faviconをカスタマイズする方法
GoogleのAPIから取得したfaviconはfaviconは解像度が低く、またデータが古いことがあります。そのため、Feedlyのフィード選択画面で使用されるfaviconをカスタマイズしたい場合があります。
次の画像は、Feedlyでこのブログを検索した場合や、フィード選択画面を開いたときに表示されるfaviconです。

FeedlyのfaviconのカスタマイズではSVG画像を利用できるので、画面解像度に依存しない高品質のfaviconを提供できます。
Feedlyでfaviconをカスタマイズするには、次のような形式でRSSフィードを作成します。コード中の[]
で囲まれた部分は、[]
を削除したうえで実際の値に置き換えてください。
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:webfeeds="http://webfeeds.org/rss/1.0" version="2.0"> <channel> <title>[フィードのタイトル]</title> <atom:link href="[フィードのRSSファイルのURL]" rel="self" type="application/rss+xml"/> <link>[トップページのURL]</link> <description>[フィードの概要]</description> <webfeeds:icon>[faviconのURL]</webfeeds:icon> </channel></rss>
このRSSフィードをFeedlyに登録すると、webfeeds:icon
で指定したfaviconがフィード選択画面に表示されます。
Astroでの実装方法
このブログでは、静的サイトジェネレーターのAstroを使用しています。Astroの@astrojs/rssパッケージを使用したRSSフィードでfaviconをカスタマイズするには、次のようにします。
import rss from "@astrojs/rss";
export const GET = async () => { const posts = await getCollection('article'); return rss({ title: "RSSフィードのタイトル", description: "RSSフィードの概要", site: import.meta.env.SITE, items: [ // ...フィードのアイテム ], customData: "<webfeeds:icon>[faviconのURL]</webfeeds:icon>", xmlns: { webfeeds: "http://webfeeds.org/rss/1.0" } });};
まとめ
この記事では、Feedlyのフィード選択画面に表示されるfaviconをカスタマイズする方法をまとめました。
Feedlyのfaviconを適切にカスタマイズして、ユーザーにとって使いやすく美しいRSSフィードを提供しましょう。