Notion のページをウェブサイトとして公開したものの、ブラウザーのタブに汎用的な Notion ロゴや空白の正方形が表示されたことがあるかもしれません。あなただけではありません。Notion site では、ページアイコンを正しく設定すると、そのアイコンが favicon として使われます。以下のようにすれば、カスタム favicon を設定して Notion site を印象的に演出できます。
前提条件
- 公開済みのサイト（Public page または Notion Site）を持つ Notion アカウント。
- アイコン用の画像ファイル（PNG または JPG の正方形画像。64×64 ピクセル以上を推奨）。
- 任意：ブランド化した URL 向けに、Notion site に接続した custom domain。
Notion Site に Favicon を設定する手順
- デスクトップアプリまたはブラウザーで Notion ページを開きます。編集モードになっていることを確認してください。
- ページタイトルにカーソルを合わせ、Add icon ボタン（または既存のアイコン）をクリックします。
- 画像をアップロードします。Upload タブでファイルを選択してください。Notion はこの画像をページアイコンとして使用します。
- サイトを公開または更新します。Notion Sites を利用している場合は、Share > Publish をクリックして確定します。public page の場合は、Share to web を切り替えるだけです。
- favicon を確認します。新しいタブでサイトの URL を開きます。アイコンは数秒以内に表示されるはずです。表示されない場合は、hard refresh（Ctrl+F5 または Cmd+Shift+R）を試してください。
これで完了です。Notion は、ページアイコンを自動的にサイトの favicon として使います。favicon をアップロードする別のフィールドはありません。
Custom Domain の使用
Notion site に custom domain を接続している場合でも、favicon に使われるのは引き続きページアイコンです。追加の手順は不要です。Notion の設定で custom domain が正しく構成されていることだけ確認してください。
よくある落とし穴
- アイコンが更新されない：ブラウザはfaviconを非常に強くキャッシュします。キャッシュをクリアするか、incognito windowでテストしてください。詳しくはfaviconキャッシュのクリア方法をご覧ください。
- アイコンがぼやけて表示される：正方形の画像を使用し、最小でも64x64ピクセルにしてください。大きめの画像（例：256x256）のほうがダウンスケール後の表示が鮮明になります。
- モバイル端末でアイコンが表示されない：Notionサイトは、モバイル端末のホーム画面ではfaviconが表示されない場合があります。より堅牢なアイコン構成にするには、custom domainとweb manifestを組み合わせることを検討してください。
- emojiをアイコンとして使用している：Notionではemojiをpage iconとして設定できます。設定したemojiはfaviconとして表示されますが、browserによって表示が一貫しない場合があります。 OscarsMinuteIDENTIFIERには(custom imageアップロードしてください)。
faviconの形式やベストプラクティスについてさらに詳しく知りたい場合は、faviconガイドをご覧ください。
まとめ
Notionサイトのfavicon設定は簡単です。page iconを設定するだけです。正方形の画像を設定して更新すれば、サイトのタブには識別しやすいアイコンが表示されます。他のプラットフォーム向けに複数のfaviconサイズを生成する必要がある場合は、Mzu favicondlで完全なアイコンセットを作成してみてください。
仕様書に記載された要件を確認
HTML Standardは、rel='icon'を、現在のページを表すアイコンのlink relationshipとして定義しています。