Welcome to my blog

パソコン・インターネット

タブに表示される、ブログやサイトのファビコン(シンボルマーク)を作ろう

ブログやホームページを作る時、合わせて作りたいのがタブの先頭にあるあの画像。

yahooファビコン 

ミドリで囲んだシンボルマーク。

これがファビコンと言うやつです。

元の名前は、favorite icon(フェイバリット・アイコン)で、その略称がfavicon(ファビコン)と呼ばれています。



ファビコンの役目



このファビコンは、ブログやホームページの顔でもあり、有名企業は必ず入れています。

タブ以外にも、お気に入り(ブックマーク)にも表示され、一目瞭然でそのサイトであると判別できる優秀なシンボルマークになります。

もちろん、スマホのお気に入りにも表示されています。








ファビコンの表示の仕方


まず、ファビコン用のアイコン .icoファイルを好きな画像を使い、ファビコン作成サイトで作ります。

そしてそれを、自サイトにアップロードし、HTML要素内の  /head ←これの前に下の記述を加えれば準備完了です。


<link rel="icon" href="https://example.com/favicon.ico" />

https://example.com/favicon.icoの部分は、サイトに.icoファイルをアップロードした時のアドレスに変更します。

httpもしくはhttpsは、自サイトを確認してください。


ココログの場合は、上記部分を、自身のブログのトップページアドレスと、アップロードした.icoファイルのネームに変えて、設定内のブログのサブタイトル内に記述すれば表示されます。





ファビコンの作り方


ファビコン作成サイトがあるので簡単に作れます。


ファビコン favicon.icoを作ろう!←リンク


ファビコンhp


上記サイトで、48×48用画像ファイルを選択をクリックします。

38×38でも構いませんが、48を選ぶと3サイズ対応のマルチアイコンができるので、使い勝手が良いでしょう。

 

次に、パソコンのエクスプローラーが開くので、ファビコンにしたいファイルを選びます。

画像は、写真でも絵や文字でも構いませんが、結構小さくなるのでシンプルなものが良いでしょう。

 

次に、favicon.ico作成をクリックすると、完成プレビューが下画像のように出来ます。


ファビコンhp2

今回は、38×38で作ってみました。

38の場合は2サイズのマルチアイコンとなります。


問題がなければダウンロードボタンをクリックします。

後は、上記”ファビコンの表示の仕方”を参考に、自サイトへ設置すれば完了です。


ファビコンが表示されない時


・Google Chrome:設定⇒詳細設定⇒閲覧データを消去する⇒キャッシュされた画像とファイル⇒データを消去してください。



・IE11:インターネットオプション⇒全般⇒閲覧の履歴⇒削除⇒”インターネットの一時ファイル及びwebサイトのファイル”にチェック⇒削除してください。



・Edge:設定⇒プライバシーとセキュリティ⇒クリアするデータの選択⇒”キャッシュされたデータとファイルに”チェック⇒削除してください。


上記は、閲覧スピードを上げるための一時ファイルの削除の方法です。

チェックする場所を間違えると、色んなデータも消えてしまうので慎重にして下さい。

消えたデータについては、こちらでは一切責任を持ちません。

関連記事
ファビコンシンボルタブに表示されるシンボルタブに表示されるマークお気に入りに表示されるマーク