【初心者でも簡単】ホームページにファビコンやアイコンを作成・設定する方法【徹底解説】

ブログ運営

【初心者でも簡単】ホームページにファビコンやアイコンを作成・設定する方法【徹底解説】

まず、はじめに!

ファビコン(favicon)(アイコン)とは、Webブラウザで新規タブを開いたときにタブに表示される画像またはWebページをブックマークした際に表示される画像などをいいます。

また、iOSやAndroidでホーム画面に保存した時に表示される画像、Windows8や10でスタート画面にピン留めした時の画像など、Webサイトでは様々なファビコン(アイコン)画像に関する設定が必要です。

さらに、OSやブラウザのバージョンアップによって書き方が異なるケースもあり、正しい書き方も常に変化してしまっています。
そんなファビコン(favicon)(アイコン)の概要や表示される場所・作成方法・設定の方法などを解説いたします。

目次

ファビコン(アイコン)とは?

ファビコン(favicon)とは、「Favorite icon(お気に入りのアイコン)」が派生したIT・Webマーケティング用語で、internetExplore5から追加された機能です。インターネットに接続し、Googleなどのブラウザを開いた際にブラウザのタブに表示されます。

そのほかにも、スマートフォンでWebページを使用ブラウザの「お気に入り」や「ホーム画面」に設定したときにも表示されます。

ブラウザを開いたときにタブに表示されるファビコン(favicon)やスマートフォンで表示されるアイコンは以下の画像です。

ファビコン(アイコン)設定の利点とは?

ファビコン(アイコン)は、サイトのブランディングを高めるための絶好のツールです。この特徴をより深く理解するために、以下 2 つの利点を頭に入れておきましょう。

一目で Web サイトを識別できる:
たとえば、多くの人が日頃から利用している検索エンジン Google のファビコンは、Google の頭文字「G」をモチーフにし、社名ロゴのデザインや色合いを取り入れたアイコンが使われています。Wix の場合は、社名そのものをファビコンとして使用しています。このように、独自のファビコン(アイコン)を設定することで、ユーザーが一目でサイトのブランドを識別でき、印象に残りやすくなります。

ユーザビリティを向上できる:
インターネットで検索をしながら作業をしていると、沢山のブラウザタブが開きっぱなしになりがちです。ファビコン(アイコン)を設置していないと、このような状況においてサイトが埋もれてしまい、再度、目当ての Web サイトに戻ることは容易ではないでしょう。ユーザーが Web サイトを識別する要素となるファビコンを設置することは、よりユーザビリティに配慮したサイトを作成できることに繋がります。

ファビコン(アイコン)設定の注意点

複雑なデザインは避ける
何より優先したいのがシンプルなデザインにすることです。ファビコンは小さく表示されるため、複雑なデザインを入れ込んでもほとんど見えません。ユーザーに判別してもらいにくくなり、ファビコンの意味を成さない状態は避けましょう。どの程度シンプルにすれば良いのか、他企業のファビコンを見ながら研究してみましょう。

画像は正方形にする
ファビコンもアイコンも基本的には正方形で表示されるため、画像は正方形で作成しましょう。それぞれのパーツは長方形などでも大丈夫ですが、この点を前提と意識しておいてください。

iOSやSafariでは角が丸くなることに注意
上記に加えて、Apple製品での表示にも気を配らなければなりません。iOSやSafariだと、ファビコンの角が丸く表示されます。サイズいっぱいいっぱいのデザインだと、角が削れて見た目が崩れてしまいます。
なのでデザインする時には余白を作っておくのが大事です。

ファビコン(アイコン)のサイズは?

ファビコンはブラウザやタブレット・スマホのデバイスによってサイズが異なるため、複数のサイズがあります。

以下は代表的なサイズになります。
16px × 16px:Edgeのタブ
24px × 24px:Edgeのピン留め機能
32px × 32px:Chrome、Firefox、Safariなどのタブ
48px × 48px:Windowsのサイトアイコン
64px × 64px:高解像度のWindowsサイトアイコン
180px × 180px:iOS、 Androidのホーム画面

さらにデバイスの多様化により、ファビコンのサイズも多種多様になってきました。
全て用意しようとすると20種類以上あるといわれています。

これら全てを作って設定するのはとても大変なので、最低限必要な以下の3サイズを用意しましょう。
・16px × 16px
・32px × 32px
・180px × 180px (apple-touch-icon)

ブラウザのタブやアドレス欄には「16px × 16px」や「32px × 32px」で表示されることが多いため、この2種類を用意します。
また、スマートフォンに対応させるために「180px × 180px」も用意しましょう。
小さい画像を大きくすると画質が荒れてしまいますが、180pxの大きい画像を用意することで180px以下になったときは自動で縮小されるため、画質が荒れる心配がありません。

