2016/01/27

ホームページのファビコン(アイコン)を作ってみる

ホームページを開くとタブに




サイトのロゴなどが入れられているのを見るとイイなーと思ってみてました。

ブックマークやお気に入りしても、一目でわかるので便利ですよね。 



私も作ってみました!(・∀・)。




ファビコンとは・・・

favorit icon(フェイバリット アイコン)=お気に入りアイコン
ウェブページのイメージアイコンで、ブックマークなどしたときに見分けることが容易にできる




----- 拡張子 -----

「.ico」、「png」、「gif」使用できますが、利用できないバージョンがあったりと

一般的には「.ico」です。


---- 作成方法 ----

フリーソフトでは、「GIMP」がおすすめ。


変換ソフトでは、「ファビコンfavicon.icoを作ろう」がおすすめ。
・.jpg、.png、.gif、.bmp画像ファイルを.icoへ変換できます。

ただ、画像が細かいとキレイにつくっても

96×96サイズを16×16へ変換しました。

上記の右側のように絵がつぶれてしまうのでご注意を
(シンプルが一番!)



---- サイズ -----

16×16にしました。

他にあったら便利サイズ24×24、32×32(表示場所によってサイズが必要です)。


---- サーバー ----

フリーソフトでは、「FFFTP」がおすすめ。

画像をアップロードします。


---- HTML ----

<head>~</head>内にコードを入れます。

 <link rel="shortcut icon" href="ファイルURL">

 <link rel="icon" href="ファイル名" type="img/gif">


例)href="favicon.ico"
※IE用とFirefoxアニメーション不要の場合は、一行目のみでok。