PlusOne Blog

【HTML,CSS】ファビコンを簡単に作成できる無料ツール

やはり、ホームページを作成するとファビコンがあると本格的な感じがしますね。
ファビコンって何?と思う方がいると思いますが、ファビコンとはホームページを開いたときにタブのタイトル名の横にあるアイコンのことです。

 
このファビコンを簡単に作成できるサイトがありましたので、紹介します。
そのサイトは、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">

 
 
このサイトを使えば、簡単にファビコンが実装できますね。
 

 

この記事を読む
記事一覧に戻る