Feedlyのfaviconをカスタマイズする方法

この記事では、Feedlyのフィード選択画面に表示されるfaviconをカスタマイズする方法をまとめます。

Feedlyのサムネイルをカスタマイズする方法は、こちらの記事で解説しています。

Feedlyのサムネイルをカスタマイズする方法

この記事では、Feedlyのフィード画面に表示されるサムネイルをカスタマイズする方法をまとめます。

2023年12月22日

Feedlyのデフォルトのfavicon

Feedlyのデフォルトのfaviconは、Googleの非公式APIから取得されているようです。次のURLにアクセスすると、任意のドメインのfaviconを取得できます。

1
http://www.google.com/s2/favicons?domain=<ドメイン名>

たとえば、example.comのfaviconを取得するには、次のURLにアクセスします。

1
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フィードを作成します。コード中の［］で囲まれた部分は、［］を削除したうえで実際の値に置き換えてください。

1
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/"  xmlns:webfeeds="http://webfeeds.org/rss/1.0" version="2.0">
2
    <channel>
3
    <title>［フィードのタイトル］</title>
4
    <atom:link href="［フィードのRSSファイルのURL］" rel="self" type="application/rss+xml"/>
5
    <link>［トップページのURL］</link>
6
    <description>［フィードの概要］</description>
7
    <webfeeds:icon>［faviconのURL］</webfeeds:icon>
8
    </channel>
9
</rss>

このRSSフィードをFeedlyに登録すると、webfeeds:iconで指定したfaviconがフィード選択画面に表示されます。

Astroでの実装方法

このブログでは、静的サイトジェネレーターのAstroを使用しています。Astroの@astrojs/rssパッケージを使用したRSSフィードでfaviconをカスタマイズするには、次のようにします。

1
import rss from "@astrojs/rss";
2
export const GET = async () => {
3
    const posts = await getCollection('article');
4
    return rss({
5
        title: "RSSフィードのタイトル",
6
        description: "RSSフィードの概要",
7
        site: import.meta.env.SITE,
8
        items: [
9
            // ...フィードのアイテム
10
        ],
11
        customData: "<webfeeds:icon>［faviconのURL］</webfeeds:icon>",
12
        xmlns: {
13
            webfeeds: "http://webfeeds.org/rss/1.0"
14
        }
15
    });
16
};

まとめ

この記事では、Feedlyのフィード選択画面に表示されるfaviconをカスタマイズする方法をまとめました。

Feedlyのfaviconを適切にカスタマイズして、ユーザーにとって使いやすく美しいRSSフィードを提供しましょう。

参考

• 10 ways to optimize your feed for feedly – Feedly Blog
• @astrojs/rss - npm