faviconとapple-touch-iconを設定してみた。HTMLサイトの小さなアイコン調整とは？

前回は、AIでHTMLサイトのフォームを調整した話をしました。

前回の記事はこちらです。

AIでHTMLサイトのフォームを調整してみた。問い合わせ・申込フォーム・reCAPTCHAとは？

faviconとapple-touch-iconを設定してみた

今回のHTMLサイトでは、faviconとapple-touch-iconを設定しました。

faviconは、ブラウザのタブなどに表示される小さなアイコンです。
apple-touch-iconは、iPhoneやiPadでホーム画面に追加したときなどに表示されるアイコンです。

どちらも、かなり小さな要素です。

ただ、サイトの印象を整えるうえでは、見逃したくない部分でした。

今回、設定したもの

favicon.ico
favicon.svg
apple-touch-icon.png

ブラウザや端末によって、使われるアイコン形式が変わることがあります。

そのため、複数の形式を用意しました。

faviconとは？

faviconとは、ブラウザのタブやブックマークなどに表示される小さなアイコンです。

サイトを開いたときに、タブの左側に小さく表示されることがあります。

その小さなアイコンが、faviconです。

faviconが表示される場所

faviconは、主に次のような場所で表示されます。

ブラウザのタブ
ブックマーク一覧
ブラウザの履歴
検索結果の一部
スマホブラウザの表示

とても小さいので、細かいデザインは見えにくいです。

そのため、faviconでは、分かりやすさが大切です。

小さいからこそ、単純な方が良い

faviconは、小さく表示されます。

複雑な画像を使うと、つぶれて見えることがあります。

細かい文字を入れても、ほとんど読めません。

そのため、faviconでは、次の点を意識した方が良いでしょう。

形を、シンプルにする
色数を、増やしすぎない
小さくても、認識しやすくする
背景との contrast を、確保する
細かい文字を、入れすぎない

faviconは、ロゴ画像そのものを縮小すれば良い、というものでもありません。

小さく表示されたときに、どう見えるかが大切です。

apple-touch-iconとは？

apple-touch-iconとは、iPhoneやiPadで、Webサイトをホーム画面に追加したときに表示されるアイコンです。

スマホのホーム画面に、アプリのような見た目で表示されることがあります。

そのときに使われるのが、apple-touch-iconです。

apple-touch-iconが使われる場面

iPhoneで、ホーム画面に追加したとき
iPadで、ホーム画面に追加したとき
一部のブラウザや端末で、サイトアイコンとして使われるとき

faviconよりも、大きく表示されることがあります。

そのため、画質の粗さが目立ちやすいです。

今回も、実際にiPhoneで試したときに、画質が気になりました。

実機iPhoneで、画質の粗さに気づいた

apple-touch-iconは、設定しただけでは安心できません。

実際にiPhoneでホーム画面に追加してみると、見え方が分かります。

今回も、実機で確認しました。

すると、最初のアイコンは、かなり画質が悪く見えました。

実機確認で気づいたこと

小さい画像を使うと、荒く見える
圧縮が強いと、ぼやけて見える
細かい要素は、つぶれて見える
明るすぎる画像は、境界が分かりにくい
実際のホーム画面で見ると、印象が変わる

PC上で見て問題なさそうでも、スマホでは違って見えることがあります。

これは、サイト本体のデザイン確認と同じです。

実物で見ることが、とても大切でした。

apple-touch-iconは、PNGが基本

apple-touch-iconでは、PNG形式が基本です。

iPhoneやiPadで安定して使いやすい形式だからです。

今回も、apple-touch-iconにはPNGを使いました。

PNGが向いている理由

対応環境が、安定している
アイコン用途で、扱いやすい
透過にも、対応できる
JPEGより、文字や図形がにじみにくい
apple-touch-iconとして、一般的に使われている

画像形式には、JPEG、PNG、WebP、AVIFなどがあります。

サイト本体の画像では、WebPやAVIFが便利なこともあります。

ただ、apple-touch-iconでは、PNGを使うのが安心です。

apple-touch-iconのサイズは、180×180pxを使った

apple-touch-iconでは、サイズも大切です。

