このページを日本語で閲覧するには「続ける」を押してください。
Press "Continue" to see this page in English.
料金プランを有効化して学習を始めましょう。

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

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

アクセス制限

レッスン動画を閲覧するには、会員登録が必要です

レッスン動画を閲覧するには、会員登録と有料プランの加入が必要です

アクセス制限

レッスン動画を閲覧するには、有料プランの加入が必要です。

レッスン内容

ファビコン Favicon

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

タッチアイコン Touch icons

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

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

画像アセット

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

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

アイコンのアップロード

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

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

コースのレッスン

No items found.

学習進捗

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