最新のファビコン（favicon）のサイズ一覧と作り方について解説します。
本当に必要なファビコンだけをピックアップしました！
ファビコンサイズや作り方についてWebデザイン初心者の方にも分かりやすく解説いたします。
この記事の目次
ファビコンのサイズが色々とありますが、必要なモノだけをピックアップしました。
| サイズ | ブラウザ | ファイル名 |
|---|---|---|
| 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 |
| 256px x 256px | Android Chromeのブラウザタブ、ホーム画面 | android-chrome-256×256.png |
上記を作っておけば問題ありません。
ファビコンに使える主なファイル形式は「.svg」「.png」「.ico」「.gif」などがあります。
favicon.icoという1つのファイルの中に、複数サイズのファビコンを格納する事をマルチアイコンと呼びます。
ファビコン元の画像をPhotoshopやIllustratorで作成し、必要なサイズにリサイズする方法、そしてリサイズしたファビコンをマルチアイコンにする方法を詳しく解説します。
元画像を作成する
Photoshop（フォトショップ）やIllustrator（イラストレーター）といった画像編集ソフトを使ってファビコンを作ります。
Photoshopなら下記2点の方法で行えます。
・[ Ctrl + I ] (Mac：⌘ + I) → [ 画像解像度 ] → [ 任意のサイズに変更 ] → [ 別名保存 ]・[ 切り抜きツール ] → [ サイズ指定でトリミング ] → [ 別名保存 ]
PNG、JPEG、SVGなどで書き出した画像をファビコンに使用しましょう。
ファビコンの設定個所は使用テーマによって変わりますが、基本的には下記に近い場所にあります。
[ 外観 ] → [ カスタマイズ ] → [ サイトの基本設計 ] → [ 基本情報とロゴの設定 ] → [ サイとアイコン ]
※こちらはsangoでの場所です。テーマによって場所が変わる場合があります。
IllustratorならSVG形式に保存可能
SVGはベクター形式なので解像度に依存されず、常にクリアで最適なファビコンが表示される画像形式ですよ。
※イラレ未導入の方は事前にIllustrator公式サイトからダウンロードしておきましょう。
リサイズする
favicon-32×32.png (32px x 32px)
apple-touch-icon.png (180px x 180px)
android-chrome-256×256.png (256px x 256px)
上記4つの画像をリサイズして別名で保存します。
Photoshopを使った画像のリサイズ方法はコチラで解説しています。
マルチアイコン(.ico)の作り方
リサイズしたアイコンをマルチアイコン（favicon.ico）にまとめる方法です。
同様に [ 画像ファイル2を選択 ] をクリックし、[ favicon-32×32.png ] を選択します。
ダウンロード後はファイル名を [ favicon.ico ] に変更しておきましょう。
「Favicon Generator. For real.」なら一括変換で楽
ファイルをリサイズするのが面倒な場合は「Favicon Generator. For real.」で一括変換すると楽です。
android-chrome-192×192.png
apple-touch-icon.png
favicon.ico
上記3つを使えばOKです。
記述用の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-256x256.png">
画像のパスは適宜変更してください。
以上でファビコンの設置が完了です。
ファビコン作りにはIllustrator（イラストレーター）やPhotoshop（フォトショップ）が便利です。
上記2つのアプリはグラフィック制作全般で大活躍！
しかしゼロからファビコンのアイコン作りは意外と大変です。
IllustratorやPhotoshopを使って制作をするのが王道ですが、便利すぎるツール故に修得に時間が必要！
かと言ってデザイナーを稼働させる程の事でも無いし…
そんな時は商用利用可能な超高品質な素材を使うと時間・手間・費用を劇的に軽減できます。
下記でIllustrator形式のファビコンに最適なアイコン素材をピックアップして紹介しております。
イラレはベクター画像なので拡縮による劣化は無く、クッキリとしたグラフィック制作が大得意！
まだIllustratorを導入されていない方はAdobe公式サイトから入手しておきましょう。
「ちゃんと使える人」で無いと作れないですよ。
小さなファビコンでも視認性抜群！
色替えは誰でも数クリックで可能です。
ダウンロードする
商用利用ができる高品質なデザインテンプレートを厳選しました！
制作時間を大幅に短縮でき、尚且つ品質の向上が可能な優秀な素材ばかりです。
制作の手間を格段に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート45選
デジタル媒体向けポートフォリオテンプレ素材35選
様々なフライヤーのテンプレート50選
様々なモックアップテンプレート50選
下記記事で良質な素材を紹介しております。併せてチェックしてください！
以上、必要なファビコンのサイズとファビコンの作り方についてでした。
ファビコンサイズは多すぎてややこしいですが、当記事で紹介した4種類を準備すれば問題ありません。
本当に必要なファビコンを知っておくとWEB制作の効率化に繋がりますよ。
ではまた！
ファビコンやバナー、OGPやSNSの投稿サイズ等、Web制作に役立つサイズ情報について徹底解説しています。サイズ情報だけでなく、具体的な作り方も分かりやすく解説します！
無料＆商用可能なフォント、アイコン、画像素材を使って時間短縮しましょう。
現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう！