今回のサイトでは、180×180pxのPNG画像を設定しました。

これは、iPhone向けのアイコンでよく使われるサイズです。

サイズで気をつけたこと

小さすぎる画像を、使わない
表示時に、ぼやけないようにする
正方形の画像を、用意する
端に、重要な要素を寄せすぎない
ホーム画面で、自然に見えるか確認する

アイコンは、端が丸く処理されることがあります。

そのため、重要な要素を端ぎりぎりに置くと、見切れる可能性があります。

余白を少し持たせると、安心です。

今回は、既存の画像を参考にした

今回、apple-touch-iconの調整では、既存のプロフィール画像も参考にしました。

完全に新しいアイコンを作る方法もあります。

ただ、今回は既存の、このは屋らしい画像を使いながら、見え方を調整しました。

既存画像を使うメリット

すでに、このは屋らしさがある
新しく作るより、安心感がある
既存サイトとのつながりを、保ちやすい
まったく別の印象に、なりにくい

新しく作ることが、必ず良いとは限りません。

すでに使っている画像に、ブランドとしての蓄積がある場合もあります。

今回は、その方向で進めました。

faviconとロゴは、同じでなくても良い

今回のコーポレートサイトでは、ロゴを大きく使う方針にはしませんでした。

最終的には、ロゴに頼らず、余白、文字、色でサイトの印象を作っています。

ただし、faviconやapple-touch-iconは設定しています。

ロゴがなくても、アイコンは必要

サイト内にロゴを大きく表示しない場合でも、faviconは必要です。

ブラウザやブックマークで、サイトを識別しやすくなるからです。

また、apple-touch-iconも、スマホで保存されたときの印象に関わります。

サイト内のロゴ表示
favicon
apple-touch-icon
OGP画像

これらは、それぞれ役割が違います。

すべて同じ画像にしなくても、問題ありません。

大切なのは、全体として違和感がないことです。

HTMLでは、どのように設定したか？

faviconやapple-touch-iconは、HTMLのhead内で設定します。

今回も、各ページのhead内に、必要なタグを入れました。

設定した主なタグ

favicon.ico用のlinkタグ
favicon.svg用のlinkタグ
apple-touch-icon用のlinkタグ

例えば、apple-touch-iconでは、画像の場所とサイズを指定します。

これにより、対応する端末やブラウザが、アイコンを読み込めるようになります。

全ページで設定することが大切

faviconやapple-touch-iconは、トップページだけに設定すれば良い、というものではありません。

下層ページからアクセスされることもあります。

そのため、各ページで読み込まれるようにしました。

今回のように、複数ページのHTMLサイトでは、設定漏れにも注意が必要です。

パスの指定にも注意した

アイコン画像を設定するときは、ファイルの場所も大切です。

HTMLから見て、正しい場所を指定しないと、画像が読み込まれません。

確認したこと

画像ファイルが、サーバーにアップロードされているか？
HTML内のパスが、正しいか？
トップページでも、下層ページでも読めるか？
キャッシュで、古い画像が出ていないか？
iPhoneで、実際に反映されるか？

アイコンは、小さいので、表示されていないことに気づきにくい場合があります。

そのため、公開後に実際のURLで確認しました。

キャッシュで、反映が遅れることがある

faviconやapple-touch-iconは、キャッシュの影響を受けることがあります。

画像を差し替えても、古いアイコンが表示され続けることがあります。

これは、ブラウザや端末が、アイコンを保存している場合があるからです。

反映確認で気をつけたこと

ブラウザキャッシュを、削除する
別のブラウザで、確認する
スマホで、ホーム画面に追加し直す
画像ファイル名やパスを、確認する
少し時間を置いて、確認する

faviconまわりは、すぐに反映されないことがあります。

変更したのに反映されない場合は、まずキャッシュを疑うと良いでしょう。

アイコンは、小さいけれど信頼感に関わる

faviconやapple-touch-iconは、小さな要素です。

サイト本文ほど、目立つわけではありません。

ただ、細部まで整っているサイトは、見たときの安心感が違います。

アイコンが整っていると、良いこと

