タブに表示される、ブログやサイトのファビコン(シンボルマーク)を作ろう
ブログやホームページを作る時、合わせて作りたいのがタブの先頭にあるあの画像。
ミドリで囲んだシンボルマーク。
これがファビコンと言うやつです。
元の名前は、favorite icon(フェイバリット・アイコン)で、その略称がfavicon(ファビコン)と呼ばれています。
ファビコンの役目
このファビコンは、ブログやホームページの顔でもあり、有名企業は必ず入れています。
タブ以外にも、お気に入り(ブックマーク)にも表示され、一目瞭然でそのサイトであると判別できる優秀なシンボルマークになります。
もちろん、スマホのお気に入りにも表示されています。
ファビコンの表示の仕方
まず、ファビコン用のアイコン .icoファイルを好きな画像を使い、ファビコン作成サイトで作ります。
そしてそれを、自サイトにアップロードし、HTML要素内の /head ←これの前に下の記述を加えれば準備完了です。
<link rel="icon" href="https://example.com/favicon.ico" />
https://example.com/favicon.icoの部分は、サイトに.icoファイルをアップロードした時のアドレスに変更します。
httpもしくはhttpsは、自サイトを確認してください。
ココログの場合は、上記部分を、自身のブログのトップページアドレスと、アップロードした.icoファイルのネームに変えて、設定内のブログのサブタイトル内に記述すれば表示されます。
ファビコンの作り方
ファビコン作成サイトがあるので簡単に作れます。
上記サイトで、48×48用画像ファイルを選択をクリックします。
38×38でも構いませんが、48を選ぶと3サイズ対応のマルチアイコンができるので、使い勝手が良いでしょう。
次に、パソコンのエクスプローラーが開くので、ファビコンにしたいファイルを選びます。
画像は、写真でも絵や文字でも構いませんが、結構小さくなるのでシンプルなものが良いでしょう。
次に、favicon.ico作成をクリックすると、完成プレビューが下画像のように出来ます。
今回は、38×38で作ってみました。
38の場合は2サイズのマルチアイコンとなります。
問題がなければダウンロードボタンをクリックします。
後は、上記”ファビコンの表示の仕方”を参考に、自サイトへ設置すれば完了です。
ファビコンが表示されない時
・Google Chrome:設定⇒詳細設定⇒閲覧データを消去する⇒キャッシュされた画像とファイル⇒データを消去してください。
・IE11:インターネットオプション⇒全般⇒閲覧の履歴⇒削除⇒”インターネットの一時ファイル及びwebサイトのファイル”にチェック⇒削除してください。
・Edge:設定⇒プライバシーとセキュリティ⇒クリアするデータの選択⇒”キャッシュされたデータとファイルに”チェック⇒削除してください。
上記は、閲覧スピードを上げるための一時ファイルの削除の方法です。
チェックする場所を間違えると、色んなデータも消えてしまうので慎重にして下さい。
消えたデータについては、こちらでは一切責任を持ちません。
- 関連記事