AFFINGER6 サイトアイコン（ファビコン）の設定方法！

サイトアイコン（ファビコン）画像の推奨サイズ

サイトアイコン（ファビコン）画像は正方形のものを使用します。（特に以下のサイズが推奨されています）

• 512×512ピクセル
  • 現在のブラウザやデバイスで標準的にサポートされているサイズです。
• サイズが小さい場合、画質が低下したり、ぼやけたりする可能性がありますので注意してください。

サイトアイコン（ファビコン）画像の推奨形式

サイトアイコン（ファビコン）に適した画像形式は以下の通りです。

• PNG形式
  • 高画質で透明背景をサポートするため、最も一般的に使用されます。
• JPEG形式
  • 透明背景はサポートされませんが、シンプルなデザインの場合に利用可能です。
• webP形式（当サイトで採用しています）
  • 他の形式（JPEGやPNG）よりもファイルサイズを大幅に削減可能です。画像の軽量化と高品質を両立できるため、Webサイトのパフォーマンス向上に大きく貢献します。
    （注意一部の古いブラウザではサポートされていない場合があります）
• SVG形式
  • 拡大縮小しても画質が劣化しないため、最近はこの形式も人気です。
    （注意一部の古いブラウザではサポートされていない場合があります）

サイトアイコン（ファビコン）のデザインポイント

サイトアイコンは非常に小さく表示されるため、以下の点を意識してデザインしましょう。

• シンプルなデザイン
  • 複雑すぎるデザインは小さいサイズでは認識しづらくなります。
• コントラストのある配色
  • 背景とアイコンの色がはっきりしていると目立ちます。
• ブランドを反映する要素
  • ロゴやシンボルマークを活用し、サイトの個性を表現しましょう。

画像作成ツールの活用

以下のような無料ツールを使えば、簡単にファビコン画像を作成できます。

• PhotoScape X （当サイトで使用しています）おすすめ
  • 初心者から上級者まで使いやすい無料の画像編集ツールです。
• Canva（当サイトで使用しています）
  • 初心者でも直感的にデザイン可能なツールです。
• Favicon.io（サイトに飛びます）
  • ファビコン専用の作成・変換ツールです。

• ブラウザのタブ
  • 設定したファビコンが正しく表示されているかを確認します。
• スマホのホーム画面
  • スマホでサイトをショートカット登録して、アイコンが正常に表示されているかチェックします。
• ブックマーク
  • ブラウザのブックマークリストで、設定したアイコンが反映されているかを確認します。

ファビコンが変更されても、ブラウザに古いキャッシュが残っていると反映されないことがあります。

• キャッシュをクリア
  • 各ブラウザの「キャッシュ削除」機能を使って更新します。
• シークレットモードで確認
  • キャッシュの影響を受けないため、シークレットモードで表示確認するのもおすすめです。

主要なブラウザ（Chrome、Safari、Firefox、Edgeなど）でサイトを確認し、すべての環境で正しく表示されているか確認しましょう。