[HTML] サイトにアイコンを設定する

Webページにアイコンを設定する方法です。

アイコンの種類

ページに設定できるアイコンには以下３種類があります。

【ブラウザ用のアイコン】
ブラウザのタイトル部分や、お気に入りのタイトルの先頭などに表示されるアイコン
ファビコンと呼ばれるものです。

【スマホ用のアイコン】
スマホのホーム画面に表示されるアイコン

【Windows用のアイコン】
Windowsのスタート画面にショートカットを追加した時に表示あれるアイコン

この３つがあること理解してから設定しましょう。

設定サンプル

■ブラウザ用のアイコンを設定する

<link rel="icon" href="favicon.ico">
<link rel="icon" type="image/png" href="/favicon.png">　⇒png画像の場合
<link rel="icon" type="image/gif" href="/favicon.gif">　⇒gif画像の場合

上記のようにico形式でなくともpngやgif形式も指定可です。

■スマホ用のアイコンを設定する

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

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

apple～となっていますが、AndroidもこれでOKです。

■Windows用のアイコンを設定する

<meta name="application-name" content="＜サイト名＞"/>
<meta name="msapplication-square70x70logo" content="s70x70.png"/>
<meta name="msapplication-square150x150logo" content="s150x150.png"/>
<meta name="msapplication-square310x310logo" content=s310x310.png"/>
<meta name="msapplication-wide310x150logo" content="w310x150.png"/>
<meta name="msapplication-TileColor" content="#0000ff"/>

備考

上記は一般的に使用される一例です。さらに細かい設定も可能です。