メニュー 閉じる

WebClip と Favicon

WebClip アイコンと Favicon の設定

BiND

BiND は、ウエブクリップアイコンと Favicon の設定をそれぞれ個別に設定することが可能です。

ウエブクリップアイコンは、スマホのメニュー画面に登録した際や、LINE に URL を紹介した際にアイコンとして表示されるもの。
Favicon はパソコンからの閲覧時、インターネットエクスプローラーやクロームのタブに表示されるものです。

サイトアイコン|53rd.net

参考までに…

ワードプレスの場合は、サイト基本情報からサイトアイコンとして一括登録します。

512px × 512px 以上のスクエア画像を設定するだけで、ウエブクリップアイコンと Favicon のどちらにも反映されるのですが、ウエブクリップアイコンは白い背景、Favicon は背景透過といった細かい設定は、こちらから登録するだけでは出来ません。

説明画像でもわかるように、PING の透過画像は Favicon としては良いのですが、Webclip アイコンとしては透明部分が黒く表示されてしまってよろしくありませんね。

BiND への WebClip アイコン登録

まずはウエブクリップアイコンを作成した後、そのアイコンをウエブサービスでFavicon に変換するほうが手順として簡単です。

  1. PNG 形式の画像を用意します。
    最適なサイズは114 x 114 ピクセルの画像です。
  2. [WebClip] ボタンを押して、アイコン選択画面を開きます。
    作成した WebClip アイコンをアップロードして選択します。

BiND への favicon の登録

BiNDの機能では、favicon の作成自体はできません。
作成は Webサービスを利用すると便利です。
https://ao-system.net/favicon/

  1. [favicon]ボタンを押し、アイコン選択画面を開きます。
  2. 作成したfaviconをアップロードし選択してください。

※ご注意※
ブラウザにInternet Explorerを使用する場合、Microsoft社推奨もしくは指定の詳細設定をしないとFaviconとして認識されない・表示されないようです。
こちらにつきましてもサポートは行っておりませんので、ご了承ください。

BiND

関連記事