Pocket

WordPressサイト に favicon.icoを設置する方法

  • add this entry to hatena bookmark

Webサイトを運営している場合、favicon.ico (ファビコンと読み、Favorite icon=お気に入りのアイコンの略称)を設置するケースがほとんどだと思います。

ですが、このサイト(WordPressサイト)ではここしばらく favicon.ico が参照できていませんでした。Webサーバのアクセスログを見ても応答コードが「404」になる状態が続いていました。

今回、WordPressサイトに favicon.ico を設置するまで行い、無事参照できるようになりましたので、その手順を記載します。

1.favicon用の画像を作成

まず、favicon.ico用の画像ファイルを作成しました。

favicon.ico には複数のアイコンを含める事が出来ます。

よって、今回は、16 x 16、32 x 32 、48 x 48 の3つのpngファイルをGIMPで用意しました。

checksite-16-16checksite-32-32checksite-48-48

Check!Siteの略称的な感じで作りました。ショボイかもしれませんがあしからず・・。

なお、favicon.ico の画像背景は、透過が良いそうです。ブラウザで見た時に背景色が何でも馴染みやすいからです。

2.favicon.ico に変換

今回、「半透過マルチアイコン、favicon.ico を作ろう!」を利用させていただきました。

3つのサイズの画像をアップし、「アイコン作成」ボタンをクリックすると、3つの画像がまとめられた favicon.ico がダウンロードできます。

3.favicon.ico を WordPress サイトにアップ

作成されたfavicon.ico をWordPressサイトにアップします。

これはポイントですが、favicon.ico をアップする場所は、利用しているテーマのディレクトリです。例えば、テーマとして「twentythirteen」を使っている場合は、wp-content/themes/twentythirteen ディレクトリにfavicon.ico を配置します。

4.HTML header で favicon.ico の場所を指定

次に、(私の場合は)header.php でfavicon.ico の設置場所を指定します。

子テーマを使っていない場合は以下です。

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

子テーマを使っている場合は以下です。(ここが私にとってポイントでした。)

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />

そういえば、子テーマを使いだしてから、favicon.ico が表示されなくなっていた感もあります・・・。

以上で、favicon.ico の設置作業が完了し、無事表示されるようになりました!

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

チェックサイト RSS Feed読者登録はいかがでしょうか?RSS配信中です。