システムエンジニアこうちゃんの技術者ブログ: 1月 2026

こんばんは、こうちゃんです。

いつも当ブログをご覧になっていただきましてまことにありがとうございます。

アクセスいただけることが日々のはげみになっております。

今回は、サイト作りの際に役立つ、サイトの差別化、見栄えの向上などに役立つ、技術情報のご紹介をしていこうと思います。

その技術の概要は、

スマホサイト用のファビコン（favicon）設定

です。

ファビコン（favicon）とは、元々パソコンのブラウザ上でブラウザ上部のタブに表示されるアイコン画像のことで、ブックマークした時などにも表示されます。

何の設定も無い場合は、ブラウザごとに設定されているデフォルトのアイコンなどが表示されるようになっておりますが、昨今の、複数タブが当たり前、ブックマークも大量に登録されるのが当たり前、なブラウザの利用の仕方をしている人が多い中、このファビコン設定無しのサイトは個性が薄く、大量のサイトの中に埋もれてしまいがちです。

こちらのファビコン、スマホの場合でも、若干の仕様は異なりますが、

・ブックマーク時（PCと同じ挙動）

・複数タブの一覧画面（PCと同じ挙動）

これらに加えて、特徴の出る動作がこれ

・ホーム画面にお気に入りでショートカットを登録した時の表示アイコン

この場合もスマホ向けファビコンが表示されることとなります。

しょっちゅうアクセスするサイトなどは、一度ブラウザを開いてからブクマを見たりするのでなく、ホーム画面にショートカットを作ってそこをタップしてアクセスする方も多いですので、印象に残るファビコンはかなり大事になります。

実際、みなさまのスマホのホーム画面などで、出ているアイコンの数々の中で、特徴的なアイコンをしているアプリ、ブックマークなどはとても印象に残るかと思われます。

そして、そんなファビコンは通常の、PCブラウザ向けとは別に、スマホ向けの指定をすることができます。

画像は、PC向けですと、.icoの拡張子で指定した画像ファイルになりますが、

スマホ用でしたら、.pngのファイルで用意することになります。

そして、今のメジャーなスマホ用OSですと、iPhone、Androidがありますが、

それぞれに対して、ファビコンの指定は以下のようなタグをhead要素内に記載する方式になります。

記載はこのようなタグを書き、画像は参照できれば大丈夫ですので、

href以降のパスは好きなようにサイト内に配置して構いません。

このようにすれば、それぞれのスマホでお気に入りした時に、

指定の画像がアイコンとして表示されます。

ブラウザのタブ表示やブックマーク時など、ファビコンが目に触れる機会は意外と多いものですので、各種設定やっておくとよいです。

当ブログをご覧になってくださる方は、ほとんどはサイトを利用するエンドユーザー側の方で、ウェブ制作側の方はそう多くはないとは思いますが、もしもご興味を持たれましたら、こうした情報もぜひお役立てくださいませ。

なお、そんなファビコンを作ること自体は、画像から自作をがんばってもよいですが、サイズや複数指定など、意外と面倒だったりしますので、パソコン用のicoファイルはよくあるファビコン簡単制作サイト（検索すると色々なサービスが）を使ってしまうとよいですし。

スマホ用の画像でしたら、それこそ、今でしたら、簡単に要望を伝えるだけで画像を作ってくれる生成AIのサイトなども山のようにありますので、ぜひ活用してみてください。

こんな感じで、すばらしい画像生成機能が大量にあり、無料でも使えるというありがたい時代です。

チャットボットとの文章で、

「ファビコン用にふさわしい、正方形で〇〇の画像作って」

などのざっくり要望でも結構いい感じの画像を作ってくれますので。

（ファビコンは表示サイズが小さいのであまり複雑な画像はどうせ表示できないので）

よかったら、こちらの小技もぜひ活用してみてください。

なお、そもそもの、ファビコンってなんだよ？という方のために、

簡単に定義も載せておきます。

favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したかばん語である。

faviconのはじまりは、ウェブブラウザであるMicrosoft Internet Explorer 5によってはじめて搭載された独自の（非HTML標準の）機能であった。ユーザーが任意のウェブサイトをお気に入りに登録するときに、ウェブブラウザは該当Webサイトのディレクトリから favicon.ico ファイルの存在を調べ、ある場合はこのファイルを該当Webサイトのアイコン画像として取り込む。それ以降にお気に入り一覧を表示する際、該当Webサイトについては一般的なWebアイコンではなく取り込んだアイコン画像が表示されるようになる。これにより、他のWebサイトのアイコンよりも目立たせ、ユーザーへイメージによる直観的な選択操作への便宜を図ることができる。

現在では多くのウェブブラウザが本機能を搭載している。アイコンファイルの配置場所を link タグにより任意に指定できるようになり、従来のICO形式以外にGIF形式やPNG形式もサポートされるウェブブラウザが増えたため広く利用されている。

当初はお気に入りに登録する際にはじめて参照されたファイルであることから、このファイルのアクセス回数を調べることでお気に入りへの登録状況を計測できた。現在の多くのウェブブラウザは、Webページアクセス時に（お気に入り登録操作の有無にかかわらず）faviconを参照するため、お気に入り登録状況の計測に、faviconファイルへのアクセスカウント利用はほぼ無意味となってしまっている。

ブラウザでの対応状況

2007年現在、Internet Explorerをはじめとする主なブラウザがfaviconをサポートしているが、細部の挙動は各ブラウザによって異なる。アドレス欄やタブにアイコンが表示されてもブックマークリストに表示されないものもあれば、アドレス欄・ブックマークともに表示させるものも存在する。また、IEコンポーネントブラウザでfavicon処理機能は独自実装となるため、IEとは挙動が異なる。

favicon管理方法もブラウザによって異なるが、多くはfavicon専用のキャッシュを用いることで自動的に消えてしまうのを防いでいることが多い。

などです。

今時は無料ブログとかでも設定でfaviconをつけたりできるようになっていることも多いので、サイトやブログを作った際には、よかったらこんなfavicon設定のことも頭の片隅にとどめておいてください。

本日も当ブログをご覧になっていただきましてまことにありがとうございました。

少しでもみなさまのサイト制作ライフのお役に立てることを祈っております。

それではまた。

こうちゃん

システムエンジニアこうちゃんの技術者ブログ

2026年1月13日火曜日

スマホサイト用のファビコン（favicon）設定の方法