自分オリジナルのファビコンを作ってニヤニヤしよう！ワードプレスでも簡単に設定出来ますよ！

当たり前のようにブックマークすると表示される小さなアイコン。
大手サイトやちょいと作り込んでいるサイトであれば必ずといっていい程表示されます。

1 ブックマークされると左にファビコン(アイコン)が表示される
2 ページ閲覧時のタブにも表示される
3 表示したいアイコンの画像を作ろう！
4 出来ればドット絵風にしてみるといいかも！
5 出来上がったらFavicon作成サイトへGO！
6 画像を指定してボタンを押すだけ簡単作成！
7 試しに作ってみようぜっ！
8 早速WEBサイトに反映させてみよう！
9 ちなみに、ドット絵風にしないバージョン

ブックマークされると左にファビコン(アイコン)が表示される

ブックマークでの表示

このアイコンの名前を「ファビコン-Favicon」と言います。(ブックマークが適当なのはご愛嬌)

小難しい説明は面倒なので省きますが、アドレスバーに表示されたり、
ブックマークした時のアイコンとして表示されたりするよく目にするアイコンです。

ページ閲覧時のタブにも表示される

アイコンがブックマークバーに表示されるだけで目を引くのでユーザーも探しやすくなります。
あと、なんだかオリジナルアイコンが表示されると制作側も「ニヤニヤ」できます(^O^)

それでは、作り方です。

表示したいアイコンの画像を作ろう！

ぷろめしのファビコン

まず、ファビコンにしたいアイコン(画像)をJpg・PNG・gifなどで作成します。
サイズは、16px*16px位で。小さく表示される物なのでシンプルなデザインにしましょう。
詰め込みすぎると画像が荒れます(゜.゜)

出来ればドット絵風にしてみるといいかも！

作った画像をフォトショップに読み込ませると小さく表示されます。
拡大すると汚いドット絵みたいになっているので上の画像のように整えてあげましょう。

ドット絵風にすることで表示したときにクリアに見えます。別にしなくてもいいですがねｗ

出来上がったらFavicon作成サイトへGO！

Favicon Japan!!

ファビコンを自分のPCで作ろうとするとツールをインストールしなきゃならんのでめんどくさいのです！だったらファビコン作成サイトがあるので頼っちゃおう！

画像を指定してボタンを押すだけ簡単作成！

ファビコン作成画面

ページ中段にあるファビコン作成枠でファビコンにしたい画像を指定してボタンを押して下さい。
簡単にファビコン化してくれますわよ！

ファビコン作成サイト：Favicon Japan

試しに作ってみようぜっ！

ファビコン作成後画面
iconファイル画像

DownLoadのボタンを押して出来上がったファビコンファイルを保存しましょう！
保存すると変な感じなファイルアイコンが保存先に現れますが、これがファビコンです！

早速WEBサイトに反映させてみよう！

ファビコンの設定は、HTMLの内に記述します。

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;link rel=&quot;shortcut icon&quot; href=&quot;ファビコンのURL&quot; type=&quot;image/ico&quot; /&gt;
&lt;title&gt;タイトルだべさ&lt;/title&gt;
&lt;/head&gt;

これであなたのサイトにもファビコンが表示されることでしょう！
ちなみに、WordPressに表示するならheader.phpにheadの記述があるのでそこに追記しましょう！
管理画面からなら、「外観」＞「編集」＞「ヘッダーheader.php」でOK！

ファビコンを作って表示させる方法でした！