WordPress ファビコンを追加

2016年4月7日 WordPress コメント

色々なサイトをPCで見ていると、
ブラウザタブの左端にアイコンマークがついています。
（このアイコンは、Favicon(ファビコン）というみたいです。）

今回は、ファビコンの追加にチャレンジです。

ファビコンの画像ファイル作成

まずは、ファビコンの画像を用意します。
私は、以下のような正方形のjpegファイルを用意しました。

次に、以下のサイトから用意したファイルをファビコン用ファイル(.ico)に変換します。
FavIcon from Pics

選択をクリックして、用意したjpegファイルを開きます。
次にGenerate FaIcon.icoをクリックします。（以下図）

ファビコンファイルが出来たら、以下のような画面になります。
Download FavIcon Packageをクリックしてダウンロードします。

ダウンロードしたら、zipファイルを解凍します。
解凍したら、中に.icoファイルが入っています。
これをwordpressをインストールしているサーバーへアップロードします。
私は、自分が使っているテーマファイルのフォルダにアップしました。

ファイルをアップロードしたら、
wordpress管理画面の[外観]⇒[テーマ編集]をクリックして、
header.phpを編集します。

headタグ内の最後に、
以下を追加します。
<link rel=”SHORTCUT ICON” href=“ファビコンファイルが置いてあるパス/ファビコン名.ico” />

私は、自分のテーマフォルダの中にファビコンファイルをアップしたので、
get_template_directory_uri()を使って
テーマフォルダのパスを取得しています。

編集したら、ファイルを更新をクリックして、ページを確認してみます。
以下のように、ファビコンが表示されました。

以上、WordPressのサイトにファビコンを追加する方法でした。
参考になれば幸いです。