ファビコン作成
ロゴから、Webサイトに必要なアイコンをすべて作ります。ブラウザのタブのファビコン、iPhoneのホーム画面のアイコン、Androidのアプリアイコンを、貼り付け用のHTMLと一緒に1つのZIPで受け取れます。
ファビコンを作る方法
- 1ロゴを選びます。SVGか、512px以上の正方形のPNGがいちばんきれいに仕上がります。
- 2画像全体を正方形に収めるか切り抜くか、そして背景を選びます。
- 3ブラウザのタブでの見え方も含めて、プレビューを確認します。
- 4ZIPをダウンロードしてファイルをサイトのいちばん上のフォルダにアップロードし、HTMLを各ページの<head>に貼り付けます。
Webサイトに本当に必要なアイコン
今のサイトに必要なファイルはわずかです。favicon.icoには、ブラウザのタブやブックマーク、Windows用の16・32・48pxが入っています。どのブラウザも、ページに記述がなくてもこのファイルを探します。apple-touch-icon.png（180px）は、iPhoneやiPadのホーム画面にサイトが追加されたときに使われます。site.webmanifestに記載するicon-192.pngとicon-512.pngは、Androidやサイトをアプリとしてインストールしたときに使われます。
SVGから作った場合、ZIPにはicon.svgも入ります。最近のブラウザの多くはこれをタブのアイコンに使い、どの画面でもくっきり表示されます。HTMLのコードにはすでに記載されていて、必要なブラウザ向けにfavicon.icoも代わりとして残しています。
小さなアイコンには単純な形が向いています。16pxでは細い線や小さな文字が消えてしまうので、ロゴに文字が入っている場合は、マークや頭文字だけを試してみてください。アイコンの上にあるブラウザのタブのプレビューでは、16pxのアイコンを実際の大きさで、明るいタブと暗いタブの両方で確認できます。
Lilypadを使う理由
完全にプライベート
ファイルはブラウザの中で処理され、サーバーにアップロードされることはありません。
全サイズを一度に
1枚の画像から、favicon.ico、Appleタッチアイコン、Androidのアプリアイコンを1つのZIPで作成します。
速くて無料
CPUのすべてのコアを使って処理します。登録不要、すかしなし、ファイル数の制限もありません。
よくある質問
ファビコンのファイルはどこに置けばよいですか？
ホームページがあるWebサイトのいちばん上のフォルダに置き、/favicon.icoや/apple-touch-icon.pngなどのURLで開けるようにします。そのうえで、HTMLの数行をすべてのページ、またはサイトのテンプレートの<head>に貼り付けてください。
新しいファビコンが表示されないのはなぜですか？
ブラウザはファビコンをとても強くキャッシュします。新しいアイコンを確認するには、プライベートウィンドウでサイトを開くか、HTMLのアイコンのリンクに「?v=2」を付け足してください。
JPGやHEICの写真も使えますか？
はい、どんな画像でも使えます。ただし写真は16pxではほとんど見分けがつかないので、無地の背景にシンプルなロゴやマークを置いた画像の方が、ファビコンに向いています。
ファイルはどこかにアップロードされますか？
いいえ。すべてWebブラウザの中で処理されます。ファイルが端末の外に出ることはなく、私たちが見ることもありません。