faviconの設定のお話

faviconとは、アドレスバーやタブ、PWAでインストールしたときのアイコンなどに使われるシンボルマーク。
(本ページを開いているタブを見ると設定されていることがうかがえる)

現在までに様々なデバイスなどでWebページは見られます。
私が設定したときに躓いた点について記載しようと思います。

さまざまなデバイス、設定に考慮する必要がある

主に使われている端末として、PC端末とスマートフォン端末(Android/iOS)が主にあります。
上記の端末に対応をする場合、それぞれに対応する設定をWebページに適用します。
例えば下記のコードを記載すればブラウザのタブ、ブックマーク等で確認することができます。

HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
      <link rel="icon" sizes="16x16" href="/favicon.ico" />
...

Android/iOS端末に対応するためには、以下のコードを追加します。

HTML
<!-- ios -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Android -->
<link rel="manifest" href="/manifest.json" />

待ってください、なんでAndroidはJsonファイルなんですかと対応するものによって書くコードや対応しているファイルも異なってきます。

使われる場所拡張子サイズ
faviconブラウザのタブ、ブックマーク等icon, svg16×16
32×32
48×48
apple-touch-iconiPhoneのホーム画面、
Safariのお気に入り画面等
png180×180
manifest.jsonAndroidのホーム画面等png192×192
512×512

一覧で見るとさらにバラバラなことが見えてきました。
拡張子はもちろんのことサイズもバラバラですAndroidとiosは拡張子こそ同じですがサイズが全く異なります。
各それぞれの端末の設定に注意して設定していく必要があります。
私は、この設定の複雑さに少し手こずりました。
(ブラウザの開発者モードでは設定できているのに、pixel6では設定が適用されていない箇所があったりなど・・・)

faviconが設定されているか確認したい場合

確認をするためにFavicon checkerというサイトあり、このサイトで対象のWebサイトのURLを入力することで意図したファビコンが設定されているかを確認することができます。
Android/iosのどちらかがないけどちゃんと設定できているかを確認したいときに便利ですね。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA