カラーミーショップでファビコンを設定する方法｜ICO変換からアップロードまで解説

カラーミーショップにファビコンを設定しよう

ネットショップを運営しているなら、ファビコンの設定はほぼ必須です。ブラウザのタブやブックマークにショップ名の代わりにアイコンが表示されることで、お客さまが「あのショップをもう一度見たい」と思ったときにタブの中からすぐに見つけてもらえるようになります。

カラーミーショップでもファビコンは設定できますが、1つ注意点があります。ICO形式のファイルしかアップロードできないという仕様です。PNGやJPGをそのままアップロードすることはできません。

この記事では、画像からICOファイルを作成し、カラーミーの管理画面にアップロードするまでの手順を解説します。

事前準備：ICOファイルを用意する

カラーミーのファビコン要件

項目	要件
ファイル形式	ICO形式（.ico）のみ
ファイル名	favicon.ico（固定）
表示サイズ	16x16px
推奨元画像	512x512px以上の正方形PNG

PNGやJPG画像の拡張子を.icoに手動で変更しても、ファイルの中身はICO形式にはなりません。正しいICO形式に変換するには専用のツールが必要です。

ICOファイルの作成手順

当サイトの画像→ファビコン変換ツールを使えば、数クリックでICOファイルを作成できます。

変換ツールにアクセス
ショップロゴやアイコン画像をドラッグ&ドロップ
サイズは16x16、32x32、48x48の3つを選択（マルチサイズICO推奨）
「favicon.ico をダウンロード」をクリック

画像→ファビコン変換ツール画像をマルチサイズ対応のICOファビコンに変換

画像をお持ちでない場合は、ファビコンデザイナーでショップ名の頭文字からデザインすることもできます。

ファビコンデザイナー図形やテキストを組み合わせてファビコンをデザイン

画像はすべてブラウザ内で処理され、サーバーに送信されることはありません。ショップのロゴなど大切な画像も安心して使えます。

設定手順：管理画面からアップロードする

ステップ1：管理画面にログイン

カラーミーショップの管理画面（https://admin.shop-pro.jp/）にログインします。

ステップ2：トップページ設定を開く

左メニューから ネットショップ > ショップ情報 > ファビコン に進みます。

ステップ3：ファビコンをアップロード

トップページ設定の画面内にファビコン用のアップロード欄があります。「参照」ボタンをクリックし、先ほど作成したfavicon.icoを選択します。

ステップ4：保存して確認

画面下部の「保存」ボタンをクリックします。ショップのURLにアクセスし、ブラウザタブにファビコンが表示されていれば完了です。

反映されない場合は、Ctrl+Shift+R（Mac: Cmd+Shift+R）でスーパーリロードを試してください。

アップロードできない場合の対処法

カラーミーのファビコンアップロードでは、いくつかの既知の問題があります。

「ファイル名をfavicon.icoにしてください」エラーが出る

正しいICOファイルを使っているのに、このエラーが出ることがあります。これはChromeでの管理画面操作時に発生しやすい既知の問題です。

対処法：Firefoxで管理画面にログインしてアップロードする

同じファイルでもFirefoxからアップロードすると成功する事例が多数報告されています。

Firefoxをインストール（まだの場合）
Firefoxでカラーミー管理画面にログイン
同じ手順でファビコンをアップロード

※2026年4月現在Chromeでも問題なくアップロードできました。

ファイル形式が正しくない

PNGやJPG画像の拡張子を.icoにリネームしただけでは、内部のファイル形式がICOになりません。変換ツールで正しいICO形式に変換してください。

アップロード後に表示されない

ブラウザキャッシュが原因の場合がほとんどです。スーパーリロード（Ctrl+Shift+R）を試してください
シークレットモード（Ctrl+Shift+N）で確認するとキャッシュの影響を受けません
それでも表示されない場合は、ICOファイル自体が破損している可能性があります。元画像から再度変換してアップロードし直してください

ファビコンが表示されない場合の詳しいトラブルシューティングはこちら。

Apple Touch Icon（iPhoneホーム画面用）も設定する

カラーミーの管理画面では、favicon.icoの設定はGUIで行えますが、Apple Touch Icon（iPhoneのホーム画面に追加したときのアイコン）は手動でHTMLタグを追加する必要があります。

手順

180x180pxのPNG画像を用意する（変換ツールで作成可能）
管理画面の 画像ファイル管理 に画像をアップロードし、URLを取得
管理画面 > 集客 > 検索エンジン対策 を開く
「headタグ内フリースペース設定」の「スマートフォンショップ用の設定」欄に以下を追加：

<link rel="apple-touch-icon" sizes="180x180" href="https://ここにアップロード画像のURL">

Apple Touch Iconを設定していない場合、iPhoneからホーム画面に追加したときにページのスクリーンショットがサムネイルになり、見栄えがよくありません。ECサイトではリピーターのホーム画面に残ってもらうことが重要なので、ぜひ設定しておきましょう。

Apple Touch Iconの仕様やデザインのコツは以下の記事で詳しく解説しています。

ECサイトでファビコンが重要な理由

ファビコンは「あったらいいな」ではなく、ECサイトではブランディングの基本です。

タブからの再訪率：お客さまが複数のショップを比較しているとき、タブのファビコンであなたのショップを見つけてもらえる
ブックマークの視認性：お気に入りに追加してもらったとき、一覧の中でアイコンがあるショップは目立つ
Google検索結果：モバイル検索結果にファビコンが表示される。設定していないショップと並んだとき、設定済みの方がプロフェッショナルな印象を与える
信頼感：ファビコンがないサイトは「手が行き届いていない」印象を与えることがある

よくある質問（FAQ）

Q. カラーミーではPNG形式のファビコンは使えない？

管理画面からのアップロードはICO形式のみ対応しています。PNG形式で設定したい場合は、テンプレートのHTMLを直接編集し <link rel="icon" type="image/png" href="..."> を追加する方法がありますが、上級者向けです。基本的にはICOで設定するのが推奨です。

Q. マルチサイズICOをアップロードしても大丈夫？

はい。16x16、32x32、48x48を含むマルチサイズICOファイルをアップロードすると、各デバイスに応じた最適なサイズが自動的に使われます。当サイトの変換ツールで複数サイズを選択してダウンロードしてください。

Q. ファビコンを変更したのに古いアイコンが表示される

ブラウザのキャッシュが原因です。以下の順で試してください。

スーパーリロード（Ctrl+Shift+R）
シークレットモード（Ctrl+Shift+N）で確認
ブラウザのキャッシュを削除（設定 > 閲覧履歴データの削除 > キャッシュされた画像とファイル）

Q. 他のECプラットフォームではどう設定する？

各プラットフォームの設定方法をまとめた記事があります。

まとめ

ステップ	内容
1. ICOファイルを作成	変換ツールで画像をICOに変換（ファイル名: favicon.ico）
2. 管理画面でアップロード	ネットショップ > ショップ情報 > ファビコン
3. Apple Touch Iconを設定	集客 > 検索エンジン対策 > headタグ内フリースペースにHTMLを追加
4. キャッシュクリアで確認	Ctrl+Shift+R でスーパーリロード

カラーミーではICO形式が必須なため、画像の変換ステップが必要ですが、変換ツールを使えば1分で完了します。ファビコンを設定して、ショップのブランド力を高めましょう。