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内に記載しましょう。

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

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

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico" type="image/vnd.microsoft.icon" />

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico" />
</head>

上記のように/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の専門的な記事を中心にしたいと思っていますが、どうも全体的にこのブロ

記事を読む

 
 
no image
2022年サーチエンジンマーケティングと周辺の話

明けましておめでとうございます。2022年です。前回から2年経過です

2020年トレンド
2020年のSEOトレンド

明けましておめでとうございます。(いまさら!)毎年書いていた年始め

2019年のSEO
2019年のSEO。私が頑張りたい4要素。

昨年(2018年)は書くのを忘れました。今年は書いておこうと

Googleの個人名「ナレッジパネルの認証を受ける」の申請方法・編集

Googleで個人名検索をした際に表示される「ナレッジパネル

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

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

→もっと見る

PAGE TOP ↑