あんぷら屋 anpuraya

favicon_summary

ファビコンまとめ

記事更新日:2018-05-21

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

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

ファビコンに使う画像を260×260px以上のサイズで作る

Real Favicon Generatorにアクセスして、作ったアイコンを選択

諸々設定(必要なところだけ変更)

「Generate your Favicons and HTML code」を押して、ファビコンとソースコードを生成

ファビコンをサーバにアップ、headタグに生成されたソースコードを挿入

完了!

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

<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が向いていると思います。

knowledge

Web関連の小ネタ・まとめ。ちまちま増やしてく予定。
カテゴリ分けせずに、件数増えたらタグでまとめます。

Contact

Web拍手的なコメント投稿機能:


Copyright(c) 2005-2018 Hazumi Otoya / Anpuraya - All Rights Reserved.