Framerで公開したサイトのブラウザタブに汎用の地球アイコンが表示される場合は、3つのレイヤーを確認してください。プロジェクトに設定したfavicon、公開先ドメイン、HTMLレスポンスです。プロジェクト全体のFramer faviconは、ページのリデザインなしで差し替えられます。

まずFramerの標準アップロード機能を使ってください。アイコンがプロジェクトに紐づけられるため、別途HTML snippetを追加する必要はありません。Custom codeは、SVGを使う、指定サイズにする、またはasset URLを明示的に管理する場合にだけ使ってください。

始める前に

より広いアップロード手順については、no-code faviconガイドを参照してください。以下ではFramerの設定、公開、検証に絞って説明します。

Framer faviconを追加する方法

  1. プロジェクト設定を開く。

    Framerでプロジェクトを開き、プロジェクト上部のメニューからSettingsを選んでサイト設定を開きます。一般的なサイト情報の項目にあるFaviconまたはSite Iconを探してください。見つからない場合は、同じパネルのSEOまたはsite-metadataセクションを確認します。1つのページだけで設定しないでください。

  2. 正方形のアイコンをアップロードする。

    Uploadを選択し、PNGを選んでcropを確認します。マークを中央に配置し、タブの表示サイズでは消えてしまう小さな文字は削除してください。変更を保存します。この項目がSVGまたはICOを受け付ける場合は、その書き出しデータを使い、受け付けない場合はPNGを使ってください。

  3. プロジェクトを公開する。

    Publishを選択し、公開後のURLを新しいタブで開いてください。editor canvasは、利用者が受け取る内容ではありません。

  4. 公開後のレスポンスを検証する。

    DevToolsのElementsパネルでrel='icon'を検索します。URLがアップロードしたassetを指していることを確認してください。Networkパネルでそのassetをリクエストし、statusを確認してください。リクエストが失敗した場合、タブアイコンは更新できません。

  5. 意図的なoverrideにだけCustom codeを使う。

    プロジェクト設定にCustom Codeがある場合は、Headセクションを開いて次のコードを追加し、両方のURLをpublicアクセス可能なHTTPS asset URLに置き換えてください。

    <link rel='icon' type='image/svg+xml' href='https://your-domain.com/favicon.svg'>
<link rel='icon' type='image/png' sizes='512x512' href='https://your-domain.com/favicon-512.png'>

    HTML Standardでは、rel='icon'による外部icon linkの指定が定義されています。iconの指定元を1つに統一するため、標準のアップロード機能と、それ以前に追加したsnippetは無効にしてください。

よくある落とし穴

まとめ

最も subreddits な運用では、project setting にすべての管理を一本化します。正方形の PNG をアップロードして公開し、本番の HTML を確認してください。カスタムコードは、意図的な override に限って使用します。これで、次回の変更も予測可能な状態に保てます。