ファビコン（favicon.ico）のつくりかた＆設定方法

カテゴリ：WEB基本　タグ：

WEBサイトには、ファビコン（favicon.ico）設定は当たり前です。

ここでは、ファビコン（favicon）って何？
どうやってつくるの？設定は簡単？という疑問を解決します。

ファビコン（favicon）は、Web サイトのシンボル画像（アイコン）です。
設定するとブラウザが認識して、アドレス欄、タブ、お気に入り等にファビコンが表示され、ユーザーが直観的にサイトを認識することが可能になります。
（表示適用場所は、ブラウザによって異なります。）

●Google Chromeの表示

●Internet Exprolerの表示

ファビコン（favicon）が設定されていないサイトは、ほとんど見かけません。
設定されていないサイトは、信頼性に欠けるように感じるユーザーもいるのではないでしょうか。

ということで、ファビコン（favicon）をつくっていきます。

手順は以下の通りです。4STEPです。

（1）ロゴ画像を用意する

ファビコンは正方形の画像です。正方形のロゴ画像を準備してください。
小さな画像（16px×16px）表示になるため、企業名やサービス名は入れても読めませんので注意が必要です。

今回はこのようなpng画像を用意しました。（ファイル名称は、favicon.png）

（2）形式icoに変換する

今回は、Favicon Generatorのサイトを利用します。

「ファイルを選択」ボタンを押して、（1）で用意した画像を開きます。

次に、「Create Favicon」ボタンを押してファビコン（favicon）を生成します。

ファビコン（favicon）画像が表示されている右側の「Download the generated favicon」をクリックすると、ico形式のファイルがダウンロード出来ます。

（3）ファビコン（favicon）をサーバーにアップする

ico形式のファビコン（favicon）をサーバーにアップしましょう。

アップ場所は、ルート（root）ディレクトリがいいでしょう。
ルートディレクトリにfavicon.icoをアップするだけで、ファビコン（favicon）を認識してくれるブラウザもあります。

（4）HTML内にファイル場所の記述を追加する

ヘッダにfavicon.icoファイルの場所を以下のとおり、記述します。

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>

href=”　”内は、必要に応じて変更してください。絶対パスでもOKです。

無事に表示できました！

ブラウザによっては、pngやgif形式にも対応しているようですが、幅広いブラウザに対応するには上記の方法が良いみたいです。