こんにちは。山ばりゅです。
今回は、WordPressでファビコンを設置する方法についてご紹介させていただきたいと思います。内容はテーマ付属のシステムなどを使わずにhtmlソースを使って設置する方法でのご紹介ですが、難しいものではありませんので、是非ぜひ今回も最後までお付き合いいただけましたらと思います。
WordPressでファビコンを設置する方法
まず、ファビコンっていうもののご説明を簡単にさせていただくと、自サイトを開いたときにタグのところに表示される小さな画像ファイルのことで、これを設置することにより、ご自身のサイトの特異性をより引き出すことができるんですね。お使いのテーマによっては、htmlソースを使わなくても、簡単に設置できるシステムがあったりして、私がこれまで使っていたWINGというテーマでも画像を用意して、そのurlをそこに入力しておけば、勝手にファビコンを表示してくれていたんですが、WINGの後継テーマにアップグレードしたら、そのシステムが消えちゃっててですね。。。
当然ファビコンも消えてしまっていたわけでして。
そこで、同じように困ってらっしゃるのではないかなと思い、備忘録もかねてhtmlソースを使ってのファビコンの設置方法をご紹介させていただこうかと。ちなみに今回ご紹介に使用しているテーマはアクション（アフィンガー６）というテーマを使っていますが、設置方法はhtmlですので、他のテーマでもご参考いただけるかと思います。
では、早速htmlソースを使ってWordPressで作成したブログやサイトにファビコンを設置する手順をご紹介させていただきましょう。
WordPressでファビコンを設置する手順
まず、設置する画像を用意します。サイズはお使いのテーマによって推奨サイズが違うと思うので、そちらの方をご確認いただきたいのですが、タブに入るような小さな画像ですので、そんなに大きいサイズではない方がいいかなと思います。ちなみにアフィンガー系では、16✕16px、32✕32Ppxの２つのサイズを用意して、ファビコンを設置する感じですね。
少し注意したいのは、ファビコンの拡張子。通常画像ファイルは「jpg」や「png」、「gif」などの拡張子が使われますが、ファビコンに使用する画像ファイルの拡張子はこれらではなくてですね。「ico」といった拡張子が使われます。
こちらに「jpg」や「png」といった拡張子の画像ファイルを「ico」ファイルに変換できるサイトをご紹介しておきますので、ご参考ください。
では、画像が用意出来たら、早速ファビコンを設置していきましょう。
まず、WordPressの管理画面にログインし、左のメニューから外観をポイントし、表示される候補の中から、「テーマエディター」をクリックします。
するとこんな感じで、テーマ編集画面が表示されるので、右上辺りにある「編集するテーマの選択」の右横のボックスの下向き矢印をクリックし、ファビコンを設置したいテーマ（現在お使いのテーマ）を選択後、「選択」をクリックします。ファビコンの設置はhtmlソースのヘッダー部分に設置するので、該当部分のhtmlソースをクリックします。（アフィンガー、スティンガー系では【header.php】）
では、ソースを入れていきましょう。ソースは
<link rel="icon" type="image/x-icon" href="〇〇〇〇">
〇〇〇〇のところには、ファビコンに使う画像ファイルのurlを入力してください。場所は<head>タグ内であれば、問題ありませんが、分かりやすいところで</head>の前あたりが良いかなと。入力が終われば、編集画面の一番下にある「ファイルを更新」をクリックし、ソースの編集を反映させます。
これで、WordPressでファビコンを設置する手順は終了でございます。一度ご自身のサイトを表示し、タグの左にファビコンが表示されていれば成功です。
画像ファイルのurlの記述場所について
画像ファイルのurlの記述場所はFTPで追っていってもいいですが、メニューのメディアを使うと簡単に見つけることができます。まず、メニューのメディアをポイントし、メディアライブラリをクリックします。
次にファビコンに使う画像をクリック。
すると、右側に画像の詳細が表示されますので、その中から「ファイルのURL」のボックスに入っているものがその画像のurlとなります。
最後に
いかがだったでしょう。今回は、WordPressでファビコンを設置する方法についてご紹介させていただきました。良ければ設置していただき、ご自身のサイトやブログをより際立たせていただければと思います。ちなみに同じくブログを運営している友人が教えてくれたのですが、ファビコンに設置する画像は小さいので、シンプルで線が太い方がいいとのこと。
恥ずかしながら、私のファビコンも線が細くシンプルとはいいがたいですので、早く修正しなければです。ではでは、今回はこの辺りで。こちらの記事があなたのサイト運営うなぎのぼりのお役に立てれば幸いです。
