ファビコンを作成してWebサイトのシンボルを設置しよう!

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

ファビコンを作成してWebサイトのシンボルを設置しよう!

ファビコンとは、サイト運営者がWebサイトのシンボルやイメージとして設置するアイコンの事です。

ファビコンはブラウザのタブに表示され、一目で識別できるシンプルなものです。シンプルながらブックマークした際に表示されたり、サイトやページの目印になったり、意外に重要なものです。

ファビコン(favicon)とは?

ファビコンとは?

ファビコン(favicon)は各ブラウザのタブの左側に表示されるアイコンです。Favorite iconの略語でinternetExplore5から追加された機能で、ブックマーク一覧を表示する時にWebアイコンが表示されるようになりました。

その後、各ブラウザでも表示されるようになり、サイトの個性を表すシンボルになりました。ファビコンを設置したからといって急激に訪問者が増える事はありませんが、サイトを印象づけたり、ブックマークの際には目立つものですので設置しましょう。

前までのSafariでは表示されなかったようですが、Safariのアップデートにより、設定すればファビコンが表示されるようになりました。ブラウザ毎に表示のされ方に大きな違いはありません。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

ファビコンを作成しよう!

ファビコンを作成しよう!

ファビコンはシンプルなデザインで多色使いは避けなければなりません。複雑な線や色味を多くして作成すると、ファビコンの表示サイズが小さい為に、せっかくのデザインが潰れてしまいます。ブラウザによって大きさも違います。ファビコンのファイル拡張子も様々です。

 

ファビコンを無料で作成してくれるサイトやツールもありますが、自分で画像ソフトが使える方はぜひファビコンを作成しましょう。

ファビコンのサイズは?

ファビコンはブラウザ毎に表示サイズが違いますが、各サイズを作成する必要はありません。作成するのであれば、現在推奨されている512px×512pxか700px×700pxのサイズで作成してから必要なサイズへ縮小しましょう。推奨サイズも常に同じではなく、変更されます。

 

最小の16px×16pxで作成してしまうと他のサイズにした際に画像が荒くなってしまいます。大は小を兼ねるといいますので大きいサイズで作成して適宜縮小しましょう。

大きな画像で作成したら、自動で各種のサイズを生成してくれる便利なジェネレーターもあります。

各ブラウザのファビコンのサイズ

ブラウザやタブレット・スマホのデバイスが増える毎に対応サイズも増えているようで、全種類用意しようとすると20種類ほど必要になります。優先的に用意するサイズは16px×16px・32px×32px・152px×152pxです。

 

サイズ(px)ブラウザ
16×16IEブラウザ
32×32Chrome・Firefox・Safari
64×64Windowsデスクトップ
152×152iOS・Android ホーム画面
180×180iPhone&iPad
256×256Android

 

上記のサイズは1例です。ファビコンはないと寂しいですが必須というわけでもないので、ファビコンのサイズを全種類用意する手間をかけるのであれば、その分コンテンツを充実させた方がよいでしょう。

ファビコンのファイル

ファビコンのファイル拡張子は「.ico.png.gif」で作成できますが、.png.gifに対応していないブラウザがありますので「.ico」で作成しましょう。ただし、フォトショップでは.icoで書き出しをする事がそのままではできないのでプラグインを追加する必要があります。プラグインのダウンロードサイト

プラグインを使用するのに抵抗がある・ファビコンに使用できそうな画像がすでにある場合は、ネット上に.jpg.png.gifファイルを.icoへ変換してくれる便利なサービスもありますので利用しましょう。.icoへ変換

ファイル名はこだわりがなければ「favicon.ico」にしておきましょう。

ファビコンを設置する

ファビコン用の画像を作成したら、ファビコンをサイトに反映させます。htmlのヘッダ内に記述をします。htmlの書き方などはこちらの記事を参考にしてください。作成したファビコンをimageフォルダへ入れます。

htmlの記述

<head></head>の間にファビコンの表示を記述していきます。ブラウザやブラウザのバージョンによって記述方法が変わります。表示させたいブラウザに合うコードを選択して記述しましょう。

IE11・Edge・Chrome・Firefox・Safari・Operaの場合

<link rel="icon" href="/image/favicon.ico">と記述します。上記の記述は「.ico」ファイルでIE11・Edge・Chrome・Firefox・Safari・Operaの時だけになります。

IE11は.pngや.gifファイルが使用できます。.pngや.gifファイルを使用する時は記述が下記のようになります。

<link rel="icon" type="image/png" href="/image/favicon.png">

<link rel="icon" type="image/gif" href="/image/favicon.gif">

サイズを指定する場合は下記のとおりです。

<link rel="icon" type="image/png" href="/image/favicon-16.png" sizes="16x16">

<link rel="icon" type="image/png" href="/image/favicon-32.png" sizes="32x32">

IE9の場合

.icoしか使用できません。記述にtype属性が必要です。<link rel="icon" type="image/vnd.microsoft.icon" href="/image/favicon.ico">

IE8以下の場合

.icoのみの使用でrel属性に”shortcut”を記述する必要があります。<link rel="shortcut icon" href="/image/favicon.ico">

ファビコンは必要なのか?

ファビコンは必要なのか?

ファビコンの作成と設置は大して手間はかかりません。ファビコンがあってもなくても閲覧者の増減に大きな影響はないですが、ファビコンが一番存在感を放つのは閲覧者のブックマークです。ファビコンを作成・設置しておけばリピート率は上がるかもしれません。ぜひファビコンを設置してください。

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree