料金プランを有効化して学習を始めましょう。
Favicons and touch icons

ファビコンとタッチアイコン

Webflowウェブサイトでのファビコンとタッチアイコンの使用方法。ウェブサイトを公開する際、ブラウザのUIやモバイルのホーム画面でサイトをどのように表現するかは、最も重要な仕上げの要素の1つです。

レッスン内容

ファビコン Favicon

ファビコンは、ほとんどのブラウザで、ブラウザのタブやブックマークでウェブサイトを表現するために使用されます。

タッチアイコン Touch icons

タッチアイコンまたはWebclipは、Safariのブックマークなどで使用されます。

これらは、ウェブサイトへのリンクがスマートフォンのホーム画面に保存されたときにも表示されます。

画像アセット

ウェブアイコンの画像アセットを準備する際、ファビコンとして使用する32x32ピクセルの画像と、Webclipまたはタッチアイコンとして使用する256x256ピクセルの画像を作成してください。

これらの画像アセットで使用するファイル名は、HTMLで表示されるため、検索エンジンにインデックス化されたくない内容をファイル名に含めないように注意してください。

アイコンのアップロード

画像アセットの準備が完了したら:

  1. Project Setting > General tab > Icons
  2. 準備した画像をアップロード
  3. 変更を反映するためにサイトを公開
  4. ブラウザでライブサイトを更新して、更新されたファビコンを確認します

関連レッスン

No items found.

コースのレッスン

No items found.

次のレッスン

サポート

チャットで講師に質問を聞きましょう

質問する

学習進捗

閲覧後に「完了」を押して、進捗を保存しましょう