【2021年最新版】ファビコン（favicon）のサイズ一覧と作り方

この記事を読むのに必要な時間は約 14 分です。

最新のファビコン（favicon）のサイズ一覧と作り方について解説します。
本当に必要なファビコンだけをピックアップしております。

初心者の方にも分かりやすく解説いたします！

この記事の目次

必要なファビコンサイズ

ファビコンのサイズが色々とありますが、必要なモノだけをピックアップしました。

サイズ	ブラウザ	ファイル名
16px x 16px	Edgeのタブ Chromeのタブ Firefoxのタブ Safariの履歴	favicon.ico （マルチアイコンにする）
32px x 32px	Retinaの各ブラウザタブ	favicon.ico （マルチアイコンにする）
180px x 180px	iOS,Safariのホーム画面 Android Chromeのタブ、ホーム画面 Mac Safariのお気に入り	apple-touch-icon.png
192px x 192px	Android Chromeのブラウザタブ、ホーム画面	android-chrome-192×192.png

上記を作っておけば問題ありません。

マルチアイコンとは？

16pxと32pxはico形式でマルチアイコンにします。
favicon.icoという1つのファイルの中に、複数サイズのファビコンを格納する事をマルチアイコンと呼びます。

ファビコンの作り方

ファビコン元の画像をPhotoshopやIllustratorで作成し、必要なサイズにリサイズする方法、そしてリサイズしたファビコンをマルチアイコンにする方法を詳しく解説します。

元画像を作成する

Photoshop（フォトショップ）やIllustrator（イラストレーター）といった画像編集ソフトを使ってファビコンを作ります。

サンプルはPhotoshop（フォトショップ）を使って512px x 512px 72px/inchで作成しました。
元画像は大きめに作って、後でリサイズすると良いでしょう。

本業が教えるPhotoshop（フォトショップ）講座はコチラ。
本業が教えるIllustrator（イラストレーター）講座はコチラ。

PhotoshopとIllustratorを導入しよう

PhotoshopまたはIllustratorが未導入の方はAdobe公式サイトからダウンロードしておきましょう。
Photoshop単体利用は公式サイトのフォトプランが最もお得です。
複数のAdobeアプリを使う場合は断然コンプリートプランがオススメですよ。
なお、AdobeCCのプランはコチラの記事で詳しく解説しています。

リサイズする

favicon-16×16.png (16px x 16px)
favicon-32×32.png (32px x 32px)
apple-touch-icon.png (180px x 180px)
android-chrome-192×192.png (192px x192px)

上記4つの画像をリサイズして別名で保存します。

Photoshopを使った画像のリサイズ方法はコチラで解説しています。

マルチアイコンを作る

リサイズしたらマルチアイコン（favicon.ico）を作ります。

STEP.1

マルチアイコン作成サイトへアクセス

マルチアイコン作成にアクセスします。

STEP.2

ファビコン対象画像を選択

[ 画像ファイル1を選択 ] をクリックし、[ favicon-16×16.png ] を選択します。

同様に [ 画像ファイル2を選択 ] をクリックし、[ favicon-32×32.png ] を選択します。

STEP.3

アイコン作成ボタンをクリック

[ アイコン作成 ] をクリックします。

FINISH

ダウンロードしてリネーム

[ ダウンロード ] をクリックすればマルチアイコンになったicoファイルの完成です。

ダウンロード後はファイル名を [ favicon.ico ] に変更しておきましょう。

「Favicon Generator. For real.」なら一括変換で楽

ファイルをリサイズするのが面倒な場合は「Favicon Generator. For real.」で一括変換すると楽です。

STEP.1

ファビコン画像を選択

[ Select ypur Favicon image ] をクリックし、512pxのファビコン用元画像を選択します。

STEP.2

Generate your Favicons and HTML codeをクリック

画面下部にある [ Generate your Favicons and HTML code ] をクリックします。

STEP.3

ファビコン一式をダウンロード

[ Favicon package ] をクリックし、ファビコン一式をダウンロードします。

FINISH

zipの中を確認

zipを開くと各種サイズのファビコンが入っています。

android-chrome-192×192.png
apple-touch-icon.png
favicon.ico

上記3つを使えばOKです。

meta記述用コード

記述用のmetaタグです。
対象のHTMLに記述します。
コピペして利用してください。

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png">

画像のパスは適宜変更してください。
以上でファビコンの設置が完了です。

ワンランク上のファビコン素材

ファビコン作りにはIllustratorやPhotoshopが便利です。
上記2つのアプリはグラフィック制作全般で大活躍！

しかしゼロからファビコンのアイコン作りは意外と大変です。
IllustratorやPhotoshopを使って制作をするのが王道ですが、便利すぎるツール故に修得に時間が必要！

かと言ってデザイナーを稼働させる程の事でも無いし…
そんな時は商用利用可能な超高品質な素材を使うと時間・手間・費用を劇的に軽減できます。

下記でIllustrator形式のファビコンに最適なアイコン素材をピックアップして紹介しております。

ファビコン作りはIllustratorがオススメ

ロゴ制作にはIllustrator（イラストレーター）が最適です。
イラレはベクター画像なので拡縮による劣化は無く、クッキリとしたグラフィック制作が大得意！
まだIllustratorを導入されていない方はAdobe公式サイトから入手しておきましょう。