favicon の作成

favicon (“favorite icon” の略) は、特定のサイトまたは Web ページに関連付けられたアイコンです。通常、Web ページをブックマークするときに使用します。Web ブラウザーは、URL バー、タブ、その他の場所でファビコンを使用して、Web サイトを視覚的に識別できるようにします。favicon は、モバイル デバイスのアプリケーション アイコンとしても使用されます。

favicon は通常、16×16 ピクセルの正方形のグラフィックで、サーバーのルート ディレクトリに favicon.ico として保存されます。ルートディレクトリへのアクセスを許可する Web サーバー上の任意の WordPress サイトで favicon を使用できます。

WordPress バージョン4.3以降

WordPress バージョン 4.3 では、Web サイトで favicon を有効にするサイトアイコン機能が実装されました。

サイトアイコン機能を使用する場合、favicon.ico ファイルを自分で用意したり、テンプレートファイルを変更したりする必要はありません。カスタマイズ画面に移動して、高さと幅が 512 ピクセル以上の正方形の画像を指定するだけです。

この記事の後半の段落には、手動で独自の favicon を設定する手順が記載されています。ただし、代わりにサイト アイコン機能 (WordPress に組み込まれている機能) を使用することを強く推奨します。

Follow the steps below to use Site Icon to set up a favicon for your site.

1. 画像ファイルを準備します。(正方形で、高さと幅が少なくとも512ピクセル必要です。)
2. 管理画面 > 外観 > カスタマイズ に移動します。
3. サイト基本情報 をクリックします。
4. サイトアイコン の下にある 画像を選択 をクリックします。
5. ファイルをアップロードタブをクリックし、ファイルを選択 をクリックして、前のステップで準備した画像ファイルをアップロードします。

favicon の作成

favicon は、.ico ファイルの保存が可能なグラフィック / 画像編集ソフトウェアを使用して作成できます。無料で favicon を作成できるオンラインサービスもあります。

画像は、鮮明で視覚的に魅力的なものであるべきです。理想的には、サイトのブランドイメージやコンテンツに合うようにデザインされていることが望ましいです。

favicon.ico として保存する画像を準備するには:

1. 画像をトリミングするか、周囲にスペースを追加して正方形にします。
2. 画像のサイズを16 x 16ピクセルに変更します。
3. ファイルを favicon.ico として保存します。

オンラインサービスを使用して favicon を作成する場合は、サイトの指示に従って、favicon.ico 画像をコンピューターにダウンロードします。

WordPress に favicon をインストールする

テーマまたは WordPress バージョンが上記のサイトアイコンオプションをサポートしていない場合は、この方法を使用して手動で favicon を追加できます。

現在のテーマのメインフォルダーに古い favicon.ico ファイルがすでに存在する場合は、FTP クライアント を使用して削除します。

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

古いブラウザーでファビコンを表示するには、ページヘッダーを編集する必要があります。(テーマのファイルを編集する最適な方法は、子テーマを使用することです。以下の手順に従う際には、子テーマにある header.php のコピーを作成して変更することを強く推奨します。)

1. WordPress の 管理画面 に移動します。
2. 外観 をクリックします。
3. テーマ エディター をクリックします。
4. Header または header.php というファイルを選択して編集します。
5. <link rel="shortcut icon" で始まり、/favicon.ico" /> で終わるコード行を検索します。存在する場合は上書きするか、HTML タグの下に次のコードを追加します。

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

変更を保存します。

透明な背景のファビコンを作成する方法

この方法を実行する前に、元の画像が透過背景であることを確認してください。つまり、GIF または PNG 形式である必要があります。残りの手順は上記の通りですが、唯一の違いは、favicon.ico ファイルではなく、favicon.png または favicon.gif を使用する点です。

<link rel="shortcut icon" で始まり、/favicon.ico" /> で終わるコード行を検索します。存在する場合は上書きし、HTML タグの下に次のコードを追加します。

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />

新しい favicon を表示するには、ブラウザーのキャッシュをクリアしてください。新しい favicon を表示するには、ブラウザーを再起動する必要がある場合があります。

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

1. 互換性 – この記事の執筆時点では、iOS Safari と Opera Mini を除く、ほとんどの最新ブラウザーが .ico 形式をサポートしています。
2. 404エラーを回避する – ほぼすべての最新ブラウザーが favicon.ico をリクエストするため、”404 not found” エラーを避けるために、常に favicon.ico ファイルを用意しておくのが最善です。
3. .ico ファイルには複数のアイコンを保存できるため、16×16および48×48のアイコン用に複数のファイルを含める必要はありません。

原文