AFFINGERの初期設定のコーナーです！今回はブラウザに表示されるアイコン("ファビコン")やiphoneに表示されるアイコン("アップルタッチアイコン")を設定します。これらを総称して"サイトアイコン"と呼びます。
普通はファビコンやアップルタッチアイコンを設定する場合、それぞれのサイズの画像を別で用意しなければなりませんがAFFINGERなら大きい画像を１枚用意するだけであとは自動的に必要なサイズの画像に変換してくれます。すごく便利です。
これらを設定しておくと次のようなメリットがありますよ。
- 読者がブックマークや履歴からあなたのサイトをすぐ見つけることができる。
- 読者にちゃんとしたサイトだと印象付けることができる。
ビフォー、アフターはこんな感じです。これはGoogle Chromeのブラウザの例ですね。
＼ ビフォー ／
＼ アフター ／
ファビコンとは
"ファビコン"とはブラウザのブックマークバーやタブに表示される小さいアイコンのことです。また、検索エンジンの検索結果でタイトルの横に表示されるのも"ファビコン"です。未設定の今は、WordPressのアイコン(青い丸に白い"W")が表示されていると思います。また、検索結果にはグレーの地球マークが表示されています。
アップルタッチアイコン"とはiPhoneやiPadに表示されるアイコンのことです。
サイトアイコン(ファビコン)の設定の仕方
サイトアイコンの設定の仕方はとても簡単です。画像を１枚用意してそれを管理画面からアップロードするだけです。
画像を用意する
画像を用意します。作る上でのポイントは次の通り。
サイズ、形式
- サイズ：512 × 512ピクセル以上の正方形
- 形式はpng推奨
作成時の注意点
- ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
- わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンはNG。
実例１："Canva"で作成
フリー画像編集サービス"Canva"でサイトアイコンを作ってみます。手順は次の通りです。
- "デザインを作成" ＞ "カスタムサイズ"より512×512の大きさのデザインを作成
- 上のポイントを意識しながらデザインを作成
- 右上の"ダウンロード"ボタンよりPNG形式でダウンロード
実例２：フリー画像を探す
アイコンを作るのが面倒という人はフリー画像を探してそのまま使うこともできます。有名なサイトはこちら。両方ともちょうど512px画像をダウンロードできるのでとても便利です。
今回は"ICOON MONO"よりこの画像をダウンロード使用させていただきます。
画像をアップロードする
画像が用意できたらサイトにアップロードします。サイトアイコンの設定場所はこちらです。
"サイトアイコンを選択"という箇所をクリックして先ほど準備した画像をアップロードします。
最後に"公開"ボタンを押します。
これでサイトアイコンの設定は完了です。ブラウザでちゃんと設定されているか確認してください。反映されていない場合はスーパーリロードをお試しください。