ファビコンはICOファイルだけじゃない。今はSVGやPNGを設定できる

SVGのファビコン

• メリット
  ベクターデータのため、拡大・縮小をしても画質が劣化しないファビコンを表示させられる

• デメリット
  グラデーションを使った表現のファビコンの場合、SVG形式では適さないことがある

PNGのファビコン

• メリット
  デザインツールで書き出したファイルをそのまま使える

• デメリット
  ほぼない！
  しいていうと、大きめのサイズで書き出したファビコン画像をそのまま使うとパフォーマンス低下につながる

まとめ

• ファビコンはPNGとSVGが使える
• ICOがなくても問題ない
• ios用やAndroid用のアイコンを用意する
• ジェネレーターを活用すると手間が省ける

html{font-size:62.5%}は提唱者もすでに推奨していない

html{font-size:62.5%}とは？

目的は通常のブラウザのデフォルト（16px）を10px相当（16×0.625=10）に調整する手法

• メリット
  1rem=10pxと計算がしやすくなるため長年チュートリアル等で紹介されてきた

• デメリット
  ユーザーの設定やアクセシビリティ設定を無視することになり、ライブラリとの競合が発生しやすくなる

提唱者による否定

この手法のきっかけとなったリチャード・ラター氏も2010年には「実用的ではなかった」と名言している。

もともとは古いIEのバグに対応するための暫定的な手法であり、現代ではその必要性がなくなっている。

現代の推奨アプローチ

無理に10pxに変換せず…

• 8の倍数を覚える
  16,20,24など基本となる数値のパターンを頭に入れてしまう

• ツール・フレームワークの活用
  デフォルトで計算済みのクラスを利用する

• 計算の簡略化
  近年は1remを基準とした設計になれるのが一番の近道であるとしている