こんにちは、asです
サイトを作る際、なくても困らないけど合ったほうがいいのがfaviconだと思います。
いざ作ろうとするといつも必要ななサイズなんだっけ?となるので、まとめておこうと思います!
いつかしたかった、サイズごとのブラウザでの表示も検証してみたので、ご興味ある方はぜひ(^^)!
コンテンツ
faviconを設定する
faviconとは?
favicon(ファビコン)とは、ブラウザーでサイトを見た際のタブ部分に、タイトルの横に表示されているアイコンです。
小さなアイコンですが、各サイトが色々と工夫して設定してます。
タブの他、お気に入り、ブックマークでもサイト名の横にも表示されるので、アクセスしやすくなるメリットもあります。
自分のサイトにfaviconつけると、ぐっと愛着もわいたりします
思いつくサイトを表示させてみました。faviconにもブランドカラーが出ていてかわいいです。
用意するサイズ
必要なサイズはなんだっけ?っていつも忘れてしまうで、まとめておきます!
次項で検証してます♪
ホーム画面とは、スマホでホーム画面に追加した際に表示されるアイコンです。こちらも次項に詳細あります。
表示場所 | サイズ | ファイル名 |
---|---|---|
各PCブラウザのタブ・お気に入り、 iOSのタブ、 PC Chrome/Edgeのスタート画面 |
16px x 16px (32px x 32px) | favicon.ico (マルチアイコン) |
PC/iOS Safariのホーム画面・ スタート画面 |
180px x 180px〜 | apple-touch-icon.png (透過非対応) |
Android Chromeのタブ・ お気に入り・ホーム画面 |
192px x 192px〜 | android-chrome.png |
用意する方法
まずはpngまたはjpgでアイコン画像を1枚作成します。ある程度の大きさ(300x300など)で作成しておくと良いと思います。
下記サイトなどのジェネレーターを使って.ico(マルチアイコン)、各サイズを一括生成します。
(かなりたくさんのサイズを一括で生成してくれるので、必要なものだけ抜き取ります。)
設定方法
設置は簡単2ステップです♪
- 各画像をFTPで任意のディレクトリにアップロードします。
- <header>~</header>の間に下記記述を追加します。(下記の例はIE9以降に絞っています。)
<link rel="icon" type="image/x-icon" href="__path__/images/favicon.ico">
<link rel="apple-touch-icon" href="__path__/images/apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="__path__/images/android-chrome-192x192.png" sizes="192x192">
__path__の部分はそれぞれアップロードした画像のディレクトリに変更してください。
これでfaviconの設定は完了です!
faviconをデバイスによって出し分けてみる
ここは興味本位なのですが、各ブラウザの表示をチェックしたいと思います!
実はいつかちゃんと検証したいなと思っていました
カップの色を変えて3つの画像を作成しました。
ピンク … 64px x 64px / favicon.ico(マルチアイコン)
水 色 … 180px x 180px / apple-touch-icon.png
緑 … 192px x 192px / android-chrome-192x192.png
検証結果
結果は下記のようになりました!
(PCの検証環境はmacです)
PC(mac)
ピンク(favicon.ico) … Chrome/Safari/Edgeのタブ・お気に入り、Chrome/Edgeのスタート画面
水色(apple-touch-icon.png) … Safariのスタート画面
Safariだけがちょっと厄介ですが、ほとんどがfavicon.icoで表示されました。
SP(Android/iOS)
ピンク(favicon.ico) … Safariのタブ
水色(apple-touch-icon.png) … iOSのホーム画面、Safariのスタート画面
緑(android-chrome.png) … iOS Safariのお気に入り、Android Chromeのタブ・お気に入り・ホーム画面、スタートアップ画面
iOS Safariが結構厄介ですね。ホーム画面・スタート画面の比較的大きく表示される部分はapple-touch-icon.pngでした。ただ、タブはfavicon.icoなのにお気に入りリストはandroid-chrome.pngとなっていました。
Androidはすべてandroid-chrome.pngなのでわかりやすいです!
ちなみにiOSで表示されるapple-touch-icon.pngは背景の透過が効きません。
上記画像でも黒くなっています。黒でもOKなロゴならそのままでも良いのですが、
それ以外の場合は透過は避けて画像を作っておきましょう♪
このサイトの設定
ここまで 綿密にfaviconを分ける必要はなかなかないかもしれませんが、
当サイトは下の2つで分けてみました。
大きい方のアイコンは、今の所Safariのスタート画面とiOSのホーム画面に追加した際に表示されています(^^)
こんなサイトをホーム画面に追加してるのは私だけでしょうが、自分のブログがホーム画面にあるのも楽しいですよ♪