BLOG

BLOG


IT導入補助金 バナー

「IT導入補助金」を活用してWebサイト制作・業務効率化しませんか?

IT導入補助金 バナー

「IT導入補助金」を活用してWebサイト制作・業務効率化しませんか?


Webクリップアイコン&ファビコン(favicon)の設置

favicon-clickicon-eye

Webサイトを作成した際、お気に入りリストやブラウザのタブ、スマホの待受画面に表示されるアイコンの設定は忘れていませんか?

近年、スマートフォンユーザーが圧倒的に多いため、アイコンの設定はWebサイト作成には欠かせない存在になりました。
今回はそんなうっかり忘れがちなファビコンとWebクリップアイコンについて紹介します。


Webクリックアイコン・ファビコンとは

Webクリックアイコンとは

スマートフォンやタブレットなどで、Webサイトのショートカットをホーム画面に追加する場合に、ホーム画に表示されるアイコンのことを言います。


webclickicon-01


Webサイト制作時に、Webクリックアイコンの設定をしていない場合にホーム画面にショートカットを追加すると、Webサイトのスクリーンショットになります。
その場合は見た目がいまいちですし、あとから見たときになんのWebサイトかわからなくなるため、好ましくありません。


ファビコン(favicon)とは

favorite icon(フェイバリット・アイコン)の略です。
Webサイトと開いた際に、ブラウザのタブに表示される小さなアイコンのことをいいます。

favicon_01


ファビコンを設定しておくことで、複数のタブを開いているときに何のページだったか判断しやすい目印になります。

また、ユーザーがお気に入り登録をしてくれた場合も、ファビコンがあるほうが見つけやすくなるため、Webサイト作成には必須の設定です。


Webクリックアイコン・ファビコンの画像サイズ

Webクリックアイコンの画像サイズ

  • 57px×57px

ファビコン(favicon)の画像サイズ

  • 16px×16px
  • 32px×32px
  • 48px×48px
  • 64px×64px

ファビコンは記の他のサイズを利用される場合もありますが、一般的に上記4サイズがあれば問題ありません。
それぞれ、ブラウザのタブ、ブックマークであったり、Windowsのショートカットアイコンなどに適したサイズです。


Webクリックアイコン・ファビコン設定方法

アイコン画像の簡単な作り方

Webクリックアイコン・ファビコンを設置するに当たりは何種類かサイズを作成する必要があるため、一枚一枚作っていると少し手間がかかります。

そこでこのような一括で複数のサイズの画像を作成してくれるツールを使用すると便利です。

favicon generator (https://ao-system.net/favicongenerator/)

使い方は、1枚の画像をアップするだけです。


設定方法

作成した画像を、サーバーのルートディレクトリに設置します。
(配置した場所のパス(ファイル名)と画像名があれば設置できます。)

その後、\htmlのhead内に下記のコードを追記します。

基本のコード

■Webクリックアイコンのコード
<link rel="apple-touch-icon" href="保管場所のパス / 画像名/">
■ファビコンのコード
<link rel=”shortcut icon” href=”保管場所のパス / 画像名/">

Webクリックアイコン・ファビコン(favicon)の設置をお忘れなく

Webクリックアイコン・ファビコン設置は、細かい部分ではありますが、企業ブランディング(コーポレート・ブランディング)の一つです。

設置することでWebサイトやお店をイメージしやすくなり、覚えてもらいやすい・再訪してもらいやすくなります。
また、しっかりとしたWebサイトであると認識されやすいため信頼度も上がるでしょう。
これらにより、WebサイトのPV数アップにつながるかもしれません。

過去に作成したWebサイトをなども含めて、忘れずに設置するようにしましょう。



一覧に戻る

TO PAGE TOP

close