このブログですが、ファビコンが無く寂しい状態だったので思い付きでファビコンを作りました。
で、いざファビコンを設定しようとしたのですが「あれ、設定画面ってないの？」となったので
設定の仕方をまとめておきます。
テーマやプラグインで対応ができるかもしれませんが、一応今回はheader.phpにファビコンを表示させるソースを追加してみます。
ファビコンとは何か
ウェブサイトを見るときにブラウザのタブに表示されるアイコンです。
他にもお気に入りバーやiPhoneのホームスクリーン、Windowsホームのタイルなど最近では様々なところに表示されます。
ファビコンを設定するメリット
ファビコンを設定する事にどのようなメリットがあるのかというのは気になるかと思います。
実際、SEOに特別な効果が出るなどのことはありません。
ただページ（サイト）のブランディング効果や、お気に入りにまとめられた後の使いやすさ（視認性）などには影響がでますので
特別な理由が無ければ是非設定してみましょう。
ファビコンを作ってみよう
実際にファビコンを設定するにあたって、ファビコンの作成を行う必要があります。
ワードプレスでは512×512ピクセルの画像を使うことが推奨されています。
作業に必要なもの
・イラストソフト（ペイントでもphotoshopでも）
作成してみよう
自分で作成する場合はどのような形ででも作成が可能です。
とはいえ、あまり凝ったものを作っても
このように、ブラウザのタブやお気に入りなどではとても小さく表示されますので、凝ったデザインは潰れてしまう可能性があります。
ファビコンでは、小さくてもそのサイトがどんなサイトなのかがわかりやすく表現されていることが大事ですね。
サイトが扱っている内容や方向性を加味してアイコンを作成しましょう。
拡張子を変更する
作成したアイコンは.icoという拡張子にする必要があります。
これはWindowsにおける、アイコンで使用する画像ファイルフォーマットです。
ChromeやFirefoxなどのブラウザではほかの拡張子でもファビコンとして使用できるのですが、
Windowsに関してはファビコンに設定する画像は.icoという拡張子である必要があります。
オンラインで画像拡張子を.icoに変換できるサービスなどもありますので
作成した画像はさくっと.icoに変換してしまいましょう。
とはいえ実際にはデザインのスキルが少し必要になりますし、
色々と考え始めると作るのめんどくさく感じちゃいますよね？
作成サービス
そんな時には外部のファビコン作成サービスを利用してみるのも手です。
無料で作成できるサービスを使うと、簡単にオリジナルのファビコンが作成できますので活用してみましょう。
freefaviconではオンライン上でファビコンを作成したり、自由に使える作成済みのファビコンが多数用意されていたりするので
こういったサービスを使って自身のサイトにあったファビコンを用意しましょう。
WordPressでファビコンを設定してみよう
ここまででURLの横に設置したいファビコンが用意できたかと思います。
ここからは実際にサイトにファビコンを設定してみましょう。
header.phpに変更を加えますので、万が一を考えてバックアップはしっかりとっておきましょう。
favicon.icoのアップロード
それでは作成したファビコンをワードプレスにアップしましょう。
ここはわざわざ書く必要もないとは思いますが、
メディアに用意したファビコン画像をアップロードしましょう。
アップしたファビコン画像のURLはこの後の設定で使用しますので、どこかにコピペで張り付けておいてください。
header.phpへの記述方法
画像のアップロードができたら、実際にファビコンが設定されるようにheader.phpに記述を追加します。
header.phpを開き、
<link rel="shortcut icon" href="ファビコン画像のパス">ファビコン画像のパスの箇所に先ほどアップしたファビコンのURLを記述します。
これでファビコンの設定は終了です。
保存してページでファビコンが表示されるか確認してみましょう。
まとめ
ファビコンが設定されているだけで、なんとなくきちんとしたサイトだという感じが出ますね。
頻繁に変更するのもユーザーの利便性を考えるとどうかとは思うのですが、自分の思った形でサイトを表現できるように色々と試してみてください。
お疲れ様でした。
追記：設定するところあるじゃん…
ここに画像アップすればファビコンとして登録されるんですね…
まぁ、カスタマイズ画面を使わないでファビコン設定もできますよ、ということで…
