・ファビコンって何？
・サンプルコード
・画像を変換するためには？
・必ず必要なの？
・まとめ
Webサイトを作っているときによく、タブの右上に付いているアイコンって何だろうと思ったことはありませんか？
あれは企業や自作のサイトの顔ともいえる画像になります。
名前はファビコンと呼ばれるものです。
正式名称は、favicon（ファビコン）とは「favicon.ico」のことです。
ホームページのシンボル（アイコン）として使われる、画像ファイルのことになります。
ホームページを作った人が「このホームページは、こんなのだよ」をイメージして用意した画像ファイルで、お気に入りに登録したときにホームページタイトルの横に表示される小さな画像のことです。
実物はこんな感じで埋め込んでいくことになります。
実際に変換していくためには、専用のツールが必要になります。
また、HTMLにソースコードを作成して、img配下にXXX.icoのファビコンを入れることで表示されるようになります。
ファビコンを作る際にはどんなサンプルコードがあるでしょうか？
実装する際には、Googleで「ファビコン HTML」などでググって調べてみましょう。
そして、動作確認はきちんとするようにしましょう。
以下に私が書いた実際のサンプルコードも載せておきますので、参考にしてください。
- <link rel="icon" href="img/001.ico">
私が使っているソースは上記の通りですが、必ずしも統一される必要はありません。
以下に他のソースを載せておきます。
- <link rel="shortcut icon" href="【faviconの名前】" type="image/vnd.microsoft.icon">
ファビコンが出てきたら、そのホームページを表現するアイコンなんだなという認識をもっていただければ十分です。
実装がHTML上で出来たら、次はファビコンを変換してみましょう。
ファビコンを変換するためには専用のソフトが必要です。
一昔前は無料のソフトがなく有料でソフトを買ってインストールして作る必要がありました。
今では無料で使えるサイトがあるので、かなり楽な時代になりました。
一部ですが、私が使っている変換サイトがあります。
こちらはとても便利です。タグまで生成してくれるので、あとは、拡大、縮小時の位置やずれなどを修正すれば簡単に埋め込むことができます。
次に必ずファビコンをつくらないといけないの？というとそんなことはありません。
ただ、ファビコンがあるとGooogleの検索サイトに信頼性の高いサイトと認識されやすくなります。
一般のECサイトでもファビコンがなくて地球儀マークだけのサイトも意外とあります。
個人サイトで私のように完全に副業として運営している人が自作で設置してあれば、
Web制作の知識レベルがかなり高いといえます。
IT企業なんかは、自作のサイトがあればポートフォリオにもなります。
Googleに認識されて検索エンジンにストックされるようになると、モチベーションも上がると思います。
ファビコンって読む側や使う側に立つと意識されないことがほとんどです。
実際に自分で作ってみると奥が深いなと理解できます。
個人的には誰もがWeb構築の方法を学び自分の知識を書いていくことが必要なのではないかと思います。
そこからプログラミングに興味を持ち、貴重なIT人材になってくれることを願っております。
最後にまとめです。
・ファビコンはブラウザのタブの右上に付いているアイコンで、
正式名称は、「favicon.ico」と呼ばれる。
・ファビコンは必ずしも設置する必要はない。
・作成するには、HTMLにソースを埋め込む必要がある。
・個人サイトでファビコンまで意識して作っているところはITレベルが高い傾向にある。
以上が、ファビコンについてでした。
最後まで読んでいただきありがとうございました。