Framer ウェブサイトにファビコンを追加する方法：ダークモード対応・Apple Touch Icon・トラブルシューティング

Framer でファビコンを追加するには、サイト設定（⌘ + ,）を開き、「Site Images」→「Favicon」までスクロールして、64x64 の PNG ファイルをアップロードし、サイトを公開するだけです。

では、詳細を確認し、発生しやすい問題のトラブルシューティングを見ていきましょう。

Framer のファビコン仕様

Framer では以下のファビコン仕様が必要です：

• サイズ: 64 x 64 ピクセル
• 形式: PNG（推奨）
• 背景: 透明

ステップ 1：サイト設定を開く

設定にアクセスする方法は 2 つあります：

• キーボード: ⌘ + ,（Mac）または Ctrl + ,（Windows）を押す
• メニュー: Framer アイコン → Site Settings → Open Settings をクリック

ステップ 2：ファビコンセクションを見つける

• 「Site Images」までスクロールする
• 「Favicon」のアップロードエリアを見つける

ステップ 3：ファビコンをアップロードする

Framer には 2 つのアップロード枠があります：

• ライトテーマ用ファビコン: ライトモードのブラウザで表示されます
• ダークテーマ用ファビコン: ダークモードのブラウザで表示されます

1 つのバージョンしかない場合は、両方のスロットに同じ画像をアップロードしてください。

ステップ 4：サイトを公開する

• 公開ボタンをクリックする
• ファビコンはプレビューではなく、公開サイトにのみ表示されます

ライトモードとダークモードの対応

なぜ 2 つのバージョンが必要なのか？

• 暗いロゴはダークモードのブラウザタブで見えなくなります
• 明るいロゴはライトモードのブラウザタブで見えなくなります
• 別々のバージョンを用意すれば、すべてのモードで視認性が確保されます

バージョンの作成方法

1. 通常のファビコンから始める
2. 代替バージョン用に色を反転させる
3. 同じ形状とデザインを維持する
4. 両方とも透明な背景を使用する

Apple Touch Icon の設定

2024年9月以降、Framer は Apple Touch Icon に対応しています：

• 場所: 同じ Site Images セクション内
• サイズ: 180 x 180 ピクセル
• 用途: iOS デバイスのホーム画面アイコン

トラブルシューティング：ファビコンが表示されない

基本事項の確認

• サイトを公開しましたか？
• ハードリフレッシュ: Cmd+Shift+R または Ctrl+Shift+R
• シークレットウィンドウで試す

アップロード場所の確認

• ページ設定ではなく、サイト設定にある必要があります
• ファイルが有効な PNG 形式であることを確認してください

トラブルシューティング：Google が古いファビコンを表示する

Google のファビコン更新は遅く、数日から数週間かかります。

更新を早める手順

1. ファビコンがサイト上で公開されていることを確認する
2. Google Search Console を開く
3. ホームページに対して URL 検査ツールを使用する
4. インデックス登録をリクエストする

トラブルシューティング：Safari の問題

Safari はファビコンを積極的にキャッシュします。

修正手順

1. Safari のキャッシュを完全にクリアする
2. ファビコンキャッシュを削除する: ~/Library/Safari/Favicon Cache/
3. Safari を終了して再度開く

トラブルシューティング：Framer のロゴが表示されたまま

よくある原因：

• ファビコンアップロード後にサイトを公開していない
• ブラウザのキャッシュの問題
• 公開サイトではなくプレビューを表示している

解決策：サイトを公開し、ブラウザのキャッシュをクリアしてください。

ベストプラクティス

• ファイルのバックアップ: オリジナルのファビコンファイルを保存しておく
• あらゆる環境でテスト: Mac、Windows、iOS、Android で確認する
• チェックツールを使用: Favicon.im で設定を検証する
• カラーコードを記録: ブランドの一貫性のために正確なカラーコードを管理する

FAQ

Framer でファビコンを追加するにはどうすればよいですか？

⌘ + , でサイト設定を開き、「Site Images」までスクロールして「Favicon」をクリックし、64x64 の PNG ファイルをアップロードしてからサイトを公開します。

Framer のファビコンはどのサイズにすべきですか？

Framer では 64 x 64 ピクセルの PNG 形式で、透明な背景が推奨されています。

Framer のファビコンが表示されないのはなぜですか？

最も多い原因は、サイトが公開されていない、ブラウザのキャッシュ、またはアップロード場所の間違いです。サイトを公開し、ハードリフレッシュするか、シークレットウィンドウで試してください。

Google がファビコンを更新するまでどのくらいかかりますか？

Google のファビコン更新は遅く、通常は数日から数週間かかります。Google Search Console からインデックスの再登録をリクエストすることで、更新を早めることができます。

Framer はダークモード用ファビコンに対応していますか？

はい。2024年9月以降、Framer では Site Images 設定でライトテーマとダークテーマ用のファビコンを別々にアップロードできるようになりました。

参考リンク

1. How to set up a favicon in Framer - Framer 公式ヘルプ
2. September 2024 Update: Apple Touch Icon and Favicons - Framer アップデート情報
3. Why isn't Safari displaying the favicon? - Framer トラブルシューティング
4. Favicon.im - ファビコンのテスト・検証ツール