【デザイン学生必見!】
ポートフォリオをゼロから作ろう!

【2024年最新版】ファビコン(favicon)のサイズ一覧と作り方

記事内にプロモーションを含む場合があります
Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

最新のファビコン(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」などがあります。

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

ファビコンの作り方

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

元画像を作成する

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

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

Photoshopなら下記2点の方法で行えます。
・[ Ctrl + I ] (Mac: + I) → [ 画像解像度 ] → [ 任意のサイズに変更 ] → [ 別名保存 ]・[ 切り抜きツール ] → [ サイズ指定でトリミング ] → [ 別名保存 ]
WordPressのファビコンサイズ
WordPressのファビコンは「512px x 512px」が一つあればOKです。
PNG、JPEG、SVGなどで書き出した画像をファビコンに使用しましょう。
ファビコンの設定個所は使用テーマによって変わりますが、基本的には下記に近い場所にあります。
[ 外観 ] → [ カスタマイズ ] → [ サイトの基本設計 ] → [ 基本情報とロゴの設定 ] → [ サイとアイコン
※こちらはsangoでの場所です。テーマによって場所が変わる場合があります。

IllustratorならSVG形式に保存可能

Illustratorなら画面左上の [ ファイル ] → [ 別名で保存 ] → [ ファイルの種類 ] → [ SVG(*.SVG) ] からSVG形式で保存できます。

SVGはベクター形式なので解像度に依存されず、常にクリアで最適なファビコンが表示される画像形式ですよ。
※イラレ未導入の方は事前にIllustrator公式サイトからダウンロードしておきましょう。
Illustratorでファビコンを作ろう!
イラストレーターを使ったファビコン制作を解説します。ノンデザイナーの方でもオリジナルのファビコンが作れますよ!

リサイズする

favicon-16×16.png (16px x 16px)
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)にまとめる方法です。

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-256x256.png">

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

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

ファビコン作りにはIllustrator(イラストレーター)やPhotoshop(フォトショップ)が便利です。
上記2つのアプリはグラフィック制作全般で大活躍!

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

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

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

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

#01 Modern Minimal Vector Logo for banner

企業のロゴとしてそのまま使えるクオリティのロゴセットです。ベクター画像なので拡縮しても劣化無し!

ダウンロードする

#02 Abstract business logo set.

汎用的で高品質ななアブストラクト系のロゴセットです。
イメージが無いから何にしようか悩む…そんな方はこういった抽象的なロゴがオススメです。

ダウンロードする

#03 Abstract logos mega collection with letters.

無加工でそのまま使えるレベルのロゴセットです。

ダウンロードする

#04 Big Set of various vector highlight covers.

丸型のカワイイロゴセットです。女性的なイメージの表現に適しています。

ダウンロードする

#05 Creative, digital abstract colorful icons

ポリゴン(三角形)で構成された図形のアイコンです。ビビッドカラーで小さなファビコンに適したグラフィックです。

ダウンロードする

#06 Set of vector logo design template. Black monogram. Hexagon icons

シンプルな形状ですが、キッチリ作るには様々なイラレテクニック(主に回転ツール)が必要な図形です。
「ちゃんと使える人」で無いと作れないですよ。
小さなファビコンでも視認性抜群!

色替えは誰でも数クリックで可能です。

ダウンロードする

#07 The image of a cougar or panther.

カッコいいヒョウの横顔がモチーフのアイコンです。
サイトのファビコンだけでなく、名刺に載せてもカッコいいですね。

ダウンロードする

#08 Brain, Creative mind, learning and design icons, logos. Man head, people symbols - stock vector

人の頭や目、心などをアイコン化したグラフィックです。
形状だけでなく色使いも非常にハイレベルで高品質な仕上がりです。

ダウンロードする

#09 Mega Set and Big Group, Real Estate, Building and Construction Logo Vector Design Eps 10

企業のロゴとしてそのまま使えるレベルのアイコン210個セットです。
どれを選んでも形になります。

ダウンロードする

#10 Green tree logo original design set of vector Illustrations in green colors

木がモチーフのアイコンセットです。
木は何かと汎用性が高いモチーフなので、迷ったらコレを選択するのもアリですね。

ダウンロードする

高品質なテンプレート素材を活用しよう
他にも制作を劇的に効率化できる素材を紹介しております!

商用利用可能な高品質テンプレート

商用利用ができる高品質なデザインテンプレートを厳選しました!
制作時間を大幅に短縮でき、尚且つ品質の向上が可能な優秀な素材ばかりです。

制作の手間を格段に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差をつけてより高みを目指してみませんか?
デジタル媒体向けポートフォリオテンプレ素材35選


デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


バナーはフォトショップの練習をする上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選


AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能!
様々なフライヤーのテンプレート50選


制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬!
様々なモックアップテンプレート50選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、必要なファビコンのサイズとファビコンの作り方についてでした。

ファビコンサイズは多すぎてややこしいですが、当記事で紹介した4種類を準備すれば問題ありません。
本当に必要なファビコンを知っておくとWEB制作の効率化に繋がりますよ。

ではまた!

知っておくと便利なサイズや作り方

ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!