LikePay Academyが「スーパーサイトAcademy」に変わります。詳しくはこちらです。

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

Webflowウェブサイトでのファビコンとタッチアイコンの使用方法

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。引用元はこちらです。

ウェブサイトを公開する際、ブラウザのUIやモバイルのホーム画面でサイトをどのように表現するかは、最も重要な仕上げの要素の1つです。

このレッスンで学ぶこと

ファビコン Favicon

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

タッチアイコン Touch icons

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

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

画像アセット

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

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

アイコンのアップロード

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

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

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談