ファビコンの作り方・設定方法

小さくても見分けられる形にする

ファビコンにも店のロゴを使えますが、長い店名や細い線が入っていると、小さくしたときにつぶれてしまいます。たとえば花の絵と店名を組み合わせたロゴなら、花の絵だけを使う方法があります。

候補を作ったら、画像編集アプリで小さく表示します。花の輪郭が残っているか、細い線が消えていないか、ほかのマークと見分けられるかを見てください。細かな模様を減らし、形と店の色を残すなどの調整ができます。

作成サービスの設定欄に登録する

管理画面で「サイトアイコン」「ファビコン」などの設定を探し、そのサービスが指定する形式や大きさに合った画像を登録します。保存とは別に公開の操作が必要な場合は、その操作も行います。

設定欄が見つからなければ、制作者へ画像を渡し、「ブラウザーのタブに出るマークとして設定してください」と伝えられます。作成サービスの設定欄で登録できる場合は、HTMLの記述を別に加える必要はありません。

HTMLに設定を書く場合

コードを編集して作っているサイトでは、HTMLのheadという設定用の部分に、次のような記述を入れます。公開するサイトが https://example.com/ なら、この記述で指定する画像の場所は https://example.com/favicon.png です。

記述を追加するだけでは画像は作られません。favicon.pngを実際にその場所へ置く必要があります。ホーム画面へ追加するためのアイコンなどは、別の設定が必要になる場合があります。

下のコードは公開サイト用の例です。パソコン内で試す場合は、HTMLファイルと同じフォルダーへ画像を置き、href="/favicon.png" の部分を href="favicon.png" に変えます。先頭の「/」を外すと、同じフォルダーにある画像を指定できます。

<link rel="icon" href="/favicon.png" type="image/png">

マークが表示されないとき

公開ページを開いてもマークが出ない場合は、画像を正しく登録できているかを見直します。新しいマークではなく以前のものが出るなら、古い画像がブラウザーに残っている可能性があります。

自分でHTMLを編集している場合は、コードに指定した画像のURLを直接開きます。画像が表示されなければ、画像の置き場所やファイル名を直す必要があります。画像は表示されるのに、タブのマークが変わらない場合は、関連記事のキャッシュの確認方法も参考になります。

Google検索の結果に出るマークは、ブラウザーのタブとは別に更新されます。タブのマークを変更した直後に検索結果も変わるとは限らず、設定した画像が必ず表示されるわけでもありません。サイト上の設定は、公開ページのタブで確認できます。