ホームページビルダー・グレート初心者講座

　お気に入りアイコン（ファビコン）の生成と設定

お気に入りアイコン（ファビコン）について

ファビコンとは、ブラウザのアドレスバーやタブ、お気に入りの前に付く小さなアイコンです。
下の手順に従って設定を行う事で、ここに好きなアイコンを表示できます。

ファビコンの生成

下のフォームから好きな画像をファビコンに使用できる形式に変換します。

1. 下のフォームの「参照」ボタンをクリックして画像を選択します。
2. 「ファビコン生成」ボタンをクリックすると変換されたfavicon.icoがダウンロードできます。

link要素の追加

方法1

最近のビルダーではお気に入りアイコンの設定項目があります。
「編集」 → 「ページの属性」と進むと「ページ情報」の画面になります。
ここに「ページアイコン」という項目がありますので、ここでファイルを指定します。

「参照」ボタンからファイルを選択するかたちになりますので、設定前に対象のhtmlファイルと
同じディレクトリに favicon.ico をコピーしておきましょう。

※ この設定方法の場合、方法2 の手順は必要ありません。

方法2

ビルダーの「編集」 → 「ページの属性」とクリックし「その他」のタブをクリックします。

「その他のHTMLタグ」と記載された入力枠がありますので、そこへ以下の1行を追加します。
追加したら「OK」ボタンをクリックして下さい。

備考

現在のほとんどのブラウザはlink要素を追加しなくても、表示の際やお気に入りに
追加する際に favicon.ico を探して表示します。
また link要素で favicon.ico を別の名前にしたりもできますが、ブラウザによっては
別の挙動をする可能性がありますので、favicon.ico の名前は固定にし、link要素も
指定した方が良いようです。

FTPで htmlファイルとfavicon.icoをアップロード

修正した htmlファイルと favicon.ico を同じディレクトリにアップロードします。
アップロードが完了したら実際に表示して確認してみましょう。

ファビコンが表示されない場合は次の項目を参考に問題点を確認します。

表示されない場合は？

ローカルでテストしてみます

上記操作を行ったhtmlファイルと同じディレクトリに favicon.ico をコピーし、
ビルダーの「ツール」 → 「ブラウザ」からブラウザを選択して表示してみます。
もしくは htmlファイルと同じディレクトリに favicon.ico をコピーしておき、
操作を行ったhtmlファイルをダブルクリックしてみます。

上記テストで表示されない場合は

favicon.ico のファイル名に誤りが無いか確認します。
指定した場所に favicon.ico が存在するか確認します。
このページの例の手順で操作を行った場合は、対象のhtmlファイルと同じディレクトリに
favicon.ico が存在するか確認します。
<head> ～ </head> の間に正しく記載されているか確認します。
ブラウザのキャッシュ、履歴を削除、ブラウザを一旦終了させて、もう一度起動し
ファビコンが表示されるかどうか確認してみます。
ファビコンが正常であるか確認します。
例えば別のサイトのファビコンを一時的に拝借して同じようにテストしてみます。
別のサイトのファビコンでテストする際はローカルでのテストのみにして下さい。

上記テストで正しく表示される場合は

ブラウザのキャッシュ、履歴を削除、ブラウザを一旦終了させて、もう一度起動し
ファビコンが表示されるかどうか確認してみます。
<head> ～ </head> の間に正しく記載されているか確認します。
指定した場所に favicon.ico がアップロードされているか？
例えば当サイトの場合 https://aimix.jp/favicon.ico のようにアクセスし、
ファビコンが正しく表示されるか確認してみます。
専用サーバなどの場合は MIMEタイプで定義されているか確認します。
未定義の場合は httpd.conf もしくは .htaccess に下の一行を追加します。
AddType images/x-icon .ico

https://aimix.jp/favicon.ico などのようにブラウザからアクセスした際に
画像が表示されず文字化けした文字列が表示される場合は、これが原因か
ブラウザが対応していない可能性があります。

その他

IE7以降のIEでは表示するだけでファビコンが反映されますが、それ以前のIEは
お気に入り登録を行った際に反映されます。

現在の代表的なブラウザはほぼファビコンに対応していますが、非対応のブラウザも
あります。

link要素を指定していない場合でも、トップのディレクトリに favicon.ico が存在する場合は
そのファビコンが表示されます。
逆に link要素を指定しているにも関わらず、指定した位置に favicon.ico が存在しない場合、
ファビコンは表示されません。