#87|ファビコンとタッチアイコンについて

ファビコンやタッチアイコンをウェブフローのWebサイトで使用することができます。

目次



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

このレッスンでは

  1. ファビコン
  2. タッチアイコン
  3. 画像アセット
  4. アイコンのアップロード
について学びます。

1. ファビコン

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

A google chrome window includes a google.com, apple.com, youtube.com and wikipedia tab. The favicon for the wikipedia tab is highlighted.

2. タッチアイコン

Safariのブックマークなどには、タッチアイコンやウェブクリップが使用されています。

A safari browser window includes twelve touch icons. The wikipedia touch icon is highlighted.

また、スマートフォンのホーム画面にWebサイトのリンクが保存された場合にも、表示されます。

3.画像アセット

アップロードするウェブアイコンの画像資産を準備する際、ファビコンとして使用する32×32ピクセルの画像と、ウェブクリップやタッチアイコン用の256×256ピクセルの画像を作成します。

A diagram includes two Webflow logo W icons. Dimensions are specified with arrows and a digit number. On the left, the favicon should be 32 px.
注意: これらの画像アセットで使用するファイル名は、HTMLで見ることができますので、検索エンジンにインデックスされたくないものをファイル名に含めないようにだけ注意してください。

4.アイコンのアップロード

画像アセットの準備が完了したら
  1. プロジェクト設定>一般タブ>アイコンをクリックします。
  2. 用意した画像をアップロードする
  3. サイトを公開し、変更を反映させます。
  4. ブラウザでサイトを更新すると、更新されたファビコンが表示されます。