Simplicityでファビコンを設定する方法

WordPress無料テーマ「Simplicity」でファビコンを設定してみました。

ファビコンという単語は馴染みが無いかもしれませんが誰でも良く目にしている「Webサイトのシンボルマーク」です。

サイトのトレードマークみたいなものですね。そのサイトの印象を左右するので地味に大事だったりします。

何も設定していないとただのコピー用紙みたいなアイコンになっちゃうので何の特徴も無くなってしまいます。これは何とも寂しい。

インターネットを閲覧している読者の立場で考えても複数タブを開いてネットサーフィンをしている場合はファビコンに特徴があったほうが見分けが付きやすいので親切ですね。

Webブラウザのタブで表示されるファビコンのサイズは16x16pxと小さいですが形や色に特徴があればタブの見分けが付きやすくなります。

ということで自分がファビコンを設定した備忘録として手順を書いておきます。

ちなみに今回はSimplicityに20140812バージョンから追加された「メディアライブラリの画像をファビコンとして設定できる」機能を利用しているので他のWordPressテーマでは同じ方法が使えない可能性があります。ご注意ください。

ファビコン用の画像を作成

ファビコン用の画像は.jpgや.pngなどの画像ではなく.icoという拡張子のアイコンファイルを使うので専用の画像ファイルを作らないといけないので注意が必要です。

.icoファイルを作成するツールはいろいろあるのでそんなに心配する必要がないですけどね。

自分で美しい絵を描けるわけではないので無料素材サイトからサクッと画像を拝借しました。イメージはなんとなくパソ活ラボの「ラボ」って実験っていう意味だから三角フラスコを検索。

ライセンスを確認して「商用利用でも無料」となっているものを使うことにしました。素材サイトからはPNG画像をダウンロードします。

PNGやJPGなどの画像ファイルをファビコンに使えるアイコン（.ico）ファイルに変換してくれるサイトで変換します。

続いてSimplicityの設定画面でファビコンを設定していきます。

画像をアップロードしてからSimplicityのカスタマイザーで設定するだけなので簡単です。

管理画面左サイドバーの「メディア」→「新規追加」から、

作成したアイコンファイルをドラッグして、メディアライブラリへのアップロードします。

アップロードが完了すると右側に編集ボタンが現れるのでクリック、

画面右側に出てきたファイルのURLをコピーして（枠内をトリプルクリックすると全選択できるので楽です）

最後にいよいよファビコンを設定します。管理画面左側の「外観」→「カスタマイズ」へ移動して、

その他の設定から「ファビコンのURL」欄に先ほどコピーしたURLを貼り付けます。

※テーマ側でファビコンを設定にチェックを入れないと全てのページに適用されないので気をつけてください。

最後に「保存して公開」ボタンを忘れないようにクリックして完了です。

設定が完了したらファビコンが設定されているか確認するために自分のブログを開いてみましょう。タブの左側にアイコンが表示されていれば設定が無事完了しています。

ちゃんと設定しているのに反映されていない場合は試しにスーパーリロード（Ctrl+F5）をしてみてください。

メディアライブラリの画像をファビコンとして設定できるのは画期的ですね。普通ならFTPクライアントを使ったりしてicoファイルをアップロードしないといけないのでちょっとハードルが高かったです。

Simplicityでブログを始めた人は画像さえ用意できれば設定はわりと簡単なのでぜひオリジナルのファビコンを作ってみたらどうでしょうか。