関連機器

WordPressにおけるFavicon画像の設定方法

スポンサードリンク







 

WEBサイトをブラウザで開くとタブ上に表示される画像を「ファビコン」と呼びます。

ファミコンのような響きで変わった呼び名ですが、サイトのシンボルマークのような意味合いもありますので、結構重要なものです。

細部までこだわったサイト作りをするなら出来ればオリジナルの画像を用意して設定するようにしましょう。

 

ファビコン

 

 

 

 

 

 

 

 

 

何もしていない場合は、真っ白な状態だったりします。

WordPressのテンプレートによってはテンプレート独自のファビコンがあらかじめ設定されている場合もあります。

ただ、それは同じテンプレートを使っている人とはかぶってしまう可能性もあるので、自分のオリジナルとは言えません。

 

ここではWordPressでファビコンを設定する方法と、ファビコン画像の簡単な作り方について解説していきます。

 

ファビコン画像の簡単な作り方
まず初めに、ファビコン画像の画像サイズは「32×32」となります。

なので非常に小さい画像となります。

 

真四角な画像を用意すれば、後は簡単にファビコン画像を作ってくれるサイトがありますので、そちらを利用しましょう。

 

1.元となるオリジナル画像を用意する。

2.ファビコン画像作成サイトで画像を変換する

参照:favicon.icoを作ろう

 

以下の画像の部分の真ん中の「中画像」のファイル選択をクリックして設定する画像を選択します。

 

favicon2
 

 

 

 

 

 

 

 

 

3.変換された画像をダウンロードする

画像の変換が終わったら、以下の画像の中の白い枠ないの「ダウンロード」で画像をダウンロードしましょう。

favicon3

 

 

 

 

 

 

 

 

 

 

 

そうすると、非常に小さいサイズの画像が作成されます。

 
ファビコン画像をWordPressへ設定する方法
1.先ほどダウンロードしたファビコン用の画像をWordPressへアップロード

ダッシュボードからメディア⇒新規追加と移動します。

そこへファビコン画像をドラッグ&ドロップします。

スクリーンショット 2014-06-28 01.01.07
 

 

 

 

 

 

 

 

 

画像が追加されたら「編集」を押します。

 

2.ファビコン画像のURLをコピーしておきましょう。


favicon4


 

 

 

 

 

 

 

 

 

上記画像の「ファイルURL」の部分になります。

 

3.header.phpに以下のような記述を追加します。

ダッシュボードから外観⇒テーマ編集⇒header.phpと移動します。

そして<head>と</head>の中に、以下のように記述を追加します。

 

<link rel=”shortcut icon” href=”作成したオリジナルのファビコン画像のURL”>

 

使用しているテンプレートによってはすでにこの記載がされている場合があります。

その場合はもともとある記載をまるごとコピーしてどこかに保存しておき、今回設定する記述に置き換えましょう。

またはもともとある記載を「<!–」と「–>」の記述で囲ってしまえばコメントアウトしたのと同じ意味になります。

そのうえで今回設定するURLを張り付ければ、作業完了となります。

 

 
まとめ
 

ファビコンを設定しておくことで、サイト閲覧者にサイトのことを印象付けることが出来ます。

また、すでにブックマークされている場合はサイトを見つけてもらいやすいという効果もあります。

自分のサイトをよりこだわった作りにしていくのであれば、ぜひファビコンもオリジナルなものに設定してみてはいかがでしょうか。

 
 
WordPress実践型メール講座で楽しみながら稼げるサイトを構築しませんか?

TOPICS用バナーのコピー

コメントを残す

サブコンテンツ

このページの先頭へ