favicon(ファビコン)ってなに?

ホームページのちょっとしたお話し。
今回はfavicon(ファビコン)についてです。

SEO対策|favicon(ファビコン)って?|メディアシードweb事業部

小さなアイコンの大きな役割

ブラウザのタブやブックマークに表示される小さなアイコン、それが 「favicon(ファビコン)」 です。
名前は favorite(お気に入り)icon(アイコン) を組み合わせたもの。まさにサイトの“顔”といえる存在です。

複数のタブを開いて「どのページが自分のサイトだっけ?」と迷った経験はありませんか?そんなときにファビコンがあれば、パッと見で見分けられる便利な目印になります。

しかも登場するのはタブだけではありません。ブックマークやスマホのホーム画面にも表示されるので、ロゴやブランドカラーを反映したデザインなら信頼感や認知度がアップ!

ファビコンを設置してみよう!

ファビコン(favicon)は、ブラウザのタブや検索結果に表示される小さなアイコンのことです。16×16px や 32×32px の画像を .ico や .png 形式 で用意すれば設定できます。

WordPressの場合

管理画面の「外観」→「カスタマイズ」→「サイト基本情報」からアップロードできます。画像サイズは実際のサイズより大きいものが推奨されているケースが多いです。アップロード画面から確認してみてください。

HTMLサイトの場合

HTMLサイトでは、手持ちの画像からファビコンを作成し、 <head> 内にタグを追記する必要があります。

画像から favicon.ico を作る手順

  1. サイトやブランドのロゴなど正方形の画像(例:500×500px)を用意
  2. 無料のオンライン変換ツールを利用
  3. PNGやJPG画像をアップロードすると、自動で16×16や32×32の .ico ファイルが作成されます
  4. ダウンロードした favicon.ico をサーバーのルートディレクトリ(例:/public_html/)にアップロード
  5. HTMLの <head> 内に以下を追記

<link rel="icon" href="/favicon.ico" type="image/x-icon" /

これでOK。ページを開くと、タブにあなたのアイコンがちょこんと表示されます。

補足

最近のブラウザは .png にも対応していますが、互換性を考えると .ico を設置しておくのが安心です。