ファビコン生成
Favicon Generator
ICO・各サイズのPNG・Appleタッチアイコン・ウェブマニフェストを一式で作り、貼り付けるHTMLも添えます。
ファビコンが1ファイルで済まなくなって何年も経ちます。サイトにはルートへのリクエストに応える.ico、タブ用の3サイズのPNG、iOSがマニフェストを無視するのでAppleタッチアイコン、Androidが自分の決めた形に切るのでマスカブルアイコンが要ります。このツールはそのすべてと、マニフェストと、貼り付ける記述を作ります。
ロゴを置いてください
512×512以上の正方形のPNGがいちばんきれいに出ます。SVGは先にラスタライズが要ります。
使い方
512px以上の正方形のロゴを置きます
すべては縮小して作るので、一式のうちいちばん大きなアイコンは、置いたものと同じ品質までで、それ以上にはなりません。
名前と短い名前を決めます
短い名前はホーム画面でアイコンの下に出るもので、AndroidもiOSも12文字あたりで切ります。
テーマ色と起動画面の色を選びます
マニフェストに入ります。テーマ色はAndroidでブラウザの枠を染め、背景色は起動したPWAが描画前に見せる色です。
zipを受け取り、記述を貼ります
ファイルはサイトのルートに、`<link>`のかたまりは`<head>`に入れます。両方を一緒に作るので、パスが食い違いません。
よくある質問
マスカブルアイコンは何のためにあるのですか
Androidはホーム画面のアイコンを端末が選んだ形——円、角丸四角、しずく——に切り、中央80%しか保証しません。マスカブルアイコンには、余白の設定にかかわらず必ず10%の余白が付くので、切り取りが絵まで届きません。
SVGのファビコンで代用できませんか
足すことはできますし、効くところではいちばん気持ちのよい選択です。ただし一式の代わりにはなりません。iOSのSafariはタッチアイコンを、Androidはマニフェストのアイコンを求め、ルートの.icoはどのみちリクエストされます。SVGは先にラスタライズして、そのPNGをここに置いてください。
余白はどれくらい取ればいいですか
枠いっぱいに描かれたマークなら不要です。16pxで息をつく場所が要るロゴタイプなら10〜15%です。余白の代償がいちばん大きいのはタブ用の小さいサイズで、譲れる場所がほとんどないからです。
ここから渡せます
SVG最適化
SVG Optimiser
編集ソフトの残骸を取り除き、変換をまとめ、座標の桁を丸めて、描画結果を並べて比べます。
ICO変換
ICO Converter
画像から複数解像度入りの.icoを作るか、既存の.icoの中身を取り出します。
SVGをPNGに変換
SVG to PNG
SVGを好きな倍率でPNG・JPEG・WebPに描き出し、背景は透明のままにも塗りつぶしにもできます。
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
次の一手
このツールが出したものをそのまま受け取れる道具です。
ICO変換
ICO Converter
画像から複数解像度入りの.icoを作るか、既存の.icoの中身を取り出します。
画像リサイズ
Image Resizer
ピクセル・パーセント・長辺の目標値で大きさを変え、縦横比の固定と一括処理のプリセットを備えます。
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
SVG最適化
SVG Optimiser
編集ソフトの残骸を取り除き、変換をまとめ、座標の桁を丸めて、描画結果を並べて比べます。
背景透過（切り抜き）
Background Remover
平坦な背景や単色の背景をOKLabでキーイングして透過PNGにし、縁はブラシで直せます。
EXIF情報の削除
EXIF Remover
画素には手を触れずに、カメラ・GPS・編集履歴のメタデータだけを写真から消します。