鬼滅の刃の市松模様をFaviconに

# TL;DR
それぞれのスニペットに`16x16`のfaviconを仕込んでおります。HTMLの`<head></head>`にコピペだけで利用可能で、別途アップロード不要でシングルファイルHTMLができます。
## 炭治郎の羽織
```html
<link rel="shortcut icon" type="image/x-icon" href="data:image/vnd.microsoft.icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAC61jAADw8PAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREAABERAAAREQAAEREAABERAAAREQAAEREAABERAAAAABERAAAREQAAEREAABERAAAREQAAEREAABERAAARERERAAAREQAAEREAABERAAAREQAAEREAABERAAAREQAAAAAREQAAEREAABERAAAREQAAEREAABERAAAREQAAEREAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA">
```
![Foo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/77e34163-9f40-0a0e-5cf0-3fcd14639c8b.png)


## 禰豆子の帯
```html
<link rel="shortcut icon" type="image/x-icon" href="data:image/vnd.microsoft.icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAfYA8/j3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREAABERAAAREQAAEREAABERAAAREQAAEREAABERAAAAABERAAAREQAAEREAABERAAAREQAAEREAABERAAARERERAAAREQAAEREAABERAAAREQAAEREAABERAAAREQAAAAAREQAAEREAABERAAAREQAAEREAABERAAAREQAAEREAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA">
```

![Foo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/685059d1-91a7-2533-3274-77a6c188704c.png)


# 本文
## 起因
自前のHTMLを開発する時、Faviconがないことでしばしば怒られます。
![ERB_2_SLIM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/511722f7-9138-698c-e50c-d6bf6e2e4382.png)
![DevTools_-_gist_githack_com_jerrywdlee_9953d0c4a2209c0e0389334953440bf1_raw_38b541909f26555fdc902f7ef52a63046d1af799_authenticator_html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/941c3335-9bce-d081-6d26-4578645cabfd.png)

別に放置すれば良いのですが、気持ち的にはやっぱりエラーを無くしたいです。
今までのやり方だと、お気に入りの画像を`.icon`ファイルに変換し、HTMLファイルからリファレンスしていましたが、やっぱりコスパが悪くて、なんかいい方法あるかを考えました。

## Faviconの作成
今回のメインはこちらのサイトです。
**[favicon.cc](https://www.favicon.cc/)**
16x16のFaviconを１ピクセルずつ編集可能で、ほぼ最小サイズ(筆者の実験では全て318バイトでした)の`favicon.ico`ファイルをレイアウトできます。
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/a0f40c92-fc19-c8b3-b612-d855bf90d6f1.png)
また、編集途中でも、同サイトのICONとしてリアルタイムで反映され、確認も便利です。
![favicon_ico_Generator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/4427b1b5-72b5-56eb-dfff-638f3267db52.png)

編集が終わったら、「Download Favicon」をクリックすればダウンロードできます。
![favicon_ico_Generator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/c23b6098-5cf0-2b7c-68e2-ad89f2b02f03.png)

## データURLに変換
上記手順で生成された`favicon.ico`もそのまま使えますが、ファイルのアップロードやリファレンスが必要で、シングルファイルで完結したい場合は、データURLに変換して書き込む手法があります。

今回は下記のサイトを利用しましたが、[`readAsDataURL()`API](https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsDataURL)を使ってもできます。
[画像からdataURLに変換](https://hi0a.com/demo/-js/img-base64-datauri/)

![画像からdataURLに変換.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/bc4445bf-4f21-f1dc-bcd0-5e956c17313b.png)

先ほど生成された`favicon.ico`をドラッグ＆ドロップをして、「出力されたbase64文字列」をHTMLタグの`href=""`の部分に記述すれば良いです。

もし高解像度なFaviconが必要な場合、参考リンクをご覧ください。

# 参考
**[[HTML] ファビコンの設置について](https://qiita.com/ayumisuzuki/items/5c976dc02a9aec906bf1)**
**[ファビコン favicon.icoを作ろう!](https://ao-system.net/favicon/)**