Wixのファビコン
Wix は、サイト ダッシュボードの [設定] > [ウェブサイト情報] > [ファビコン] にファビコンを保存し、公開されたすべてのページにファビコンを自動的に挿入します。少なくとも 100×100 ピクセルの正方形 PNG をアップロードします。鮮明な表示には 512×512 が最適です。 PWA および apple-touch-icon のサポートについては、上級ユーザーは Wix Velo を介してカスタム コードを追加できます。 favicon generator を使用して、ロゴやブランド マークからすぐにアップロードできる PNG を作成します。
ファビコンは、Wix サイトで最も目立つブランド要素の 1 つであり、ブラウザーのタブ、ブックマーク バー、アドレス バーの履歴に表示されます。鮮明で認識可能なファビコンは、訪問者がすぐに Wix サイトを識別し、そこに戻るのに役立ちます。 Wix は、画像をアップロードするとファビコンの挿入を自動的に処理するため、必要な労力は最小限で済みます。
Wix ファビコンを追加または変更するには、Wix ダッシュボードにログインし、[設定] > [ウェブサイト情報] に移動します。 [ファビコン] セクションまでスクロールします (Wix のバージョンに応じて、サイト アイコンまたはタブ ファビコンというラベルが付いている場合があります)。アップロード領域または既存のアイコンのサムネイルをクリックして、メディア マネージャーを開きます。正方形 PNG をアップロードして確認します。
Wix では、ファビコンの最小サイズ 100×100 ピクセルを推奨していますが、これはフロアであり、ターゲットではありません。最も鮮明な結果を得るには、512×512 をアップロードしてください。 Wix はタブ表示用に画像を縮小し、より大きなソースから開始すると、小さなサイズでの品質の低下が少なくなります。 favicon generator は、あらゆるロゴから完璧な 512×512 PNG を数秒でエクスポートします。
PNG 形式は、Wix ファビコンのアップロードに最適です。透明度がサポートされているため、色付きまたは白の背景ボックスがなくても、明るいブラウザー テーマと暗いブラウザー テーマの両方に対してアイコンがきれいに表示されます。 ICO ファイルは必要ありません。Wix は PNG を変換し、正しい MIME タイプで提供します。
Wix Studio (Wix のプロフェッショナル層) は、[設定] > [ウェブサイト情報] の同じ場所にファビコン設定を配置します。 Studio では、SVG ファビコンまたは apple-touch-icon タグが必要な場合、「<head>」セクションでより高度なカスタム コードの挿入も可能です。 [設定] > [カスタム コード] に移動して、Wix Studio プロジェクトにヘッド スクリプトを追加します。
Wix ダッシュボードにファビコンをアップロードした後、変更を公開するにはサイトを再公開する必要があります。エディターの右上隅にある「公開」をクリックします。 Wix は、カスタム ドメイン上のすべてのページに新しいファビコンを伝達します。ダッシュボードに保存されていても公開されていない変更は、訪問者には表示されません。
Wix は「<link rel='icon'>」タグの挿入を自動的に処理します。コードを追加する必要はありません。 Wix は、アップロードされたファビコンのサイズを必要な寸法に変更することで、iOS ホーム画面保存用の基本的な apple-touch-icon エントリも挿入します。カスタム 180×180 apple-touch-icon (ファビコンとは異なります) の場合は、Wix Velo カスタム コード インジェクションを使用します。
アルファ チャネルを含む PNG をアップロードすると、透明な背景が Wix によって保持されます。アイコンの背景が単色の場合、ダークモード ブラウザのタブにカラー ボックスが表示されます。アップロードする前に、背景を塗りつぶさずにロゴをエクスポートしてください。明るい背景と暗い背景の両方にアイコンをレンダリングする favicon tester を使用して、透明度が正しく機能していることを確認できます。
Wix Velo (Wix 内の JavaScript 開発プラットフォーム) では、高度なファビコンのカスタマイズが可能です。 Velo の `wixLocation` とページ イベントを使用すると、ページごとに異なる favicon リンク タグを動的に挿入できます。これは、製品固有のブランディングを行っている電子商取引サイトや、各セクションで異なるアイコンが使用されている複数カテゴリのサイトに便利です。
Wix がネイティブ ファビコン サポートを導入する前に作成された Wix テンプレートを使用している場合、ファビコン設定が別の場所に表示されるか、まったく存在しない可能性があります。このような場合は、Wix のカスタム コード インジェクションを使用します: [設定] > [カスタム コード] > [コードの追加] > 各ページの `<head>` にコードを配置し、ホストされているファビコンへのリンクを含む `<link rel='icon' href='URL'>` タグを手動で追加します。
Wix ADI (Artificial Design Intelligence) サイトでは、セットアップ ウィザード中にファビコンを指定すると、ブランド資産からファビコンが自動的に設定されます。 ADI が選択したファビコンは、「設定」>「Web サイト情報」>「ファビコン」パスを使用していつでもオーバーライドできます。 ADI が生成したファビコンは低解像度のロゴであることが多く、専用のアイコンに置き換えることをお勧めします。
Wix ファビコンを公開した後、プライベート/シークレット ブラウザ ウィンドウでライブ ドメインを開くと、ローカル ブラウザ キャッシュなしで更新されたアイコンが表示されます。 1日経っても通常のブラウジングで古いファビコンが表示される場合は、Wix の問題ではなく、ブラウザのキャッシュが原因である可能性があります。ハードリフレッシュ (Ctrl+Shift+R または Cmd+Shift+R) を実行すると、ブラウザーはキャッシュされたアイコンを強制的に破棄します。
Wix サイトでの PWA インストール サポート (フルサイズのアプリ アイコンとスプラッシュ画面を備えたモバイル ホーム画面にサイトを追加) を希望する企業の場合、Wix にはネイティブ PWA 機能が制限されています。 Wix のカスタム コード インジェクションを使用して、192×192 および 512×512 の PNG アイコンを含む、外部でホストされている site.webmanifest ファイルを指す「<link rel='manifest'>」タグを追加します。完全なマニフェスト設定については、web app manifest guide を参照してください。
使い方
- 1
512×512 PNG ファビコンを作成する
ロゴまたはブランド マークを含む [favicon generator](tool:favicon-generator) をソースとして使用します。パッケージから 512×512 PNG をダウンロードします。これは Wix に適切なサイズです。
- 2
[設定] > [ウェブサイト情報] を開きます
Wix ダッシュボード (エディターではなく) で、[設定] > [Web サイト情報] に移動し、下にスクロールして [ファビコン] セクションを見つけます。
- 3
PNGをアップロードしてください
アップロード領域または既存のファビコンのサムネイルをクリックし、Wix メディア マネージャーまたはデバイスから 512×512 PNG を選択して確認します。設定を保存します。
- 4
サイトを公開する
Wix エディタで「公開」ボタンをクリックします。 Wix は、ライブ カスタム ドメイン上のすべてのページに更新された favicon タグを挿入します。
- 5
シークレット ウィンドウで確認する
プライベート/シークレットブラウザウィンドウでライブドメインを開きます。新しいファビコンがタブに表示されます。外部を簡単にチェックするには、[favicon tester](utility:favicon-tester) を使用します。
今すぐ試す
Wix 対応のファビコンを生成する
ファビコンジェネレーターよくある質問
Wixのファビコン設定はどこにありますか？+
[設定] > [Web サイト情報] > [ファビコン] (Wix のバージョンまたはテンプレートに応じて、正確なラベルは「タブ ファビコン」または「サイト アイコン」になる場合があります)。正方形の PNG をアップロードして保存し、[公開] をクリックしてライブ サイトに適用します。
Wix ファビコンのサイズはどれくらいにすればよいですか?+
Wix には最低 100×100 ピクセルが必要ですが、512×512 PNG を強くお勧めします。より大きなソースから開始すると、目に見える品質の低下なしに Wix が 32×32 (タブ サイズ) までダウンサンプリングできることが保証されます。
Wix ファビコンに古いアイコンが表示されたままなのはなぜですか?+
新しいファビコンをアップロードした後、必ず [公開] をクリックしてください。保存された変更は、公開されるまで公開されません。次に、プライベート/シークレット ウィンドウでサイトを開き、ブラウザーのローカル ファビコン キャッシュをバイパスします。
SVG ファビコンを Wix で使用できますか?+
ネイティブの設定パネルではなく、ラスター形式のみを受け入れます。 SVG を使用するには、[設定] > [カスタム コード] > [ヘッド コード] でカスタム コード「<link rel='icon' type='image/svg+xml' href='URL'>」を追加し、SVG を外部でホストします。
Wix は apple-touch-icon を自動的に追加しますか?+
Wix は、アップロードされたファビコン画像から基本的な apple-touch-icon を挿入します。カスタム 180×180 apple-touch-icon (タブのファビコンとは別) の場合は、Wix Velo または [設定] > [カスタム コード] を使用してリンク タグを手動で挿入します。
私の Wix ファビコンにはまだデフォルトの Wix アイコンが表示されています。どうすればよいですか?+
[設定] > [ウェブサイト情報] で新しいファビコンを保存し、エディターで [公開] をクリックします。サイトがカスタム ドメイン (Wix サブドメイン プレビューだけでなく) に公開されていることを確認します。ブラウザのキャッシュをクリアし、シークレット ウィンドウで試してください。
異なる Wix ページに異なるファビコンを設定できますか?+
はい、Wix Velo を使用します。ページごとにカスタム コード インジェクションを追加するか、Velo のページ準備完了イベントを使用して、現在のページ パスに基づいて `<link rel='icon'>` 要素を動的に更新します。