ブラウザの履歴でリンクをクリックした際、あなたのブランドロゴではなく、無機質な灰色の地球儀が表示された経験はありませんか？それはファビコン（アイコン）が設定されていない証拠です。これは CSS ファイルが壊れている以上に「素人っぽさ」を叫んでいるようなものです。

多くの開発者は manifest.json や SVG のメディアクエリに神経を尖らせますが、もしあなたが Wix、Squarespace、あるいは Webflow といったノーコードツールでサイト構築をしているならどうでしょうか？public フォルダへのアクセス権も、生の HTML ヘッダーを編集する術もありません。プラットフォームが提供する UI に縛り付けられることになります。

ノーコードサイトでのファビコン設定は、技術的な詳細が隠蔽されているため、手触りが異なります。しかし、隠されているからといって重要度が下がるわけではありません。2026 年現在、Google は検索結果用に 48x48 の PNG を、Safari は 180x180 の Apple Touch Icon を依然として要求しています。もしあなたのノーコードプラットフォームがこれらを自動生成しない場合、あなたは確実にトラフィックを失っています。

なぜノーコードプラットフォームはファビコン設定で失敗しがちなのか

Wix や Squarespace などのプラットフォームはスピード感においては素晴らしいですが、デフォルト設定でのアイコン最適化においては最悪です。これらは往々にして、巨大な 2000x2000 のロゴを無理やり縮小し、16x16 ピクセルのアイコンとして配信してしまいます。その結果どうなるか？ブラウザのタブには、まるでジャガイモのようなぼやけた画像が表示されることになります。

例えば、Stripe はファビコン用にロゴの簡略化バージョンを使用しています。単にメインのブランドマークを縮小しているわけではありません。小さくても認識できるように、特定の 16x16 のグリッドを設計しています。ノーコードツールは、何らかの回避策を使わない限り、このような微細な制御を提供することは稀です。

サイトをプロフェッショナルに見せたいなら、プラットフォームの「自動生成」ボタンに頼ってはいけません。ビルダーにログインする前、つまりアセットを準備する段階で正しく整えておく必要があります。

ステップ 1：適切なアセットサイズを準備する

サイトビルダーに触れる前に、正しいファイルを用意する必要があります。単一の 512x512 の PNG をアップロードして「なんとかなるだろう」と願うだけでは、どのデバイスでも良好に動作することはまずありません。

ロゴから完全なセットを生成するには Mzu favicondl を使用してください。具体的に必要なファイルは以下の通りです：

16x16 のサイズをスキップすると、古いブラウザや特定のメールクライアントがアイコンをキャッシュできず、デフォルトの地球儀に戻ってしまう可能性があります。必ず専用の小型バージョンを用意してください。

ステップ 2：アップロード手順（プラットフォーム別）

ここからが「ノーコード」の魔法が働く場所です。プラットフォームによって処理方法が異なり、UI が分かりにくいこともあります。

Wix の場合：「設定」>「サイトアイコン」へ移動し、16x16 と 180x180 のファイルをアップロードします。Wix は自動トリミングを試みますが、ロゴに余白（パディング）がある場合、中央からずれて見えてしまいます。画像エディタで事前に余白を除去してください。

Squarespace の場合：「デザイン」>「サイトアイデンティティ」へ移動します。Squarespace はより厳格で、メインのアップロードには透明背景のない正方形の画像を要求することが多いです。ロゴが円形の場合、サイトのヘッダーに合うような実色の背景を追加する必要があるかもしれません。

Webflow の場合：これが最も柔軟です。「プロジェクト設定」>「ファビコン」へ移動します。ICO、PNG、Apple Touch Icon を個別にアップロードできます。Webflow は HTML コードを自動生成してくれますが、ファイル名がプラットフォームが期待するものと完全に一致しているか確認する必要があります。

ステップ 3：検証とキャッシュの強制更新

ファイルをアップロードし、「公開」ボタンを押したのに、タブにはまだ古いアイコンが表示されている。これが ノーコードサイトにおけるファビコン設定で最も一般的な悩みです。

ブラウザはファビコンを aggressively（過剰に）キャッシュします。数日更新されないことも珍しくありません。これを解決するには、キャッシュを強制クリアするか、プラットフォームが許可している場合は URL にバージョン文字列を追加する必要があります。

多くのノーコードビルダーでは HTML の link タグを直接編集できないため、以下のトリックを試してください：シークレットモードでブラウザキャッシュをクリアします。それでも表示されない場合は、DevTools のネットワークタブを確認します。/favicon.ico に対して 404 エラーが出ていないかチェックしてください。プラットフォームがそのファイルを作成していない場合、ビルダーがルートディレクトリへのファイルアップロードをサポートしているなら、favicon.ico という名前のファイルを明示的にアップロードする必要があるかもしれません。

避けるべき一般的な落とし穴

正しい手順を踏んでも、トラブルは起こり得ます。設定を破綻させる主な要因は以下の通りです。

透明背景の問題：一部のノーコードプラットフォーム（特に古いバージョンの Wix など）は、メインのファビコンに透明 PNG をサポートしていません。ロゴの周りに白い枠が表示されてしまいます。念のため、実色の背景バージョンでもテストしてください。

アスペクト比の誤り：ロゴが長方形になっている場合があります。ファビコンは正方形である必要があります。長方形のロゴを無理やり正方形に伸ばすと歪んで見えます。まず正方形にトリミングし、その後リサイズしてください。

ダークモードの無視：透明背景に黒色のファビコンの場合、Chrome のダークモードでは消えてしまいます。アイコンが白と濃いグレーの両方の背景に対して高いコントラストを持つようにしてください。コードなしでこれを処理する方法については、Favicon Dark Mode Support のガイドをご覧ください。

ノーコードアイコンに関する最終的な考察

プロフェッショナルなファビコンを持つために、開発者である必要はありません。必要なのは、「ノーコード」が「ルールなし」を意味しないことを理解することだけです。ブラウザは依然として特定のサイズとフォーマットを要求しています。

あなたのブランドを無機質に見せることは許されません。画像を準備し、正しくアップロードし、シークレットウィンドウで検証するために、余分な 5 分を費やしてください。ユーザーは、なぜあなたのサイトがより信頼できに見えるのか説明できなくても、その違いに気づくはずです。

次のプロジェクトに最適なアイコンセットを生成する準備はできましたか？サイズ変更とフォーマット変換の重労働は Mzu favicondl に任せてください。