Web屋の芝生DIYではfaviconを設定していないなと思い、サイトのブランディングを高めるためにも設定することに。本記事では、PCやスマートフォンの様々な場所で表示されるfaviconの設定方法とその役割についてまとめてみました。icon」の略で、Webサイトのシンボルマークです。普段Webサイトを閲覧するシーンでよく目にすることなるため、サイトの印象を決定づける重要な要素となります。表示される場所スマートフォンのホーム画面スマートフォンのブラウザ(Chrome)のブックマーク一覧スマートフォンのブラウザ(Chrome)のタブ選択時スマートフォンのブラウザ(Safari)のお気に入りPCブラウザのタブPCブラウザのタブックマーク一覧PCブラウザのアドレスバーこうして列挙してみると、本当に多くの場所で表示されることがお分かりいただけるかと思います。faviconを設定するメリットfaviconを設定することで主に以下のメリットを生み出すことができます。他のサイトと差別化することができるせっかくユーザーがサイトを気に入りブックマークに追加してくれても、faviconが設定されていないと他のブックマークに埋もれがちです。そのため再訪問率も変わってきます。したってfaviconが設定されているサイトのほうが目に入ってきやすいので、その差は明らかです。設定しておくことで「ああ、このアイコンのサイトだな」とユーザーが視覚的に覚えやすくなります。誰でも知っている企業のサイトをいくつか見てみてください。ほとんどのサイトが設定されていることでしょう。小さいfaviconですが、サイトの完成度やブランディングの向上にfaviconは一役買っているわけです。有名サイト相手でも、faviconを設定していればサイト規模では劣っても、ブックマーク一覧などでは同等の勝負をすることが可能になります。昔とは違ってfavicon1つ作るにしても、レスポンシブなWebサイトの考え方同様、各デバイスで適切に見えるよう考える必要があります。吟味する必要があります。以下のサイトで各サイズや拡張子における表示の挙動がよくまとめられていたので、参考にさせていただきました。faviconやホーム画面アイコンの指定方法2017「2017」と銘打っていますが、じっくり読むと2018年5月現在も同様の設定で問題ないと判断しました。上記のサイトで勧められている仕様同様、以下の2枚の画像を用意します。64px×64pxのfavicon.ico180px×180pxのapple-touch-icon.pngfavicon.icoは様々なサイズがありますが、64pxのサイズが最も汎用性が高く、多くの場所で問題なく表示することが可能です。apple-touch-icon.pngはfavicon.icoでカバーしきれないiOSおよびAndroid環境のホーム画面用の画像をカバーするために作成します。favicon.icoはPhotoshopなどで作成した画像をpngで書き出し、以下のサイトで.icoの拡張子に変換します。converter2以下の記述をmetaに追加favicon.icoとapple-touch-icon.pngをサイトにアップロード後、metaに以下の記述を追加します。ここではルート直下に画像を格納しましたが、任意のフォルダに格納してもOKです。sizes="180x180">3faviconが表示されることを確認PCやスマートフォンのブラウザで、ブックマークに追加してみたりホーム画面に追加するなどし、作成した画像が表示されていることを確認しましょう。まとめご紹介させていただいたように、faviconの設定を行うことでサイトを1つ上の段階へ引き上げることが可能です。「自分のサイトへの愛着も湧く」という副産物も期待できます(笑)画像を作成する手間はかかりますが、導入自体の敷居もそんなに高くありません。metaへの追加も、WordPressなどであればテンプレートに追加するだけで一気に全ページに反映させることもできます。faviconの設定の際は、ぜひ本記事をご参考にしていただければ幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。