Feedlyのfaviconをカスタマイズする方法
この記事では、Feedlyのフィード選択画面に表示されるfaviconをカスタマイズする方法をまとめます。
Feedlyのサムネイルをカスタマイズする方法は、こちらの記事で解説しています。
![記事のサムネイル](/og/2023/12/22/how-to-customize-feedly-thumbnail_CY6K8.png)
Feedlyのデフォルトのfavicon
Feedlyのデフォルトのfaviconは、Googleの非公式APIから取得されているようです。次のURLにアクセスすると、任意のドメインのfaviconを取得できます。
1http://www.google.com/s2/favicons?domain=<ドメイン名>
たとえば、example.com
のfaviconを取得するには、次のURLにアクセスします。
1http://www.google.com/s2/favicons?domain=example.com
faviconをカスタマイズする方法
GoogleのAPIから取得したfaviconはfaviconは解像度が低く、またデータが古いことがあります。そのため、Feedlyのフィード選択画面で使用されるfaviconをカスタマイズしたい場合があります。
次の画像は、Feedlyでこのブログを検索した場合や、フィード選択画面を開いたときに表示されるfaviconです。
![Feedlyのフィード選択画面における、このブログのfaviconとブログ名のスクリーンショット](/_astro/image.Dn1Ce6Th_uVhkM.webp)
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をカスタマイズするには、次のようにします。
1import rss from "@astrojs/rss";2
3export 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フィードを提供しましょう。