2022年サイトに設定するアイコンは最低4個でじゅうぶんだった

今までheadタグの内容について色々まとめてきましたが、今回はアイコン関係についてまとめてみました。
意外とfavicon.icoだけしか設定していなかったり、沢山設定されていて手間が大変だったりしている人であったり、色々なコーディングを見てきましたが、2022年無難にパソコンやスマートフォン・タブレットの全体をカバーできるようなサイズ感に整理しましたので、是非使用いただけたら嬉しいです。

最低限これだけあれば大丈夫

<link rel="shortcut icon" href="icon32x32.png" sizes="32x32">
<!--[if IE]>
	<link rel="shortcut icon" href="favicon.ico">
<![endif]-->
<link rel="apple-touch-icon" href="icon180x180.png" />
<link rel="icon" href="" sizes="192x192" />
<meta name="msapplication-TileImage" content="icon270x270.png" />

記事のタイトルには4個と記載しましたが、念のため5個記述しました。
理由は下記にて解説いたします。

解説

32 x 32(px)のアイコン

<link rel="shortcut icon" href="32x32.png" sizes="32x32">

Retinaディスプレイなどにも対応のブラウザのタブの部分に表示させるためのアイコンです。

こちらが一番基本となるアイコンになると思います。

favicon.ico　IE対応のアイコン(ファビコン)

<!--[if IE]>
	<link rel="shortcut icon" href="favicon.ico">
<![endif]-->

IEもいよいよサポート終了が近づいてきていますが、念の為に入れておきました。

現在では単なるアイコンではなく、マルチアイコンと言った形で作成することによって高解像度にも耐えられるようにできるようです。

サイズ感としては、16 x 16 と 32 x 32 のサイズで作成しておくとどのブラウザでもきれいに表示されるように制作できるようです。

下記URLよりマルチアイコンを作成することができます。

https://ao-system.net/multiicon/

※私はマルチではなくファビコンを使用していますが特に問題ありません。

https://ao-system.net/favicon/

180 x 180(px)のアイコン IOS用

<link rel="apple-touch-icon" href="180x180.png" />

アイフォン用のアイコンです。ホーム画面やブックマークをした際にアイコンになる部分です。

192 x 192(px)のアイコン IOS用

<link rel="icon" href="192x192.png" sizes="192x192" />

アンドロイド用のアイコンです。アンドロイドはこの記述を省くと自動的にapple-touch-iconでせっていされている物を表示してくれますが、IOSのサイズに合わせている場合、画質が悪く表示されてしましますので、綺麗に表示させる場合はコチラの設定も必要です。

270 x 270(px)のアイコン Windowsタイル用

<meta name="msapplication-TileImage" content="270x270.png" />

意外と知られていないwindows用のタイル用のアイコンです。

まとめ

もう少し省いて書くこともできますが、ある程度の端末ブラウザをカバーして一番きれいに表示されるようにするには最適なコードになっていると思いますが、だいぶ最低限にまとめてありますので、色々カスタマイズしてご使用いただけたら嬉しいです。

おまけ各ソフトで出力する方法

WEBツールなどを使用しても書き出すことは可能ですが、Adobeのソフトを使用して書き出すことも可能です。

わざわざサイトにアクセスする必要もなく自分のPCだけで解決することができるようになりますので、是非そちらの記事もご覧ください。