WordPressの付属機能を使う場合
WordPressの付属機能を使って設定する場合、ファビコンとアイコンは統一した1つの画像でOKです。
サイズは512×512px以上、形式はPNGのものを用意してください。

Wixの付属機能を使う場合
Wixの付属機能を使う場合、画像は以下の要件に合わせて用意しましょう。
ファビコン:16×16px、JPEGかPNG
アイコン:192×192px推奨、JPEGかPNG

はてなブログの付属機能を使う場合
はてなブログの付属機能を使う場合は、WordPressと同じくファビコンとアイコンは統一した1つの画像でOKです。
192×192px以上の、JPEGかPNGで画像を用意してください。

Webサイトに必要なアイコン画像の種類

紹介しているサイトによって必要なアイコン画像に関する説明は異なることもありますが、下記の3つを設定をしておけば問題無いでしょう。

ファビコン
ブラウザのタブなどに表示されるWebサイトごとに設定可能なアイコン画像です。ファビコンを設定しなくても支障はありませんが、タブ表示したときやブックマークした時にWebサイトを探しやすくなるため、ユーザビリティを考えると必ず設定しておいた方が良いでしょう。

apple-touch-icon(Web Clipアイコン)
Webサイトをホーム画面に追加した時に、アプリと同じようにアイコン表示される時の画像です。スマホ用アイコンが設定されていないと、ページのサムネイルがアイコン画像に使用されますが、それだと使いづらいため、やはりユーザビリティを考えると設定しておいた方がベターです。

Windows用アイコン
スタート画面にWebサイトをピン留めした時に表示されるアイコン画像です。ファビコンやスマホ用アイコンと比べると使用頻度は低くなるので面倒であれば設定しなくても問題ないと思いますが、余裕があれば設定しておいた方がいいですね。

ファビコン・アイコンのサンプルコード

Webサイトに必要なファビコンや各種アイコンの設定内容をお見せしてしまいますが、必要な設定は下記のようになります。

<!-- ファビコン -->
<link rel="icon" href="/favicon.ico">

<!-- スマホ用アイコン -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Windows用アイコン -->
<meta name="application-name" content="{サイト名}"/>
<meta name="msapplication-square70x70logo" content="small.jpg"/>
<meta name="msapplication-square150x150logo" content="medium.jpg"/>
<meta name="msapplication-wide310x150logo" content="wide.jpg"/>
<meta name="msapplication-square310x310logo" content="large.jpg"/>
<meta name="msapplication-TileColor" content="#FAA500"/>

思っていたよりもシンプルだと思った方が多いのではないでしょうか?様々なサイズを設定する方法もありますが、最近では最大サイズの画像を1つアップロードしておけば、後は端末側でよしなに表示してくれるため、サイズはあまり気にしなくてもよくなっています。
Windows向けの設定は、必ず必要という訳ではありません。手間だという方は、ファビコンとスマホ用アイコンの2つだけ設定しておきましょう。

ファビコン(アイコン)の作成方法

ファビコンデザインのコツ
ファビコンはサイズ的に大きくないため、細かなデザインを施すのではなく、小さくても見やすく分かりやすいシンプルなデザインにすべきです。

また、ファビコンを設置していないサイトは、グレーの地球儀マークが表示されます。ユーザーの視線を引くという点で、グレーと対照的なトーンの色相を取り入れることにより、よりユーザーの目に止まりやすくなるでしょう。

しかし、ファビコンの役割は、先述のとおりサイトのブランディングを高めることです。そのため、ファビコンを単に目立たせるということではなく、作成したサイトのイメージとかけ離れることなく、一貫性のあるデザインにする必要性があります。

3 つのコツを押さえ、次に進みましょう。
⚫︎ 極力シンプルに
⚫︎ ユーザーの視線を引くことを意識
⚫︎ サイトのイメージと一貫性を持たせる

それではファビコン(favicon)(アイコン)を実際に作成する方法について解説していきたいと思います。一般的な作成の流れを押さえて、Webページ・サイト運営にファビコン(favicon)を取り入れてみましょう。

ファビコン(favicon)は .ico形式のファイルで作成する
ファビコン(favicon)は一般的には「16px × 16px」のサイズで使用されることが多いですが、表示される場所によっては「32px × 32px」や「24px × 24px」で使用されることもあります。

そのため、複数サイズの画像をひとつのファイルにまとめることができる「.ico形式」に変換し使用するべきでしょう。「.ico形式」の画像ファイルを使用することで、HTMLに記述する際に設定の手間が省けます。

