記事の詳細

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

 

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

 

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

ファビコンとは

 

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

 

 

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

ファビコン未設置

 

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

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

 

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

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

ファビコンの拡張子は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など。
できていると、こんな感じにファビコンが反映されます(*’▽’)

ファビコンができたときの表示

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

 

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

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
吉見 千香
WEBデザイン職業訓練校卒の新米WEBデザイナー。一児のママで毎日育児に奮闘しながらWEBデザインとマーケティング、SEOについて学んでます。日々壁にぶち当たりながらレベルアップ中!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る