ファビコンとは?ファビコンをWordPressに設定にする方法をご紹介

初心者向けコンテンツ

ファビコンって聞いたことありますか?
知らない人は知らないですよね。私も初めて聞いたときは『ファービー』的な人形だろと思ってました。

今回の記事ではちょっとだけWordPressをおしゃれにすることのできる『ファビコン』についてご紹介していきたいと思います。

ファビコンとは?

ファビコン(favicon)は favorite icon の略でウェブサイト用のアイコンのことです。
ウェブサイトのアドレンの横にあるアイコンのことです。

ファビコンとは?

googleで言えばこんなの。

ファビコンとは?

私が使ってるwordpressのテーマのstinger5で言えばこんなの(今は違う)。
これじゃあ5がつく背番号が大好きな人のウェブページみたいになっちゃいますもんね。(stinger5はもちろん大好きですよ)

ということで、ファビコンを変えて個性を出していきましょう!

ファビコンを自作しよう

ファビコンの拡張子は見慣れない「.ico」という画像ファイルのフォーマットです。
用意する画像は何であれ、拡張子は変換しなくてはなりません。まぁ興味のある方はググってください。ここでは自作すること目標にします!

googleで検索すれば、ファビコンの画像もたくさんフリーなのがあり、ダウンロードして使用することも可能です。でも、簡単であれば作ることができるので、やっちゃいましょう!

ちなみに、私がファビコンを作ったサイトは「ここ」です。

ファビコンを作った

こんな感じに簡単に作れてしまいます。

作ったファビコンをWordPressに設定

ワードプレスのダッシュボードから、メディアの新規追加でファビコンをアップロードしてください。

ファビコンをアップロード

アップロードしたら、図の赤線で囲ってあるファビコンの「URL」を後で使うので、コピーしておいてください。

「コピーしたURLはどこに使うの?」ですが、子テーマのheader.phpで使います。
「子テーマ?なんじゃらほい」ってお方は、記事を参考にしてください。「子テーマについて」

親テーマフォルダから「header.php」をコピーし、子テーマフォルダ内に貼り付けしてください。

子テーマフォルダ

そうしたらワードプレスのダッシュボード→外観→テーマの編集を選び、header.phpを編集していきます。
46行目付近(テーマによって違うかも)に編集するコードがあります。(Advanced Code Editorというプラグインをインストール、有効化しておくことで、探しやすくなります。)

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />

上のコードが見つかるので次のように書き換えてください。

<link rel="shortcut icon" href="ここをファビコンのURLに変更してね" />

「ここをファビコンのURLに変更してね」のところに先ほどコピーしたURLを貼り付けてください。これにてファビコンの設定は完了です。簡単でしたね。

まとめ

いかがだったでしょうか。
今回の記事では『ファビコン』について書いてきました。

簡単に作業をまとめると、ファビコンを簡単に自作→親テーマフォルダのheader.phpを子テーマフォルダにコピーして貼り付け→46行目のコードを編集→完了

ちなみに、header.phpを編集しなくてもプラグインでファビコンを設定することは可能です。
『Favicon Rotator』というプラグインを使用すれば、header.phpの編集なんかしなくてもファビコンの設定ができるんですね。めんどくさいって方はプラグインを使用したほうがいいですね。

ただ、プラグインはできるだけ少なくシンプルにしているほうが、ウェブページの読み込みも早いので、私はheader.phpの編集をお勧めします。
本日も最後まで記事を読んでくださり、ありがとうございました。

コメント