ファビコンまとめ

IE用のファビコンは基本的にmetaタグに書かなくなったようです。
ルート直下に”favicon.ico”を置けない場合はやむを得ず指定。
それ以外については、結構な種類が必要になります。
ほとんどのサイトで、OS、メディアを限定できないため、最低限必要なものに絞ること自体難しいです。

今後、svgが幅を利かせるようになったら1ファイルで済むようになるかもしれませんが、当面は一括生成できるサービスを利用するのが吉だと思われます。
あんぷら屋の場合、Real Favicon Generatorというサイトにお世話になってます。
デバイスごとにわりと細かく表示設定ができる上に、headタグに挿入するコードも生成してくれます。

  1. ファビコンに使う画像を260×260px以上のサイズで作る
  2. Real Favicon Generatorにアクセスして、作ったアイコンを選択
  3. 諸々設定(必要なところだけ変更)
  4. 「Generate your Favicons and HTML code」を押して、ファビコンとソースコードを生成
  5. ファビコンをサーバにアップ、headタグに生成されたソースコードを挿入
  6. 完了!

ちなみにあんぷら屋のファビコン指定はこんなかんじです。

<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
<link rel="manifest" href="/icon/site.webmanifest">
<link rel="mask-icon" href="/icon/safari-pinned-tab.svg" color="#5a378a">
<meta name="msapplication-TileColor" content="#5a378a">
<meta name="theme-color" content="#ffffff">

GitHubで管理されているっぽいので、常に最新の情報を反映したサービスを期待できます。
こういうのはほんとに個人よりGitHubが向いていると思います。

カテゴリー : 技術・小ネタ

COMMENT FORM

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です。

※送信の前にプライバシーポリシーを必ずご確認ください。