ネットショップのファビコン「favicon.ico」を設定して印象に残るショップにしよう

公開日: 

ネットショップのファビコン「favicon.ico」を設定して印象に残るショップにしよう
運営しているショップページにファビコンは設定していますか?

faviconとはこんな感じのです。
楽天、Yahooのファビコン
お気に入り(ブックマーク)やブラウザのアドレス欄やタブに表示されるアイコンのことです。知っている人にはとっては何でもない内容ですが、知らない方はぜひ、設定してみてください。

スポンサードリンク

ショップのファビコンを作成、設定してみよう

最近のブラウザはタブ表示されるものが多く、気がついたら大量のタブを開いてたなんてこともよくあることだと思います。開きすぎたタブの中から目的のサイトに切り替える際には、わかりやすいファビコンを設定しておくとこは、細かいことですが大切ではないでしょうか。

他にもお気に入りのリスト一覧から目的のサイトを探す際には目立つファビコン設定してある方が探しやすいですよね。また、このファビコン見たことあるなと覚えてもらえるかもしれません。

ファビコンのギャラリーサイト

X-Icon Editor
ファビコンギャラリー.com -Webサイトのファビコンを集めたサイト-

ファビコンのギャラリーサイトも紹介しておきます。作成する際の参考にしてみてください。

ファビコンを簡単に作成出来るWebサービス

X-Icon Editor

ファビコンを簡単に作成出来るWebサービス
X-Icon Editor

X-Icon Editorのサイトイメージ
0から作成することも可能ですが、元ファイルとなる画像ファイルを準備すれば簡単に作成することが可能です。画像ファイルjpg, gif, bmp, png形式のファイルに対応しています。

元画像のインポート

取り込んだ情報を元に微調整が可能ですが実際に表示されるサイズは小さいので、あまり細かく気にする必要はないかと思います。
ファビコン編集画面

作成したファビコンのプレビュー機能

プレビューボタンをクリックすると、作成したアイコンの各サイズごとの表示を確認することが出来ます。
ファビコンのプレビュー1
ファビコンのプレビュー2

うーん、元画像に使用したファイルが細かかったので、ファビコンにするには向いてない画像だったかもしれませんね。でも赤、黒、白の雰囲気は出ているのでまぁ、良しとします。

楽天、Yahooのファビコン
普段はあまり気にすることのないファビコンかもしれませんが、楽天やYahoo!ショッピングのファビコンは文字を使って1文字でサイトを表現していますね。

ファビコンの設定方法について

作成したファビコン用のicoファイルを実際にページに設定する方法ですが、2つの方法があります。

  • ドメインのルートに「favicon.ico」をアップロードする方法
  • ドメインのルートディレクトリにある「favicon.ico」がファビコンとして認識されるので、ファイルをアップするだけで設定完了です。

  • <head>内に<link rel=”shortcut icon” href=”設置Path/favicon.ico”>を記述する方法
  • ページのソース内にファビコンの位置を記述する方法です。favicon.icoは任意の名前でも設定可能です。

のいずれかの方法で設定が可能です。

ネットショップの場合は、ドメインルートに設定が出来ないケースもあります。楽天やYahooなどのモールの場合は、楽天GOLD、Yahooトリプルでトップページを作成している場合は設定が可能ですが、商品ページ、カテゴリページなどには設定出来ません。
(厳密に言うと、商品ページ、カテゴリページの<head>内の記述が変更出来ないので設定出来ません。本来は<head>内に記述するべきものですが、<head>以外でファビコン指定の記述をすれば表示することは出来るかもしれません。)

利用している仕組みによっては、管理画面からファビコンの設定が出来るようになっているかもしれません。
ショッピングカートなら【MakeShop】ファビコンの登録ができるようになりました。
目立つファビコン(favicon)を作る。|FutureShop2 虎の巻
Favicon(ファビコン)を設置したいのですが。 in 「ショップサーブのよくある質問」




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