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

#Astro#HowTo#Web開発
投稿日: 更新日:

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

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

Feedlyのデフォルトのfavicon

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

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

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

Terminal window
1
http://www.google.com/s2/favicons?domain=example.com

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

GoogleのAPIから取得したfaviconはfaviconは解像度が低く、またデータが古いことがあります。そのため、Feedlyのフィード選択画面で使用されるfaviconをカスタマイズしたい場合があります。

次の画像は、Feedlyでこのブログを検索した場合や、フィード選択画面を開いたときに表示されるfaviconです。

Feedlyのフィード選択画面における、このブログのfaviconとブログ名のスクリーンショット

FeedlyのfaviconのカスタマイズではSVG画像を利用できるので、画面解像度に依存しない高品質のfaviconを提供できます。

Feedlyでfaviconをカスタマイズするには、次のような形式でRSSフィードを作成します。コード中の[]で囲まれた部分は、[]を削除したうえで実際の値に置き換えてください。

rss.xml
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をカスタマイズするには、次のようにします。

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

まとめ

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

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

参考

Twitterのアイコン LINEのアイコン Threadsのアイコン Misskeyのアイコン Misskeyのアイコン
著者のアイコン画像

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。