• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

favicon の作成

提供: WordPress Codex 日本語版
移動先: 案内検索

favicon ("favorites icon" の略。お気に入りアイコン) は Web サイトや Web ページに関連付けるアイコンで、Web ページのブックマークに使用されます。favicon の画像は Web ブラウザの URL バー、タブ、その他の場所に表示され、Web サイトをビジュアルに表します。また favicon はモバイルデバイスのアプリアイコンとしても使用されます。

favicon は通常、縦横16ピクセルの正方形の画像ファイルで、サーバーのルートディレクトリに favicon.ico として保存されます。WordPress サイトでも favicon を使用できますが、Web サーバーはルートディレクトリへのアクセス許可が必要です。

WordPress Version 4.3 以降

WordPress Version 4.3 では Web サイトでの favicon の使用をサポートするサイトアイコン機能が実装されました。favicon を使用する場合は以下のセクションでの説明ではなく、サイトアイコン機能を使用してください。favicon.ico ファイルを自分で作成したり、テンプレートを変更する必要はなく、カスタマイザー画面から縦横512ピクセル以上の正方形の画像を指定すれば済みます。

Web サイトに favicon を設定するには次の手順に従ってください。

  1. 画像ファイルを準備します。正方形で、縦横512ピクセル以上が必要です。
  2. 管理画面」->「外観」->「カスタマイズ」を選択します。
  3. 「サイト基本情報」をクリックします。
  4. 「サイトアイコン」セクションで「画像を選択」をクリックし、「ファイルをアップロード」タブから上の手順で準備した画像ファイルをアップロードして、「選択」をクリックします。

customizer-siteicon.jpg

faviconの作成

favicon は GIMP などの .ico ファイルへの保存をサポートする任意の画像編集ソフトを使用して作成できます。また無料で favicon を作成できるオンラインサービスもあります。

画像はサイトのイメージやコンテンツに合った、分かりやすいものを選択してください。小さな画像ですが役割は重要です。

以下の手順に従って favicon.ico 画像を準備してください。

  1. 画像の一部を切り取るか、余白を追加して、画像を正方形に加工してください。
  2. 画像サイズを縦横16ピクセルに縮小します。
  3. ファイルを favicon.ico として保存します。

favicon の作成に Faviconer.com (背景透過の24bit favicon.ico を作成可) や Dynamic Drive などのオンラインサービスを使用する場合、サイトのガイドに従って画像を作成し、ローカルに favicon.ico としてダウンロードしてください。

WordPress への favicon のインストール

まずテーマのメインフォルダーに古い favicon.ico がある場合は FTP クライアントで削除しておきます。

  1. 現在のテーマのメインフォルダーに FTP クライアントを使用して新しい favicon.ico ファイルをアップロードします。
  2. サイトのメインディレクトリにも favicon.ico をアップロードします (例: http://example.com/favicon.ico)。これでサイトの購読者のフィードリーダーにも favicon が表示されます。

古いブラウザに favicon を表示するにはページヘッダーを編集する必要があります。テーマのファイルを編集する場合はできるだけ「子テーマ」を使用してください。次の手順に従うには、まず親テーマの header.php を子テーマにコピーする必要があります。

  1. WordPress 管理画面にログインします。
  2. 外観」をクリックします。
  3. テーマの編集」をクリックします。
  4. ヘッダー または header.php を開き、ファイルを編集します。
  5. <link rel="shortcut icon" で始まり /favicon.ico" /> で終わる行を探します。あればその行に上書きで、なければ <head> HTML タグの下に、次のコードを挿入します。
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
  6. 変更を保存します。

背景透過 favicon を作成する方法

この方法では、あらかじめ元となる画像が背景透過 GIF または PNG の必要があります。残りの手順は上と同じです。コードで1つ違う点は favicon.ico の代わりに favicon.png または favicon.gif を指定します。

  1. <link rel="shortcut icon" で始まり /favicon.ico" /> で終わる行を探します。あればその行に上書きで、なければ <head> HTML タグの下に、次のコードを挿入します。
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />

新しい favicon を表示するにはブラウザキャッシュをクリアしてください。新しい favicon を表示するにはブラウザの再起動が必要かもしれません。

.png や .gif よりも .ico を使用する利点

  1. 互換性 - IE 5.0 を含め、すべてのブラウザが .ico フォーマットをサポートします。
  2. 404 サーバーエラーの回避 - すべての最新のブラウザで常に favicon.ico を要求します (Chrome 4、Firefox 3.5、IE 8、Opera 10、Safari 4 でテスト済み)。「404 not found」エラーを確実に回避するには常に favicon.ico ファイルを準備してください。
  3. .ico ファイルは1つ以上のアイコンを保持できます。16x16アイコン用と48x48アイコン用に複数のファイルを作成する必要はありません。

最新英語版: WordPress Codex » Creating a Favicon最新版との差分