ネットショップに実装したいファビコンの設置方法まとめ

ネットショップに実装したいファビコンの設置方法まとめ

ファビコン設置

ネットショップを作成するときに、デザインや体裁を整えたいという

店長さんがとっても多いので、簡単にできる施策を1つご紹介します。

※ご存知だったらごめんなさい。。。

 

デザインなんて領域にとらわれず、ブランディングからしっかり模索して

実施したい場合は、ブランディングの実績のあるショッピングカート

利用する場合もありますが、まずやっておきたい施策として

「ファビコンの設置」があります。

 

faviconファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。 favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

引用:Wikipedia

 

ファビコンの作成と設置方法

ファビコン設置例

ファビコンは、ネットショップを開いたときにタブの左側にアイコンとして

表示されます。

そのため、分かりやすく端的な内容であることが求められます。

 

また、お気に入り登録した際にお気に入りリストにファビコンが表示されることが

多いため、どんなサイトか分かりやすくするのも良いでしょう。

 

ファビコンの制作自体を代行している制作会社もあるようですが、

作成方法も設置方法もあまり難しくないので、自身でやってしまうことを

オススメいたします。

 

ファビコンの作成方法とは

ファビコンとして設置したいアイコンの作成方法は大きく2パターンあります。

ざっくり言ってしまうと、アイコン画像を自分で作るか、現在持っている画像を

ファビコン用にリサイズするかのいずれかになります。

 

ファビコンを無料で作成できるツール

ファビコン作成ツール

ツール名:favicon.ico Generator

 

favicon.ico Generatorを利用すると自分の思い通りのファビコンデザインを簡単に実施でき

その場で、適切なサイズで出力してくれます。

  1. 画面右側のカラーピッカーで色を選択し
  2. 画面中央で好きなようにお絵かきを行い
  3. 画面下部のプレビュー画面で実際の見栄えを確認し
  4. ダウンロードボタンを押してPC内にファイルを取り込みます

引用:ぼくんちのTV別館様

 

現在持っている画像をリサイズしてファビコンにできるツール

ファビコン画像にリサイズ

ツール名:ファビコンを作ろう

 

このツールを活用すると、自分が保有している200kb以下の画像を

ファビコン用の画像アイコンに簡単にリサイズすることができます。

 

ファビコンを設置しよう

ファビコン用のアイコン画像を作成したら、早速設置を試みましょう!

手順方法は以下の通りになります。

 

1:作成したファビコン画像を「favicon.ico」(icon(ICO)形式)で保存する

2:保存したファビコン画像をFTP等を利用してサーバーのドメイン直下へアップロード

3:htmlの記述を使ってヘッダ部分に記述を追記する

ヘッダ部分の<head>から</head>の間に以下のタグを書き込んでください。

<link rel="shortcut icon" href="[画像ファイルのURL]" />

本来は下記のタグが正しいらしいのですが、実際の挙動自体に差はありません。ただ「正しいHTML」にこだわる方はこちらを選んでください。

<link rel="shortcut icon" type="[画像のタイプ]" href="[画像ファイルのURL]" />

[画像のタイプ]に入る文字列は使用する画像ファイル形式によって以下のように変わります。適切なものを挿入してください。

ICO形式 image/vnd.microsoft.icon
PNG形式 image/png
JPEG形式 image/jpg
GIF形式 image/gif

 

引用:WEB memo

 

まとめ

無事ページ上に反映したでしょうか?

ファビコンの設置の有無は、売上に大きく影響する要因ではありませんが、

ネットショップのイメージを良くする上では、とても基礎的な施策になります。

 

お金をかけずに自分でできるデザインやページ改善はいくつも存在するので、

まずできる部分から実施していくようにしましょう!!

 

ネットショップの開業から売上アップを目指す方へ

記事をご覧いただきありがとうございます。

今後もネットショップの運営者の方々に向けて有益な情報を配信してまいります!

ページ構築カテゴリの最新記事