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

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

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

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

元の名前は、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作成をクリックすると、完成プレビューが下画像のように出来ます。

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

３８の場合は２サイズのマルチアイコンとなります。

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

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

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

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

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

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

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

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

関連記事