検索結果の横にあるマーク(ファビコン)

検索結果を見ると、サービス名や社名の横にマークがあることにお気づきですか?

例:Google検索結果。赤枠の中のマークがファビコンです。
例:Google検索結果。赤枠の中のマークがファビコンです。

ファビコンは検索結果だけでなく、ブラウザのタブやお気に入りなどにも表示されます。

ブラウザのタブにも表示されます
お気に入り(ブックマーク)にもファビコンはあります

このように、サイトのシンボルマークとしてファビコンは効果的な役割を果たしています。

ファビコンは設定しないと表示されません。
PCだけでなく、スマートフォンなどでも表示されるため各種サイズを準備する必要があるのですが
便利なファビコン変換サイトもあるため、基本的な条件のみよい場合は比較的簡単に設置することができます。

STEP
画像を用意します

サイズは「512px × 512px」の解像度で作成するとリサイズにも対応できるのでお勧めです。
illustratorで作成する場合は、SVG形式で書きだすと解像度を気にせずキレイなファビコンを作ることができます。
画像が無い場合は、下記サイトなどでファビコンの元絵を作成することもできます。
【お勧めサイト】
favicon.cc
X-Icon Editor (xiconeditor.com)
※上記サイトで画像を作成した場合「step2」は省略可

STEP
マルチアイコン (.ico) の作成

作成した画像をマルチアイコン(favicon.ico)として作成します。
【お勧めサイト】
Favicon ジェネレーター (mintsu-dev.com)
ファビコン favicon.ico作成 リアルタイム版

STEP
ファビコンをサーバーへアップ

STEP2で作成したファビコンをサーバーへアップします。
場所はどこでも良いのですが、ルートディレクトリへ設置することが多いです。

STEP
ホームページへファビコンのタグを設置

ホームページのHTMLファイル内へ<HEAD>内へ以下のHTMLタグを埋め込みます。
※下記HTMLはルートディレクトリへファビコンを設置した場合の例です。

<link rel="icon" href="/favicon.ico">

STEP
ホームページの公開

ファビコンを埋め込んだHTMLファイルをサーバーへアップし、ホームページを公開します。

STEP
ファビコン表示の確認

ファビコンがきちんと設定されているかを確認します。
【お勧めサイト】
Favicon checker (realfavicongenerator.net)

かなり簡単な説明ですが、設置にもあまり手間がかからず かつ ブランディングでは効果のあるファビコン設置はおススメです。
またファビコンが設置されていないホームページをお持ちの方は、ぜひ設置してみてください。

サンオーコミュニケーションズでは、ファビコン設置はもちろんロゴ制作なども行います。
お気軽にお問い合わせください。

pagetop photo by 著作者:creativeart/出典:Freepik

PAGE TOP