ホームページにファビコンを設定しました

ホームページを作ってしばらくたちましたが、ファビコンの設定がまだでした。

ファビコンというのは、お気に入り(=ブックマーク)にしたときなどに、

ホームページのアイコンとして表示されるものです。

 

Web上のサービスで作ってみたら、画質が悪かったので、

Photoshop Elementsを使って作れるこちらのページを参考に作成しました。

 

Photoshop で背景透過の美しい favicon (ファビコン) を作成する

 

まず、Photoshopではファビコンの形式のWindowsアイコン形式が扱えないので、

こちらで紹介されているプラグインを入れました。

 

 

紹介ページでは、Windows上のPhotoshop CSで、

私はMac上のPhotoshop Elementsだからなのか、

フォルダ名が違うようですが、上の画像のところに入れたらOKでした。

 

 

やまもとさをんさんに作って頂いたアイコン画像を紹介ページの通りに

32×32のサイズにリサイズして、別名で保存しました。

 

フォーマットには、プラグインを入れたことで選べるアイコン形式を選択します。

ファビコンに使用するので、ファイル名は「favicon.ico」固定です。

 

 

ホームページのサーバのルートディレクトリに配置したらバッチリでした。

上の画像ではタブのところにアイコンが表示されています。

 

ブログはサブドメインが違うので、そのままでは表示されなかったため、

ブログ側のルートディレクトリにも同じものを配置しました。

 

これでタブブラウザでホームページを見たり、

ブックマークやお気に入りに追加すれば、ちゃんとアイコンが表示されます(^_^)