ファビコン設置と”RealFaviconGenerator”の使い方

サイトを開くとパソコンの上に表示されるタブ。その右端にはサイトのブランドをイメージできるアイコンがあります。これを「サイトアイコン」または「ファビコン」と呼び、Webサイトのシンボルです。

Favicon(ファビコン)とは、Favorite(お気に入り)とIcon(アイコン)組み合わせた言葉で、お気に入りのアイコンという意味です。小さな表示ですが、ひと目でブランドをイメージできる重要な役目を持っています。

赤い丸印が “Google社” のファビコン

ファビコンを設置する方法

ファビコンを設置するには、サイトのイメージに合った画像(イラストなど)を、グラフィックツールを使って作成します。

それでは、PNG形式で、サイズは32pxの正方形の画像を使って実際にファビコンを設置してみます。

用意したファビコン画像(32px × 32px , PNG)

用意した画像を “favicon-32×32.png” と名前を付けて “images” ファルダ―に保存します。そして “index.html” の “head” 内に以下のコードを記述します。

以下のコードを “head” 内に記述
<link rel=”icon” type=”image/png” href=”images/favicon-32×32.png”>

コードの概略

  • “kink” タグは別のファイルやページを関連付ける
  • “rel” は “relation”(関係)の略で、この記述では “icon” (アイコン)を意味している
  • “type” は 「MINEタイプ(メディアタイプ)」やリストのスタイルなどを設定するのもので、「イメージ/画像形式(PIG)」を意味している
  • “href” は「フォルダー名(場所:ファイルバス)/画像の名称(形式)」で画像を指定している

<HTML>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="icon" type="image/png" href="images/favicon-32x32.png">
</head>

<ブラウザ表示>

32px×32pxの画像を使いファビコンを設置する方法を紹介しましたが、実際には、サイトアイコンに使われる画像サイズは、ブラウザやデバイスによってサイズが異なるのでいくつかの画像サイズを用意する必要があります。

また、異なるブラウザやデバイスに対応するには “head” 内に記述する内容も異なるので、コードを書き足す必要があります。

サイトアイコンに使われている代表的なサイズ

サイトアイコンはファビコンだけでなくホーム画面やスタートメニューなどがあり、それぞれサイズが異なります。

ファビコンの代表的な画像サイズ

  • 「Internet Explorer」:16px × 16px
  • 「Google Chrome」:32px × 32px
  • 「Mozilla Firefox」:32px × 32px
  • 「Safari」:32px × 32px
デスクトップ・ホーム画面(ショートカット)の代表的な画像サイズ

  • 「Microsoft Windows」:64px × 64px
  • 「iphone」:180px × 180px
  • 「ipad」:180px × 180px
  • 「Android」:256px × 256px

すべてのブラウザやデバイスに対応する”RealFaviconGenerator”

“WordPress” のプラグインでよく知られている “RealFaviconGenerator” はすべてに対応する画像の作成や、コードを作ってくれるので大変便利です。

このサイトに 512px × 512px 以上の画像をアップロードするだけで、ファビコンだけでなく、スマートフォンのホーム画面、”Windows” のスタートメニュー、タスクバーなどに使用する画像と、”head” 内に記述するコードを作成してくれます。デモ画面が表示されるので実際にどのように表示されるのかも一目でわかります。

“RealFaviconGenerator”の使い方

“RealFaviconGenerator”のURL⇒https://realfavicongenerator.net/

初期画面

初期画面が表示の “Select your Favicon image” をクリックします。PC内の任意のフォルダーが開くので、サイトアイコンに使用する画像を探して選択します。

サイトアイコンの画像を選択してアップロード

アップロードした画像が表示されるので、間違いがないことを確認して “Continue with this picture” をクリックして続行します。

アップロードした画像

取り込まれた画像が、様々なブラウザやデバイスに適したサイズとなってデモ画面に表示されます。

背景色や画像の大きさなどが細かく設定できるようになっているので、デモ画面を見ながら調整しましょう。

以下がデモ画面です。

 
 
 
 

デモ画面の最後に “Favicon Generator Options” というオプションを選択できる画面があります。画像を圧縮するオプション”Compression” をクリックすると、いくつかの圧縮された画像が表示されます。

 オプション選択画面
圧縮率を選択できる画面

圧縮率を指定して “Generate your Favicon and HTML code” をクリックすると、”Install your favicon” の画面になり、3番目の項目に様々なブラウザやデバイスに適応したHTMLコードが作られます。

自動で作成されたHTMLコード

“Install your favicon” 画面の1番目の項目に表示されている “Favicon package” をクリックすると以下のファイルがダウンロードできます。

この “Favicon package” のファイル名は自動で作成されたHTMLコードの画像名と一致しているので、パッケージのデーターを任意のフォルダー(imagesフォルダーなど)に保存して、表示されているHTMLコードを “head” 内に貼りつけると完了です。

ダウンロードした “Favicon package” (ファビコンパッケージ)

 <HTML>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
    <link rel="manifest" href="images/site.webmanifest">
    <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
</head>
HTMLを記述する際には、ファビコンパッケージを保存したフォルダーのファイルバスを追記する