favicontitle

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

ファビコンを作ってブックマークやタブにオリジナルアイコンを表示させる方法のご紹介です!簡単に作れるのでお試し下さい
投稿日: 2012/02/13
最終更新日: 2015/12/29
 

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

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

ブックマークでの表示

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

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

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

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

それでは、作り方です。

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

ぷろめしのファビコン

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

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

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

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

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

Favicon Japan!!

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

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

ファビコン作成画面

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

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

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

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

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

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

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

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

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

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

ちなみに、ドット絵風にしないバージョン

ドット絵じゃないバージョンファビコン

あれ・・・?別にドット絵風にしなくてもよかったな・・・。
あっでも複雑なアイコンだったらドット絵風がいいはず!いいに決まってる!

 
最新情報をお届けします
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
Twitter / google+
よく検索されてる記事