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

ファビコンアイキャッチ画像

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

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

ファビコン

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

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

ファビコンを設定していない状態

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

ファビコンが並んだ様子

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

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

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

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

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

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

無料素材サイト

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

⇒ 三角フラスコ – アイコン | 無料アイコンをダウンロード

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

アイコン(.ico)ファイルに変換

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

⇒ JPEG/PNG/GIFからアイコンを作成する「アイコン コンバータ」

Simplicityでファビコンを設定

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

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

WordPressに画像をアップロード

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

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

ファイルのURLをコピー

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

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

ファビコンを設定

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

その他の設定から「ファビコンのURL」欄に先ほどコピーしたURLを貼り付けます。
テーマ側でファビコンを設定
テーマ側でファビコンを設定にチェックを入れないと全てのページに適用されないので気をつけてください。

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

ファビコンが反映されたか確認

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

ファビコンを設定した状態

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

まとめ

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

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

スポンサーリンク

このページのシェア・保存はこちら

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。