【HTML】アップルタッチアイコン(apple-touch-icon)とsvg形式のファビコン(favicon)を作成・設定する

プロモーションが含まれています

【HTML】アップルタッチアイコン(apple-touch-icon)とsvg形式のファビコン(favicon)を作成・設定する


今まではico形式で設定していたファビコンを、svg形式で作成した画像で表示させます。
ついでにファビコンの作り方とアップルタッチアイコン(apple-touch-icon)、それぞれのサイズについても書いていきます。

jQuery関連記事

関連記事をもっとみる

ファビコン（favicon）とは

ファビコンとは、ブラウザのアドレスバーやブックマークで、サイト名の左側に表示されるアイコンのことです。
ファビコンは複数タブでのサイトを開いている場合や、ブックマーク一覧画面に表示されるので、自分のサイトが見つけやすくなり、ユーザビリティも良くなります。

アップルタッチアイコン（apple-touch-icon）とは

ファビコンと同じようなもので、アップルタッチアイコンというものもあります。

アップルタッチアイコンというのは、サイトをスマホのホーム画面に追加したときに表示されるアイコンで、一見アプリのような外観でサイトを追加できます。
ファビコンを作るなら、ついでなので一緒に設定しておきましょう！

ファビコンのサイズに合わせた画像を準備

まずはillustratorなどで、ファビコンにしたい画像を準備してください。
ラスター形式なので拡大・縮小しても画質が劣化しないため、サイズは特に気にする必要はありませんが今回は、32x32pxの正方形で作成し、svg形式で保存してください。
細かい線は表現しにくいので注意が必要です。

HTMLファイルに記述

HTML

<head>
  <meta charset="UTF-8">
  ...
  <link rel="icon" href="images/favicon.svg" type="image/svg+xml">
</head>

head内にlinkタグで指定するだけです！svgなのでtype="image/svg+xml"となっています。
これでファビコンが反映されます。

ダークモードに対応させる場合

svg形式のいいところは、ダークモードにも対応できるところです！
svgファイルをエディターで開き、styleタグを使って直接CSSを記述します。

SVG

<style>
  path {
    fill: #B5DB53; /*ライトモードでの色*/
  }

  @media (prefers-color-scheme: dark) {
    path {
      fill: #9DDB00; /*ダークモードでの色*/
    }
  }
</style>

アップルタッチアイコンのサイズに合わせた画像を準備

ファビコンで使った画像を、今度はアップルタッチアイコンのサイズに合わせた、png形式の192x192pxで出力してください。

HTMLファイルに記述

HTML

<head>
  <meta charset="UTF-8">
  ...
  <link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>

ファビコンとアップルタッチアイコンを同時に書くには

HTML

<head>
  <meta charset="UTF-8">
  ...
  <link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
</head>

コメント

タイトルとURLをコピーしました