この記事を読むのに必要な時間は約 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 |
上記を作っておけば問題ありません。
favicon.icoという1つのファイルの中に、複数サイズのファビコンを格納する事をマルチアイコンと呼びます。
元画像を作成する
Photoshop（フォトショップ）やIllustrator（イラストレーター）といった画像編集ソフトを使ってファビコンを作ります。
Adobe Stockが初月無料！
Photoshop単体だけでなく、他のアプリも使うなら断然コンプリートプランの方がお得です。
リサイズする
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）を作ります。
現役プロによる授業、実践的なカリキュラム、手厚い転職サポートで確実に転職を成功へ導きます。
万が一デザイナー職に就職・転職が成功しなかった場合は受講料が全額返金されます。
テックキャンプ オンライン無料カウンセリング
同様に [ 画像ファイル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-192x192.png">
画像のパスは適宜変更してください。
以上でファビコンの設置が完了です。
ファビコン作りにはPhotoshopとIllustratorが便利です。
グラフィック制作全般で大活躍！
Photoshop、Illustratorのどちらか一方だけでも入れておくと非常に便利ですよ。
オススメはコンプリートプラン
単品よりも圧倒的にお得で便利なCreative Cloudコンプリートプランがオススメです。
アプリ単体を2つ3つ使うと費用がコンプリートプランと同等かそれ以上になります。
それなら初めからコンプリートプランを選択する方が断然お得です。
また、公式サイトからだと制作の品質と効率を格段に向上させる最強素材サイトのAdobe Stockも初月無料！
2つ以上アドビ製品を使うなら断然コンプリートプランがオススメです。
アプリ単体
Photoshop、Illustratorのアプリ単体で十分な方は下記から公式サイトにアクセスできます。
イラレ：
さらにWEB制作やプログラミングについて学習したい方・転職を目指されている方は、エンジニア養成スクールやWebデザインスクールで集中的に学ぶと効率的かつ確実です。
独学だと初期段階でつまづき嫌になってしまう事も多々あります。
スクールだと現役のプロによる手厚いサポートで安心して最新のWeb開発について学ぶことができます。
下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。
以上、必要なファビコンのサイズとファビコンの作り方についてでした。
ファビコンサイズは多すぎてややこしいですが、当記事で紹介した4種類を準備すれば問題ありません。
本当に必要なファビコンを知っておくとWEB制作の効率化に繋がりますよ。
ではまた！
IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記からどうぞ。
