クリエイターなら絶対に登録しておきたい転職エージェント5選!

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

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

最新のファビコン(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(フォトショップ)を使って512px x 512px 72px/inchで作成しました。
元画像は大きめに作って、後でリサイズすると良いでしょう。

本業が教えるPhotoshop(フォトショップ)講座はコチラ
本業が教えるIllustrator(イラストレーター)講座はコチラ
Photoshopを最安で導入しよう!
公式サイトのフォトプランが最もお得にPhotoshopを導入する方法です。
Adobe Stockが初月無料!
Photoshop単体だけでなく、他のアプリも使うなら断然コンプリートプランの方がお得です。

リサイズする

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のファビコン用元画像を選択します。
侍エンジニア塾
90%以上がプログラム未経験、94%以上がプロのエンジニアになれる
侍エンジニア塾 は未経験からプロのエンジニアを目指せるオンラインスクールです。

今だけ無料体験レッスンに申し込むとアマゾンギフト券5000円分がプレゼントされます!

侍エンジニア塾 公式サイト
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">

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

PhotoshopとIllustratorが便利

ファビコン作りにはPhotoshopとIllustratorが便利です。
グラフィック制作全般で大活躍!
Photoshop、Illustratorのどちらか一方だけでも入れておくと非常に便利ですよ。

オススメはコンプリートプラン

単品よりも圧倒的にお得で便利なCreative Cloudコンプリートプランがオススメです。
アプリ単体を2つ3つ使うと費用がコンプリートプランと同等かそれ以上になります。

それなら初めからコンプリートプランを選択する方が断然お得です。

AdobeCCを導入しよう!
Adobe公式サイト経由が最もお得にAdobeCCを導入できます。
また、公式サイトからだと制作の品質と効率を格段に向上させる最強素材サイトのAdobe Stockも初月無料!
2つ以上アドビ製品を使うなら断然コンプリートプランがオススメです。

アプリ単体

Photoshop、Illustratorのアプリ単体で十分な方は下記から公式サイトにアクセスできます。

フォトショ:

イラレ:

Web制作・プログラミングを学ぶ

さらにWEB制作やプログラミングについて学習したい方・転職を目指されている方は、エンジニア養成スクールやWebデザインスクールで集中的に学ぶと効率的かつ確実です。

独学だと初期段階でつまづき嫌になってしまう事も多々あります。
スクールだと現役のプロによる手厚いサポートで安心して最新のWeb開発について学ぶことができます。

下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。

おわりに

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

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

ではまた!

ゼロから始めるシリーズ

IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記からどうぞ。