簡単に作成できるツールを使う
ファビコン(favicon)はPhotoshopなどのツールでイチから作らなくても簡単に作成することのできるツールがいくつもあります。
ネットで検索して便利なツールを使うのがよいでしょう。

ファビコン(favicon)(アイコン)は検索結果画面の先頭に表示され、SEO流入にも大きな影響を与えることが予想されます。

そのため、「Webページ全体のイメージと統一性がある」「可視性の高いシンプルなデザインにする」「なるべく目を引くような色合いにする」など、情報を検索するユーザー視点に立ったファビコン(favicon)(アイコン)作成が必要でしょう。

ファビコン(アイコン)設置方法

では、最後に作成したファビコン(favicon)(アイコン)を新規タブやGoogleの検索結果画面に表示させるまでの設置方法を解説したいと思います。ファビコン(favicon)画像を作成したら、設置まで丁寧に行ないましょう。

HTMLのヘッダー内に指定のコードを記述する
ファビコン(favicon)画像を作成したら、指定WebページのHTMLファイルのヘッダー部分に記述していきます。なお、ファビコン(favicon)を表示させるブラウザによって、HTMLの記述方法が異なりますので、注意してください。

まず、表示ブラウザが「Chrome・IE11・Firefox・Safari・Opera・Edge」の場合、以下のコードをHTMLのヘッダー部分に記述します。
<link rel=”icon” href=“/image/favicon.ico”>
上記ブラウザでは、ファビコン(favicon)画像の参照元ファイルを「.ico形式」にします。なお、IE11に限っては、PNG形式やGIF形式をファビコン(favicon)画像に用いることもできます。
<link rel=”icon” type=”image/png” href=“/image/favicon.png”>
<link rel=”icon” type=”image/gif” href=“/image/favicon.gif”>
次に表示ブラウザが「IE9」の場合は、以下のコードをHTMLのヘッダー部分に記述します。
<link rel=”icon” type=”image/vnd.microsoft.icon” href=“/image/favicon.ico”>
IE11と違って、「type属性」を記述する必要がある点が注意点です。

最後に表示ブラウザが「IE8以下」の場合は、以下のコードをHTMLのヘッダー部分に記述します。
<link rel=”shortcut icon” href=”/image/favicon.ico”>
ルートディレクトリに画像をアップロードする方法
ますはWebサイトのルートディレクトリに画像をアップロードする方法です。
先ほどファビコンジェネレーターで作った以下の素材
・favicon.ico
・apple-touch-icon-180x180.png

を、名前を変えずにルートディレクトリへアップロードします。これだけでOKですが、画像のファイル名を変えたりルートディレクトリ以外に画像を置いたりすると、設定が反映されない点に注意してください。

headタグ内にHTMLを記述する方法
Webサイトのheadタグ内にHTMLを記述する場合、以下のコードを該当箇所へコピペしてください。
アイコン
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-180x180.png">

ファビコン
<link rel="icon" type="image/x-icon" href="./favicon.ico">
この方法なら、ルートディレクトリ以外に画像を置いても構いません。
WordPressの付属機能で設定する方法
自社のWebサイトをCMSで構築しているならより手軽に設定できます。まずはWordPressの場合。手順は以下の通りです。

外観
↓
カスタマイズ
↓
サイト基本情報
↓
サイトアイコン
↓
用意した画像をアップロード
ただし、ver.4.3以降のみ対応である点に注意してください。

Wixの付属機能で設定する方法
Wixでの設定手順は以下の通りです。
【ファビコン】*プレミアムプランのみ
「サイトダッシュボードの設定」
↓
「ファビコン」の横にある「管理」をクリック
↓
「画像をアップロード」
↓
ファビコンにしたい画像を選ぶか、新しく画像をアップロード
↓
「画像を追加」をクリック
【アイコン】*無料プランでも設定可
画像をサイトにアップロード
↓
「サイトを管理」
↓
「SEO」
↓
「SEO詳細設定」
↓
「エディタから追加するにはこちらをクリックしてください」の「こちら」をクリック
↓
「ヘッダーコード - メタタグ」下に次のコードを記述
Apple機器用
<link rel="apple-touch-icon" sizes="180x180" href="CHANGE_THIS_TO_IMAGE_FULL_URL.png" />

Android機器用
<link rel="icon" type="image/png" href="CHANGE_THIS_TO_IMAGE_FULL_URL.png" sizes="192x192">

ファビコン(アイコン)まとめ

いかがでしたか?
ファビコン(アイコン)は小さいながらも存在感は大きく、Web サイトのシンボル的な存在です。ブランディング強化を目指したいという方は、この機会にファビコン(アイコン)を設置してみましょう。