html favicon 設定

<h1>はじめに</h1>
iconの生成からhtmlコーディング<br>
アイコン用のsvgファイルを持っていない方向けの解説です。

<ul>
<li>サイトを表示した時に、タイトルしか表示されないので、悲しい。
<li>お気に入りアイコンが表示されなくて、悲しい。
</ul>

検索ワード:html favicon/HP用ブックマークアイコン/お気に入りアイコン/サイトurlアイコン/HP favicon<br>

<h1>用意するもの</h1>
<ul>
<li>favicon アイコン<br>
ブックマーク\お気に入り\サイトurl　表示用画像<br>
700*700px 以下 画像形式：svg 又はpng jpg<br>
(svgがあれば色々と省くことができます。)

<li>HPのhtml
</ul>

<h1>お気に入りアイコン　設定</h1>
<h2>favicon(アイコン)を生成</h2>
<ul>
<li>今回はpng.jpg画像のアイコン生成についての解説。

様々な表示ディスプレイに対応するiconを作ります。
(例：PC、スマホ、タブレット等)

色々なサイズを作るため、外部サイトでアイコンを一括生成します。

<li>外部サイト：様々なファビコンを一括生成。favicon generator(https://ao-system.net/favicongenerator/)

:::note info
画像がsvgであれば、変換しなくて大丈夫ですが、注意点があります。
※svg対応していないブラウザ：ie等の古いブラウザ
ie等の古いブラウザに対応したい時は、変換してsvgと一緒にhtmlコードで指定。
:::

<h3>faviconを一括生成</h3>

<h4>様々なファビコンを一括生成。favicon generator</h4>
今回はこの外部サイト：<a helf="https://ao-system.net/favicongenerator/">様々なファビコンを一括生成。favicon generator</a>を使っていきます。

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

サイトアクセス

![favicon1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775234/8b0bc094-7a8b-0556-045c-f178ae9a29fd.png)<br>

ファビコン一括生成　クリック
![favicon2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775234/95087658-e5b2-86b5-0520-c575867240c6.png)<br>

ファビコンダウンロード(左下)　クリック　(zipダウンロードが始まります)
![favicon3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775234/6029864a-db29-4a5d-3292-7491b80f648f.png)<br>

favicon設定用htmlコード　※サイト下にスクロール
![favicon4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775234/92d7d750-fcb2-dc65-b402-aa4e28080d41.png)<br>

favicon作成　終了

<h2>favicon 作成後　html反映</h2>
<h3>htmlファイルにfavicon画像を追加</h3>
<li>favicon.zipを展開

![favicon6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775234/f24def98-f296-42a9-b32f-118271c3b5c2.png)

・私は展開した後にpngファイルのごちゃごちゃなのが嫌なので、favicon内にpngファイルを作成し、pngファイルを移動しています。
※favicon generatorでコピーした、デフォルトhtmlコードを使いたければ移動しないでください。

![favicon7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775234/e2c2235f-20ad-9029-6383-80960cda9bfa.png)

<li>html コード編集

head　記載

```
<!-- favicon -->
<meta name="msapplication-square70x70logo" content="favicon/png/site-tile-70x70.png">
<meta name="msapplication-square150x150logo" content="favicon/png/site-tile-150x150.png">
<meta name="msapplication-wide310x150logo" content="favicon/png/site-tile-310x150.png">
<meta name="msapplication-square310x310logo" content="favicon/png/site-tile-310x310.png">
<meta name="msapplication-TileColor" content="#0078d7">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="favicon/png/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicon/png/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicon/png/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicon/png/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicon/png/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicon/png/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicon/png/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicon/png/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/png/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="36x36" href="favicon/png/android-chrome-36x36.png">
<link rel="icon" type="image/png" sizes="48x48" href="favicon/png/android-chrome-48x48.png">
<link rel="icon" type="image/png" sizes="72x72" href="favicon/png/android-chrome-72x72.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/png/android-chrome-96x96.png">
<link rel="icon" type="image/png" sizes="128x128" href="favicon/png/android-chrome-128x128.png">
<link rel="icon" type="image/png" sizes="144x144" href="favicon/png/android-chrome-144x144.png">
<link rel="icon" type="image/png" sizes="152x152" href="favicon/png/android-chrome-152x152.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon/png/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="256x256" href="favicon/png/android-chrome-256x256.png">
<link rel="icon" type="image/png" sizes="384x384" href="favicon/png/android-chrome-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon/png/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="36x36" href="favicon/png/icon-36x36.png">
<link rel="icon" type="image/png" sizes="48x48" href="favicon/png/icon-48x48.png">
<link rel="icon" type="image/png" sizes="72x72" href="favicon/png/icon-72x72.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/png/icon-96x96.png">
<link rel="icon" type="image/png" sizes="128x128" href="favicon/png/icon-128x128.png">
<link rel="icon" type="image/png" sizes="144x144" href="favicon/png/icon-144x144.png">
<link rel="icon" type="image/png" sizes="152x152" href="favicon/png/icon-152x152.png">
<link rel="icon" type="image/png" sizes="160x160" href="favicon/png/icon-160x160.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon/png/icon-192x192.png">
<link rel="icon" type="image/png" sizes="196x196" href="favicon/png/icon-196x196.png">
<link rel="icon" type="image/png" sizes="256x256" href="favicon/png/icon-256x256.png">
<link rel="icon" type="image/png" sizes="384x384" href="favicon/png/icon-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon/png/icon-512x512.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/png/icon-16x16.png">
<link rel="icon" type="image/png" sizes="24x24" href="favicon/png/icon-24x24.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/png/icon-32x32.png">
<link rel="manifest" href="favicon/manifest.json">
<!-- /favicon -->
```

html head favicon 書き込み　終了

終わり