マルチアイコン（ファビコン）って、重要？作り方や設置方法がわからない！そんなときに役立つ情報をお届けします(/・ω・)/

 

こんにちは。木曜担当の吉見です。

 

サイトを閲覧している際によく見かけるサイトのアイコンのようなもの、
これを「ファビコン」と言いますが、なにげなく当たり前のようにあるこのファビコン。
（写真はインクループのファビコンです）

 

設置していないサイトと、設置してあるサイトを比較すると、
お店をイメージさせやすくする＆個性をアピールできる＆覚えてもらいやすいなどの理由から
ファビコンの設置をおススメしています。（信頼度も上がりやすいと思います）

 

 

ファビコンを設置していないと、こうなります。
（私のテストサイトですが、ファビコン未設置です）

 

ファビコンはわかりやすくてシンプルが一番

よし！ファビコン気合入れて作ろう！と気合いを入れたはいいものの、
細部にまでこだわると逆に見ずらい現象が起きてしまいます。

 

小さな枠にどれだけわかりやすく見せるかが大切になってくるのです。

そのため、小さくても目で見えて確認できるくらいわかりやすいシンプルなデザインが好まれます。

ファビコンの拡張子はicoで作成する

小さな画像であればgifやpngでもファビコンの設置ができることが多くなってきましたが、
IE（Internet Explorer）ではファイルの拡張子がicoのものでないと表示できません。

 

そのため、IEを使っているインターネットユーザーにためにも
ファビコンのファイルの拡張子はicoで作成しましょう。

 
～マルチアイコンで、環境に合わせた表示が可能～
ファビコンには、一つの大きさのサイズが表示できる「シングルアイコン」と、
複数の環境に合わせてサイズ表示ができる「マルチアイコン」があります。

基本的には大きさを変えるだけでいいので、少しの手間で複数のサイズ表示に対応できるマルチアイコンがおススメです♪

 

ファビコンの作り方

～作るべきファビコンのピクセルサイズは？～
用意したほうがよいとされるファビコンのサイズは、
16×16、32×32、48×48、64×64の4つを推奨します。

 

～ファビコンはなにで作成する？～
イラストレーター、フォトショップなど、画像編集ソフトで作成できます。

 
～ファイル形式は？～
画像編集ソフトで保存するファイル形式は、背景を透過できるPNGファイルで保存するのがおススメです。

16×16、32×32、48×48、64×64の4つのサイズをこのように作っておきます。

 

 

～書き出した画像をicoに変換する～
複数のサイズで表示ができるマルチアイコンを作成するために、
今回は無料のWEBサービスを使ってicoに変換してみます。
https://ao-system.net/alphaicon/index.php

画像ファイルを選択から、作成した画像を選択します。

（今回はサイズを4枚作成したため、4つ選択した状態にします。）
プレビューで確認後、アイコン作成をクリックする。

アイコンをダウンロードをクリックする。
これで完成です！

 

ファビコンの設置方法

ファビコンができたら次はサイトに設置していきます。
アップロードをする場所は、サーバーのルートディレクトリに設置します。
（一番上の階層になります）

※私のサイトの場合は、テーマの中のimagesの中にファビコンを置いています。

ルートディレクトリに設置できない場合などはhead内に下記のコードを入力すればOKです。
<link rel=”shortcut icon” href=”http://ファイルのパス/favicon.ico” />

下記は私のテストサイトのファビコン設置画像です。（header.phpのhead内に設置しています）

～ブラウザごとに確認してみよう～
設置が完了したら、ブラウザごとにきちんと見えるか確認してみましょう。
chome、Firefox、Internet Explorer、Safariなど。
できていると、こんな感じにファビコンが反映されます(*’▽’)

愛犬の肉球をイメージして作りました♪(*´ω｀)かわええ…

 

ぜひ試してみてくださいね！