ファビコンとウェブマニフェスト

画像を一枚入れると、一式そろって出てきます。複数サイズを本当に収めたICO、Appleの流儀どおりに不透明化したApple touchアイコン、マニフェスト用のPNG、マニフェストそのもの、そして貼り付けるだけのHTML。さらに、Androidのmaskable切り抜きが噛みつく前に見せてくれます。多くのアイコンが静かに縁を失うのは、まさにそこです。

画像をここにドラッグ またはクリックして選択
正方形がいちばんうまくいきます。512ピクセル以上を。背景が透明なPNGなら仕上がりがもっともきれいです。
ホーム画面でアイコンの下に収まる長さ。
透明が許されない場所を埋め、maskableアイコンの余白にもなります。
ファイルサイズ使うところ
 

    


    

    

      
.icoが今も要る理由

      
たいていのブラウザーはPNG一枚で足ります。タブのアイコンだけで済むなら、そこで止めてかまいません。それでもICOが居場所を持つのは、複数の解像度を一つのファイルに収め、どれを使うかをOSに選ばせられるからです。タブは16、ピン留めしたショートカットやデスクトップのリンクは32か48を使い、いずれもその大きさのために作られたビットマップから描かれます。大きな画像をその場で押し縮めたものではありません。ここで出てくるファイルは、小さなヘッダーの付いたPNGの入れ物で、今世紀に出たブラウザーはどれもこれを読みます。

      
maskableのセーフゾーン

      
Androidはあなたのアイコンを正方形で表示するとは約束していません。ランチャー次第で円形にも、スクワークルにも、角丸の正方形にも切り抜かれます。保証されるのは内側の円だけ——幅の八十パーセント、中央です。端まで届いている絵柄は、まさに端を失う絵柄です。対処はマニフェストのアイコンに余白を足してセーフゾーンに収めること。ここのプレビューは切り抜き線を描くので、利用者より先にあなたが見られます。

      
Apple touchアイコンに透明がない理由

      
iOSはホーム画面のアイコンを自前の角丸の形に合成し、アルファチャンネルを期待どおりには扱いません。透明な部分は黒く出ます。そのためこの一つのファイルだけは、符号化の前にあなたの背景色へ焼き込みます。マニフェストのPNGはアルファを保ったままです。あちらでは正しく扱われるからです。

      
ファイルの置き場所

      
アセットのフォルダーではなく、サイトのルートに置いてください。ブラウザーやクローラーはファビコンの場所を推測し、リンクの有無にかかわらず取りにくるものがあります。そのうえでHTMLのかたまりをページのheadに貼ってください。実際に置いた場所と合わせる必要があるのは、マニフェストのパスの一行だけです。


      
よくある質問

      

        
PNGがあれば favicon.ico は要りませんか。
厳密には不要です。実務としては必要です。多くのクローラーやフィードリーダー、古いツールはパスでファビコンを取りにきて、あなたのマークアップなど見ません。数キロバイトで済む話です。

        
16ピクセルだとアイコンがつぶれます。どうすれば。
ここでできることはありません。単純に場所が足りないからです。あの大きさでは、マークに使える読める画素は横に十個ほど。文字組みのロゴは必ず潰れます。簡略版——形ひとつ、文字ひとつ——を元画像として渡し、完全なロゴは他のすべての場所のために取っておいてください。

        
maskableの余白は切ってよいですか。
絵柄がもともと十分な余白の内側に収まっている場合だけです。枠いっぱいなら入れたままに。でないとAndroidが中まで切り込みます。

        
画像はどこかへ送られますか。
いいえ。どのサイズもこのページのキャンバス上で描かれ、書庫はメモリー内で組み立てられます。送信は一切ありません。

      

      
GO AIチームが作りました。 アプリアイコン作成ツール · 一括リサイズ · 無料ツール一覧