やはり、ホームページを作成するとファビコンがあると本格的な感じがしますね。
ファビコンって何?と思う方がいると思いますが、ファビコンとはホームページを開いたときにタブのタイトル名の横にあるアイコンのことです。
このファビコンを簡単に作成できるサイトがありましたので、紹介します。
そのサイトは、favicon.io というサイトになります。
こちらのサイトでは、iPhone,iPadやAndroidでサイトをホーム画面に追加した時に表示されるアイコン(apple-touch-icon(アップルタッチアイコン))を同時に作成することができます。
少ない手数で、デスクトップ・タブレット・スマホ用の複数のファビコンを一瞬で作ることができる、オンラインツールです。
作成する材料
次の3種類のいずれかから、ファビコンを生成することができます。
・テキストから
・画像から
・絵文字から
作成できるフォーマットとサイズ
次のフォーマットとサイズのものがまとめて作成されてダウンロードすることができます。
・android-chrome-192×192.png
・android-chrome-512×512.png
・apple-touch-icon.png
・favicon-16×16.png
・favicon-32×32.png
・favicon.ico
ファビコンの実装コード
ファビコンの実装コードもサイト内に記載されており、そのまま head 内にコピーすればOKです。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest">
このサイトを使えば、簡単にファビコンが実装できますね。