favicon (ファビコン) とは
上記のウェブサイトのタイトル横にあるアイコンのこと。
favicon (ファビコン) のサイズ
PCブラウザ (IE, FF, Ch, Safari など) やスマホなどたくさん表示させるシーンがある中で、
じゃあこのサイズに統一していこう。みたいなものはなく、けっこうな種類のサイズ (16px × 16px 〜) を用意しないといけない。
Favicon Generator で favicon (ファビコン) の他にも iPhone や Android のホーム画面に追加した時のアイコンなどを簡単に作成できる。
Favicon Generator で favicon (ファビコン) のアップロード
まずは「Select your Favicon picture」からアイコンにしたい画像をアップロードする。
少なくとも 70px × 70px 以上の画像であること。
推奨は 260px × 260px 以上。
favicon (ファビコン) だけで良い場合は 70px × 70px 〜 260px × 260px で良い。
favicon (ファビコン) の設置
Favicon Generator アップロードが完了したら、
1 Download your package:「Favicon packege」
クリックして DL する
2 Extract this package in the root of your web site. If your site is http://www.example.com, you should be able to access a file named http://www.example.com/favicon.ico.
DL した圧縮ファイルを解凍してその中に入っている画像やファイルを自身のサーバーにアップロードする。
アップロードする場所は http://www.example.com/favicon.ico でアクセスするとアップロードした favicon.ico らが表示される場所。
3 Insert the following code in the <head> section of your pages:
下記のコードを <head> タグの中に追加する。
ファビコンのパスやカラーなどは環境に合わせて変更する。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">