とほほのファビコン入門

• トップ
• ファビコン

• ファビコンとは
• どこに表示されるか
• ファビコンの作り方
  • フォーマット
  • サイズ
• ファビコンの設定方法
• ファビコン作成関連ツール
  • Favicon generator
  • iconifier.net
  • ConvertICO.COM
  • ファビコンの歴史

ファビコンとは

• Webサイトのアイコンとしてアドレスバーやブックマークなどの表示されるアイコンです。
• 「favorite icon(お気に入りアイコン)」を略して「favicon(ファビコン)」と呼ばれます。

どこに表示されるか

ファビコンは下記などで表示されます。

• ブラウザでページを開いたときのタブ。
• ブラウザでブックマークした時のタイトル。
• スマートフォンでWebサイトをホーム画面に追加した時。
• Google などの検索エンジンの検索結果。

ファビコンの作り方

フォーマット

ICO形式(.ico)が一般的です。最近では GIF(.gif) や PNG(.png) も使用可能。ICO(.ico) であれば、16x16、32x32、192x192 などサイズの異なる複数の画像をひとつのファイルに格納できます。

サイズ

• https://dym.asia/media/favicon/
  標準サイズは 16x16。32x32 や 48x48 も使用できる
• https://coliss.com/articles/build-websites/operation/work/how-to-favicon.html
  32x32 だけでよい。
• https://www.webtan.cc/wp/htmlcssjquery-%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0/favicon_20210711/
  favicon16.png(16x16)
  favicon32.png(32x32)
  apple-touch-icon.png(180x180)
  android-chrome-192x192.png(192x192)
• https://ja.wix.com/blog/2019/06/create-a-favicon/
  Google Chrome では 192x192 が推奨されている。
  自動変換を望まない場合は 16x16, 32x32, 96x96 も用意するとよい。
• https://www.t-web.co.jp/blog/favicon/
  Googleガイドラインでは 48x48 の倍数(48x48、96x96、144x144等)を推奨している。
• https://developers.google.com/search/docs/appearance/favicon-in-search?hl=ja#guidelines
  最新のGoogleガイドライン(検索結果に表示されるアイコンのガイドライン)を見ると 48x48 以上であれば倍数である必要はないみたい。

ファビコンの設定方法

<link rel="icon" href="/favicon.ico">

下記は古い形式で現在は推奨されていない。

<link rel="shortcut icon" href="https://example.com/myicon.ico">

ファビコン作成関連ツール

Favicon generator

• https://www.favicon-generator.org/image-editor/

iconifier.net

• https://iconifier.net/

ConvertICO.COM

PNG 画像を ICO 画像に変換するWebツール。無償利用可能。ユーザ登録不要。

• https://convertico.com/

ファビコンの歴史

• 1999年リリースの Internet Explorer 5 で初めて実装。ブックマークした時に /favicon.ico を読み込む。
• 次第に .ico に加えて .gif や .png でも読込可能となる。
• 当初は <link ref="shortcut icon" href="..."> と指定していたが、shortcut と icon が二つの属性値と解釈されることからこの仕様は標準化されず、<link rel="icon" href="..."> の方式が採用された。
• 当初は .ico は IANA に登録されていない形式であり、その点も問題視されたが、2003年に image/vnd.microsoft.icon として登録されたためフォーマットも標準化された。

---