ブラウザのタブで、サイトを認識しやすい
ブックマークで、見つけやすい
スマホのホーム画面で、きれいに見える
サイト全体の完成度が、上がって見える
細部まで整えている印象になる

大きな成果に直結する部分ではないかもしれません。

でも、コーポレートサイトでは、こうした小さな整い方も大切です。

AIに相談しながら、アイコン設定を進めた

今回のアイコン設定でも、AIに相談しました。

faviconやapple-touch-iconは、設定自体はシンプルです。

ただ、形式、サイズ、パス、キャッシュなど、確認することは意外とあります。

AIに相談したこと

faviconには、どの形式を用意するか？
apple-touch-iconは、PNGで良いか？
サイズは、何pxが良いか？
HTMLでは、どう指定するか？
画質が悪い場合、何を見直すか？
キャッシュの影響は、どう確認するか？

AIは、確認項目を整理するのに役立ちました。

ただし、最終的な見え方は、実機で確認する必要があります。

faviconとapple-touch-iconを設定するときの注意点

今回の実践をもとに、注意点をまとめます。

注意点1：小さく表示される前提で作る

faviconは、とても小さく表示されます。

そのため、複雑な画像は向きません。

形を、シンプルにする
細かい文字を、入れすぎない
小さくしても、分かる画像にする

注意点2：apple-touch-iconは画質を確認する

apple-touch-iconは、faviconより大きく表示されることがあります。

そのため、画質が荒いと目立ちます。

180×180px以上を、用意する
PNG形式を、使う
実機iPhoneで、確認する
ホーム画面に追加して、見え方を見る

注意点3：全ページで読み込まれるようにする

下層ページからアクセスされることもあります。

そのため、全ページでアイコン設定が入っているか確認します。

トップページ
下層ページ
フォームページ
テンプレートページ
規約ページ

注意点4：反映されないときはキャッシュを見る

faviconやapple-touch-iconは、キャッシュが残りやすい部分です。

画像を差し替えても、すぐに変わらないことがあります。

キャッシュを削除する
別ブラウザで見る
スマホでは、ホーム画面に追加し直す
ファイル名やパスを確認する

今回、設定して感じたこと

faviconとapple-touch-iconは、かなり小さな設定です。

でも、やってみると、意外と確認することがありました。

感じたこと

小さなアイコンでも、サイトの印象に関わる
PCだけでなく、スマホ実機で確認することが大切
PNGやSVGなど、形式ごとの役割を知っておくと安心
キャッシュで、反映確認が分かりにくいことがある
細部まで整えると、サイト全体の完成度が上がる

アイコンは、見落とされがちな部分です。

でも、コーポレートサイトとして公開するなら、整えておきたいところです。

まとめ

今回は、faviconとapple-touch-iconを設定した話をしました。

要点をまとめます。

faviconは、ブラウザのタブやブックマークに表示される小さなアイコン
apple-touch-iconは、iPhoneなどでホーム画面に追加したときに使われるアイコン
faviconには、icoやsvgを用意した
apple-touch-iconには、PNG形式を使った
apple-touch-iconは、180×180pxを基本にした
実機iPhoneで見ると、画質の違いに気づきやすい
全ページで、アイコンが読み込まれるように設定した
反映されないときは、キャッシュの影響も確認する

faviconやapple-touch-iconは、サイト制作の中では小さな部分です。

でも、小さな部分まで整えることで、サイト全体の印象は良くなります。

実際のコーポレートサイトはこちらです。

このは屋のコーポレートサイトを見る

このは屋

このは屋｜自分の商売を、自分で育てる。 AIとテンプレートを味方に、外注業者へ依存せず、商売の仕組みを自分の手でつくるための学び舎。

あなたがHTMLサイトを作る場合も、最後にfaviconとapple-touch-iconを確認してみてください。

ブラウザのタブで、自然に見えるか？
スマホのホーム画面で、きれいに見えるか？

小さな確認ですが、サイトの仕上がりに関わります。

次回は、AIで作った画像や素材の商用利用について、お話しします。

生成画像、フォント、アイコンなど、安心して使うために確認したことを整理します。