Favicon Tools検証作成
Basics

ファビコンジェネレーターと手作業

ファビコンは手作業で作ることも(正方形のマークを設計し、各サイズで書き出し、一つを .ico に変換し、link タグを書く)、ジェネレーターにセット全体とマークアップを数秒で生成させることもできます。単独の favicon.ico なら手作りで十分ですが、apple-touch-icon、Android のサイズ、マニフェスト、そして揃ったタグまで必要になった途端、ジェネレーターが元を取ります。これらは面倒で、微妙に間違えやすいのです。

「手作業」が実際に何を伴うか

手動で行うのは、小さな手順の連なりです。正方形のマークを設計し、16・32・48・180・192・512 ピクセルで書き出し、そのいくつかをマルチサイズの .ico にまとめ、マニフェストを書き、ファイル名がすべて一致する link タグを追加します。どれも難しくはありませんが、それぞれがミスの隠れる場所です。

.ico が人々をつまずかせる手順です。PNG を .ico にリネームするだけでは済まず(別のコンテナです)、手作りでもその一つのファイルには変換ツールが必要です。

手作業 vs 生成

手順手作業生成
サイズ一つずつ書き出す一括で
.ico ファイル変換ツールが必要自動で作成
マニフェストJSON を書く生成される
link タグ書いてファイル名を合わせる提供される

ジェネレーターと手作業に関するよくある質問

ファビコンジェネレーターは必要ですか?

.ico を作るツールがあれば、単独の favicon.ico には不要です。ジェネレーターが元を取るのは、apple-touch-icon、Android と PWA のサイズ、マニフェスト、正しく揃ったタグ、といった面倒な部分が欲しくなったときです。

Photoshop や Figma でファビコンを作れますか?

そこで画像を設計・書き出しできますが、本物の .ico を作り、link タグとマニフェストを自分で書く必要は残ります。デザインツールは仕事の半分をこなすだけです。

手作りのファビコンは品質が劣りますか?

いいえ。どちらにせよ同じファイルです。ジェネレーターがより良いファビコンを作るわけではなく、手作業に伴う面倒と小さなミスを取り除くだけです。

関連用語