FaviconとWebClipアイコンの設定

WebClipアイコンFaviconの設定

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

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

 

 

参考までに…

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

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として認識されない・表示されないようです。
こちらにつきましてもサポートは行っておりませんので、ご了承ください。

この記事を書いたのは

白馬のおんじ
名古屋市の情報通信システム会社に勤務。生活の大半をブログ運営に捧げています(笑)WordPress や BiND を使用したサイト制作承ります!

"ZERO"で作るゼロ円ホームページ

レカムジャパン名古屋第一支店で作るホームページ。"ZERO"ならドメインの取得や管理にかかる初期費用も一切ゼロ。もちろん製作費も更新費用もかかりません。ホームページにかかる4つの費用を全てゼロにした名古屋第一支店だけのオールフリープラン"ZERO"。是非ご利用ください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です