Webサイトのアイコンを設定しよう!favicon(ファビコン)の作成方法

Webコミュ

favicon(ファビコン)とは、アドレスバー、タブ、お気に入り(ブックマーク)に表示されるアイコンのことです。

faviconを設定することで、あなたのWebサイトが見つかりやすくなります。

Webサイトを制作したら、faviconの設定を行いましょう。

favicon-example1▲アドレスバーに表示されているfavicon

favicon-example2▲タブに表示されているfavicon

favicon-example3▲お気に入り(ブックマーク)に表示されているfavicon

ちなみに、faviconとは 、「favorite icon(フェイバリット アイコン)」の略語です。

favicon(ファビコン)の設定方法

さっそく、faviconの設定方法を見ていきましょう。

1、Webサイトの独自アイコンを作成しよう

まずは、faviconのデザインを考えましょう。

画像編集ソフトを使って、Webサイトの独自アイコンを作成してください。

作成する画像の形式は、次の通りです。

ファイル形式 PNG(拡張子.png)
サイズ(3種類) 16px × 16px
32px × 32px
48px × 48px
ファイル名 好きな名前を付けてください

Webコミュでは、次のような独自アイコンを作成しています。

favicon-icon-webcommu1▲16px × 16px

favicon-icon-webcommu2▲32px × 32px

favicon-icon-webcommu3

▲48px × 48px

補足:サイズを3種類作成する理由

サイズを3種類作成する理由は、どの場面でも綺麗に表示させるためです。

それぞれのサイズの使用例は、次の通りです。

「16px × 16px」は、あらゆる場面で使われる標準のサイズです。どの場面でも綺麗に表示させる必要がないなら、このサイズ一つだけでも問題ありません。

「32px × 32px」は、Retinaディスプレイ、WindowsXPのショートカットアイコンなどで綺麗に表示させるためのサイズです。

「48px × 48px」は、Windows Vista以降のショートカットアイコンなどで綺麗に表示させるためのサイズです。

favicon-example4

他にも、「64px ×64px」、「128px ×128px」、「258px ×258px」などのサイズを使う場面もありますが、使う場面は限られてきます。

2、「ICO形式」に変換しよう

faviconの設定には、「ICO形式」の画像ファイルを用いるのが一般的です。

先ほど、作成した3つの「PNG形式」の画像ファイルを1つの「ICO形式」の画像ファイルに変換します。

では、「ICO形式」に変換するために、次のWebサイトに移動しましょう。

favicon-maker1ICO形式に変換するためのサイトへはこちらをクリック』してください。

次に、「ファイルを選択」ボタンをクリックしてください。

favicon-maker2

「ファイルを選択」ボタンをクリックすると新しい画面が開きます。
先ほど作成したWebサイトの独自アイコンを選択してから、「開く」ボタンをクリックしてください。

favicon-maker3

同様の手順でサイズの異なる3つの画像ファイルを選択しましょう。

favicon-maker4

「アイコン作成」ボタンをクリックしてください。

favicon-maker5

次のような画面が表示されれば、OKです。

favicon-maker6

Webサイトの独自アイコンを透過しているのであれば、背景色も透過を選択しましょう。

favicon-maker7

最後に「アイコンダウンロード」ボタンをクリックしてください。

favicon-maker8

「favicon.ico」という名前のファイルが保存されます。

favicon-maker9

3、faviconをWebサイトに設定しよう

「favicon.ico」の画像ファイルができれば、後は設定だけです。

設定方法は、2通りあります。

方法1:「favicon.ico」をルートディレクトリにアップロード

こちらが、おすすめの方法です。
先ほど作成した「favicon.ico」を名前を変えずに、ルートディレクトリにアップロードします。

favicon-up

設定はこれだけです。しばらくすると、faviconが表示されるようになります。

※ルートディレクトリとは、最上階層のフォルダです。一般的に「/」と表示れており、そこにはトップページが置かれています。

方法2:headタグ内に記述

もう一つは、HTMLファイルのheadタグ内にfaviconを設定するための記述をする方法です。

まずは、先ほど作成した「favicon.ico」を画像フォルダなどにアップロードしてください。

次の記述をheadタグ内にしてください。

<head>
(省略)
<link rel="shortcut icon" href="http://sample.com/image/favicon.ico" />
(省略)
</head>

「http://sample.com/image/favicon.ico」の部分は、アップロードした「favicon.ico」ファイルの場所を指定してください。

これで、favicon(ファビコン)の設定は、終わりです。

まとめ

お気に入り(ブックマーク)から、たくさん開いているタグの中から、目的のWebサイトを探すとき、アイコンが表示されていると探しやすくなります。

あなたのWebサイトのイメージに合ったfavicon(ファビコン)を是非、設定してください。

また、iPhone・AndroidのWebクリップアイコン(スマホのホーム画面に設置したブックマーク)にも、Webサイト・ブログの独自アイコンを付けたいなら、【スマートフォン】iPhone・Androidのホーム画面にWebクリップアイコンを表示させる方法を参考にしてください。

Webコミュ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

サラリーマンをしながら、当ブログを運営しています。今まで、数々のWebサイト・ブログを構築してきました。このブログでは、今までの経験で得た知識を活かし、Web制作・SEO関連を中心に、最新のIT関連ニュースを発信していきたいと思います。