Ghostで新しいメディアを立ち上げたばかりなら、ブラウザのタブにはまだデフォルトの白いお化けアイコンが表示されているはずです。可愛いですが、「まだ設定途中です」と宣言しているようなものです。プラグインと格闘しがちなWordPressの設定とは異なり、Ghostの基本設定は非常にシンプルですが、その分、高度な設定は隠されています。
ZennやStripeのエンジニアリングブログを見てみましょう。彼らは、OSのダークモードに完璧に適応する、鮮明でスケーラブルなSVGを使用しています。しかし、Ghostのデフォルト管理画面では静的なPNGしか要求されません。2026年のプロフェッショナルなサイトを目指すなら、基本UIをバイパスすることを常にお勧めします。
ここでは、基本的なUIメソッドからプロレベルのコードインジェクションまで、ghost cms faviconを完璧に設定する方法を解説します。
Ghost CMS Faviconの完全マスター
方法1:管理画面からのクイック設定
とにかく今日中に公開したくて、ダークモードを気にしない場合は、組み込みの設定を使用します。
- Ghostの管理ダッシュボードにログインします。
- Settings > Design > Brandの順に進みます。
- 「Publication icon」のアップロードフィールドを探します。
- 正方形のPNGをアップロードします(Ghostは60x60px以上を推奨していますが、実際には512x512pxを使用すべきです)。
- 「Save」をクリックしてサイトをリロードします。
方法2:プロ向けのコードインジェクション(推奨)
管理画面のUIの欠点は、高度なメタデータが削除されてしまうことです。色が変わるSVGが必要な場合は、サイトのheadに直接コードを注入する必要があります。
- まず、Mzu favicondlを使用してモダンなアイコンを生成します。
- SVGとApple Touch Iconをサーバーまたは高速なCDNにアップロードし、URLを取得します。
- Ghost管理画面のSettings > Code Injectionに移動します。
- 「Site Header」ボックスに、以下の2026年版モダンスタックを貼り付けます:
<link rel='icon' href='https://your-cdn.com/favicon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='https://your-cdn.com/apple-touch-icon.png'>これによりデフォルトのPNGが上書きされ、高DPIディスプレイでも鮮明なベクターグラフィックスが表示されます。
Ghost特有の落とし穴
- 強力なキャッシュ: Ghostはキャッシュを強力に保持します。アイコンを更新しても反映されない場合、あなたのミスではありません。ブラウザでファビコンのキャッシュクリアを強制する必要があります。
- ファイルサイズ制限: 2MBの巨大なロゴをアップロードしないでください。初期レンダリングが遅くなります。
今すぐデフォルトのお化けアイコンを卒業しましょう。最初のタブからブランディングが確立されていれば、読者の信頼は格段に高まります。