WordPressのheader.phpを編集してファビコンを設定する方法

ブログ制作

こんにちは。タマです。

今回はファビコンのお話です。

ファビコンの設定はWEBサイトの個性を出す上で重要な目印になります。

SEO的には何の影響もないということらしいですが、設定しているといないとでは、ブックマークされた時の目立ち度が全然違いますよね。それ程手間でもないので、ぜひ対応しておきましょう。

 

ということで、作成方法と設定方法を紹介します!

 

 

スポンサーリンク

ていうか、ファビコンって何?

その前にファビコンについて。

今更言うまでもないかもしれませんが、ブラウザのタブで、サイト名の右側に出ているアイコンのことですね。

 

今回はこれを作成、設定してみましょう。

 

まずはファビコンの作成方法

素直にfavicon generator(https://ao-system.net/favicongenerator/)を利用させていただきましょう(笑

正方形の画像ファイルを作成します。

 

僕の場合は、手抜きっぽいですが、パワーポイントを使い、正方形のオートシェイプを作成し、それを「図形として保存」し、png形式で保存しました。

それを上記のファビコンジェネレータ―にかけます。

すると下記のように様々なサイズの画像が生成されるので、32*32のサイズのものを右クリックして保管し、自身ワードプレスサイトにアップロードしておきます。

ちなみにこの時に作ったファビコンは、「ゆるワーク」の「ゆ」です。

 

 

ファビコンの設定方法

ファビコンを自分のブログに反映するには、いくつかの方法がありますが、今回は基本的なものを紹介します。

ここで紹介するやり方は使用しているテーマによっては使えない場合もあるので注意してください。

ちなみに当ブログで使っているテーマ「Cocoon」では反映されませんでした。Cocoonのようにテーマ側でファビコンの設定が用意されている場合はそちらの方法を使いましょう。

 

テーマのheader.phpを編集する方法

それでは、方法の解説です。一長一短ありますが、この方法が最も汎用的な方法になります。

テーマの「header.php」にファビコン用のリンクタグを追加するやり方です。

下図をご覧ください。管理メニューの「外観」から「テーマの編集」を選択します。

右側のテーマファイルから、header.phpを選択し、</head>タグの直前に<link>タグを追加します。

 

追加するタグは、

<link rel="icon" type="image/png" href="/path/favicon.png">

となります。

「path」は、自身のサーバのファイルアップロード先として読み替えてください。

 

header.phpを編集する際の注意点

header.phpを編集するやり方は汎用的ですが、テーマのアップデートされた場合などに上書きされてしまい、それまでの設定が消えてしまうので、編集時には子テーマを使うようにしましょう。

 

まとめ

いかがでしたでしょうか。

プラグインで対応する方法などもあるのですが、一番汎用的なやり方を紹介してみました。

 

 

コメント