faviconはサイトのブランディングに欠かせない要素。以下の無料ツールでかんたんに作成できる。
目次
おすすめfavicon作成ツール
favicon.io（最推奨）
PNG・JPG・SVG画像からfaviconを生成するほか、テキストや絵文字からも作成可能。
apple-touch-icon.png（180×180）やandroid-chrome系ファイルも同時出力されるため、site.webmanifestとセットで使える。
- ICO / PNG 複数サイズを一括生成
- Apple Touch Icon・Android Chrome対応ファイルも同梱
- 完全無料・登録不要
RealFaviconGenerator
各OS・ブラウザ向けのfaviconをまとめて生成し、<head>に貼るHTMLコードまで出力してくれる。
iOS Safari・Android Chrome・Windows タイル・Safari Pinnedタブなどに完全対応。
- 260×260px以上の画像を用意して使用
- OGP・PWA対応ファイルも生成
- 完全無料・登録不要
faviconをHTMLに設置する方法
<head>内に下記を記述する（favicon.io出力コードをそのまま使うのが早い）。
<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">SVGfaviconについて（2024年〜主流）
最新ブラウザはSVGfaviconに対応。ダークモード対応・Retina対応が容易になるため、今から作るならSVG+ICOの併用がベスト。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">※ 旧来の ao-system.net/favicon/ は現在アクセス不可のため削除。上記ツールに移行。
