WEBサイトを作成する時に設定する小さいながらも存在感のある「ファビコン」。
今回はそのファビコンについて初心者の方にもわかりやすく、役割や具体的な設定方法を詳しくご紹介していきます。
ぜひ最後まで見ていってください！
ファビコンとは
ファビコン（favicon）は、「favorite icon」の略で、ブラウザのタブなどに表示される小さなアイコンのことです。
ファビコンは主に以下の場所で表示されます。
・ウェブブラウザのタブ
・ブックマークバー
・ブックマークやお気に入りリスト
このアイコンがあることで、ユーザーは複数のタブやブックマークの中から特定のサイトを簡単に見つけられ、ブランドイメージをわかりやすく伝えることができます。
ファビコンの設定方法
以下の手順に従って、ファビコンを追加してみましょう。
- ファビコンとして使用する画像を用意する
- 拡張子の変換
- 画像をサーバーにアップロード
- HTMLにファビコンをリンク
- キャッシュをクリアして確認
各手順をそれぞれ説明していきます。
ファビコンとして使用する画像を用意する
まず、ファビコンとして使用する画像を用意します。
一般的には｢16px × 16px｣または｢24px × 24px｣、｢32px × 32px｣の正方形の画像が使用されます。
表示する場所によって使用サイズが異なるため、画像作成時は最大サイズの｢.png｣で作成し、複数サイズの画像をひとつのファイルにまとめることができる｢.ico｣形式に変換しておけば、サイズごとのファビコンを用意せずに済みます。
拡張子の変換
画像をファビコンとして使用するために、推奨されている「.ico」形式に変換しましょう。
jpgや.png形式のファイルは、以下の無料ツールを利用すれば簡単に「.ico」形式に変換できます。
「Favicon generator」はブラウザ上で、JPEG, PNG, GIF などの画像ファイルから favicon 用の画像(favicon.ico)を生成・変換することができます。
画像をサーバーにアップロード
作成したファビコン画像をウェブサイトのルートディレクトリにアップロードします。
例えば、「favicon.ico」という名前で保存し、アップロードすることが一般的です。
HTMLにファビコンをリンク
次に、ファビコンを表示するブラウザが「Chrome」「IE11」「Firefox」「Safari」「Opera」「Edge」の場合は、HTMLファイルの<head>～</head>セクションに以下のコードを追加します。
<head>
<link rel="icon" href="/favicon.ico" >
"ファビコン画像のパス名"
</head>「IE11」の場合は、pngやgif形式も使用可能です。
<head>
<link rel="icon" type="image/png" href="/favicon.png" >
"ファビコン画像のパス名"
<link rel=”icon” type=”image/gif” href=“/image/favicon.gif”>
"ファビコン画像のパス名"
</head>キャッシュをクリアして確認
最後に、ブラウザのキャッシュをクリアし、ファビコンが正しく表示されるかを確認します。
ブラウザのタブに新しいファビコンが表示されていれば、設定は完了です。
まとめ
今回はWebサイトの細部を彩る重要な要素であるファビコンの設定方法を紹介しました。
いかがでしたでしょうか？
簡単な手順で設定できるので、ぜひご自身のサイトにも取り入れてみてください。
ファビコンがあるだけで、ユーザーにとって見やすく覚えてもらいやすいサイトになります。
別投稿では、HTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していきますのでそちらもぜひチェックしてみてください！
コメント