Web サイトに必要なファイル
- favicon.ico:タブに表示される定番のアイコン。16・32・48 ピクセルの 3 サイズを 1 つのファイルにまとめているので、ブラウザがいちばんきれいなものを選びます。
- apple-touch-icon.png(180 × 180):iPhone や iPad のホーム画面にサイトを追加したときに使われます。
- android-chrome-192x192.png と 512x512.png:Android やインストール可能な Web アプリで使われ、site.webmanifest に記載します。
くっきり見えるファビコンのコツ
ファビコンはとても小さいので、シンプルさが大切です。太い文字 1 つ、絵文字 1 つ、すっきりしたロゴマークのほうが、細かい絵よりずっと見やすくなります。16 px のプレビューで何か分からなければ、もっと簡単にしましょう。Apple は透明部分を黒で塗りつぶすため、透過デザインなら背景色を付けるのがおすすめです。
絵文字をファビコンにする
好きな絵文字を入力して背景色を選ぶだけ。絵文字はいま使っている端末のフォントで描かれるので、Apple・Google・Microsoft どれかのデザインになります。PNG に保存したあとは、どこで見ても同じ見た目です。
画像はアップロードされる?
されません。処理はすべてお使いのブラウザの中で行われ、画像が端末の外に出ることはありません。ページを開いたあとはオフラインでも使えます。