ファビコンをWebサイトに設定するには、HTMLファイルのheadセクションにlinkタグを追加する必要があります。最も基本的な設定は、rel属性に「icon」を指定し、type属性に画像のMIMEタイプ、href属性にファビコンファイルのパスを指定するlinkタグです。標準的なPNGファビコンの場合、typeは「image/png」となります。この設定により、ブラウザは指定されたファイルをファビコンとして認識し、タブやお気に入りリストで表示します。
複数のサイズや形式のファビコンを設定する場合、それぞれのlinkタグでsizes属性を指定します。例如、「sizes="32x32"」のように記述することで、ブラウザは最適なサイズのファビコンを選択できます。また、Apple Touch Icon用の設定はrel属性に「apple-touch-icon」を指定します。古いブラウザへのフォールバックとしてICO形式のファビコンも設定する場合は、rel属性に「shortcut icon」を追加するのが推奨されます。これらの設定を適切に記述することで、様々な環境でファビコンが正しく表示されます。
ファビコン生成ツールでは、生成と同時に正しいHTMLコードが自動的に生成されます。各サイズや形式に応じたlinkタグが適切な属性を含んで出力されるため、コピー＆ペーストで簡単に設定できます。headセクションの先頭付近にこれらのlinkタグを配置するのがベストプラクティスです。設定後は、ブラウザをリロードしてファビコンが正しく表示されるか確認しましょう。表示されない場合は、ファイルパスが正しいか、キャッシュをクリアして再読み込みを試みてください。