WordPressのファビコン設定は3分で出来ます!

公開日: : 最終更新日:2015/06/08 マークアップ

ワードプレスのファビコン設定方法を知りたい

このブログもそうですが、WordPressで作成されたサイトのファビコン設定。
なんか難しいのかなー?という方のため、3分で出来るようご説明を。

ファビコンとは?

難しい説明はやめにして、簡単にいうと、このブログを見ているブラウザの最上部アドレスバーやタブ内に下の画像のように表示されているものがファビコンです。
favicon-setsumei
そうです。この小さなアイコンがファビコンです。

ではワードプレスに設定をしましょう。

ここからの流れにそって進めて下さい。
非常に簡単な流れですから、誤りないよう注意して下さい。

正方形の画像を用意します。

一般的なファビコンであれば64px四方サイズで十分です。
多少大きい分には後で整形できますので問題ありません。
ここでは、
dondon_icon
上記のような画像を用意してみました。
各自、正方形の画像を用意して下さい。(png、gif、jpg画像)

ツールにアップして、ファビコン用ファイルにします。

前項で用意した画像を変換ツールでファビコン用に変換します。
次の無料ツールを利用します。
http://favicon.qfor.info/c/
上記サイトへアクセスしたら、
icon_sakuseihouhou
画像ファイル:準備した画像を読み込ませましょう。
オプション:特別なこだわりがなければ「16pxにリサイズ」を選びます。
短い辺に合せてカットする(トリム処理):チェックせず(正方形画像を用意しているのでチェック不要)
減色しないを選択。

最後に「アイコンを作成」ボタンをクリックすることで、アイコン画像がダウンロードされます。

ファイル名を変更しよう

例では、ファイル名が「54f5538c7b99f.ico」になりました。これを
「favicon.ico」に変更します。
ランダムな文字列をfaviconに変更するだけです。

サーバーにアップしよう

では、用意したアイコンファイルをサーバーにアップしましょう。
通常は、WordPressをインストールしたディレクトリにアップします。
upsaki1
上記画像のように、WordPressのindex.phpやlicense.txtと同列に並ぶ階層にアップしています。
これで完了です。

上手くいかない場合には、テーマフォルダの中にアップしてみましょう。
upsaki2
あなたのWordPressをインストールしたサーバーの
/wp-content/themes/theme-name
へアクセスします。(※theme-nameにはあなたが有効化しているテーマの名前が入ると思います。)
上の画像のようにfunction.phpと同列にアップすればOKです。

正しいマークアップをしたい場合・まだファビコンが表示されない場合

ここでは、テーマフォルダ内にアップした場合を想定しています。(/wp-content/themes/theme-nameへアップした場合を想定)
次の1行をhead内に記載しましょう。

typeまで正しく記述する場合には、下のように記述します。

多くのWordPressテーマでは、header.phpファイルにheadタグがあるかと思いますので、headと/headの間に1行加えましょう。場所はどこでも良いですが、さほど重要なタグではないため、出来るだけ後方にしましょう。

※ここまでの説明では分かりづらい方のために、実際に追加したソース例を。

上記のように/headの直前でOKです。

補足

ファイルをアップしたり、head内に上書きした際、ファビコンが正常に反映されているか確認するため、数回ブラウザを更新しましょう。(あなたのサイトを見ている状態でF5ボタンを押すと再読み込みが掛かり、更新されます。)
通常、ファビコンが読み込まれるのに数回の更新を必要とする場合があります。これは古いキャッシュ(情報)が残っているため発生するもので、正常です。

この設定に因るSEO効果はありませんが、ファビコンがあるとブックマークから見つけやすく、ブログのイメージが濃くなり再訪問も増える効果を期待出来ますね。

簡単だったでしょうか?

wordpress_logoいかがだったでしょうか?
簡単に設定は出来ましたか?

もしあなたの周りにファビコン設定が終わっていないサイト管理者がいれば、やり方を教えてあげたり、この記事を見せてあげましょう。
ファビコン設定されたサイトが増えると、ブックマークも見やすくなりますね!

スポンサーリンク

関連記事

スマホページ作ったらcanonicalタグを忘れずに

SEOの基礎!canonical(カノニカルタグ)を正しく使おう

4/21に向けてスマホ対応に忙しいサイトオーナーの皆さん。 もしもレスポンシブデザインでの再構

記事を読む

bとstrongの違い

bタグとstrongタグの違いをSEO観点とhtml(html5)観点で分かりやすく

今回はbタグとstrongタグ、その関連タグについて扱います。今回登場するタグは これ

記事を読む

リンクのアンダーラインを消すCSS

リンクのアンダーラインを消す、色(リンクカラー)CSS指定

出来るだけSEOやSEMの専門的な記事を中心にしたいと思っていますが、どうも全体的にこのブロ

記事を読む

スポンサーリンク
スポンサーリンク
検索意図ドリル
コンテンツマーケティング関連本「検索意図ドリル」書きました。

ドリルを書きました。 「は?ドリル?あの漢字とかの?」 こ

2017年のSEOトレンド
2017年のSEOトレンド予測と重点対策ポイント

2017年に注力すべきSEO領域、新たにキャッチアップすべきSEO

SEOとキーワード数
SEOとキーワード数(メタタグ・タイトル・1ページ内)の正しい設計

この記事は、ご自身でサイト上位表示に取り組む方向けの内容です。

SEMって何?
SEMとは?SEOとの違い

ネット界隈はカタカナや3文字略称が頻繁に出てきます。 ここでは、

キーワードプランナーに仕様変更?
キーワードプランナーの不具合?稼働キャンペーンのないアカウントで検索数が正常に取得できない

今月の上旬に、キーワードプランナーに少し変更があったようです。

→もっと見る

PAGE TOP ↑