HTML / CSS
ファビコン（Favicon）
ファビコン（favicon）とは、「Favorite icon（お気に入りのアイコン）」が派生したIT用語で、internetExplore5から追加された機能
最近のデバイスやブラウザに対応させる最小限のファビコンセットには、3つのアイコンで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて3つだけです。
meta記述用コード
meta
サイズ
| サイズ | ブラウザ | ファイル名 |
|---|---|---|
| 16px x 16px | Edgeのタブ Chromeのタブ Firefoxのタブ Safariの履歴 |
favicon.ico（マルチアイコンにする） |
| 32px x 32px | Retinaの各ブラウザタブ | favicon.ico（マルチアイコンにする） |
| 180px x 180px | iOS,Safariのホーム画面 Android Chromeのタブ、ホーム画面 Mac Safariのお気に入り |
apple-touch-icon.png |
| モダンブラウザ用 （ライトテーマ・ダークテーマ） |
favicon.svg | |
| 512px x 512px | WordPress | wp-site-icon.png（png、jpeg、svgなど） |
マルチアイコン
16pxと32pxはico形式でマルチアイコンにします。
favicon.icoという1つのファイルの中に、複数サイズのファビコンを格納する事をマルチアイコンと呼ぶ
「マルチアイコン作成」ツールで16pxと32pxサイズの画像を選択して「favicon.ico 」作成
WordPress
WordPressのファビコンは「512px x 512px」が一つあればOK
png、jpeg、svgなどで書き出した画像をファビコンに使用する
デフォルト機能を使う
WordPress管理画面の左メニューから、「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」でファビコンの設定する
※設定個所は使用テーマによって変わる
テーマファイルを編集する
WordPress管理画面の左メニューから、「外観」→「テーマエディター」→「header.php」の編集画面を開き設定する
svgアイコン
「svg」ファイルを作成できないときに使用。ファイルをある形式から別の形式に変換できます。