ファビコン作成

1枚のPNGまたはSVGから、サイト用アイコン一式を生成します。favicon.ico、16〜512 pxのPNG、Apple Touch Icon、manifest、HTMLスニペットがそろいます。

またはここに画像をドロップ

最大 30 MB画像はブラウザの中で処理され、アップロードされることはありません
  1. 1選択

    正方形の画像を選択します(512 px以上、またはSVGがおすすめです)。

  2. 2調整

    角の丸みと背景を選びます。

  3. 3ダウンロード

    zipをダウンロードし、中にあるHTMLスニペットをサイトの<head>に貼り付けます。

「ファビコン作成」の使い方

何が入っている?

zipの中身は、favicon.ico(16・32・48 pxを1ファイルに)、16・32・48・180・192・512 pxのPNG、iOSのホーム画面用のapple-touch-icon.png、インストール可能なWebアプリ用のicon-192とicon-512、入力したアプリ名を書き込んだsite.webmanifest、そして貼り付け用のタグが入ったhead-snippet.htmlです。

元画像の選び方

512 px以上の正方形のPNG、またはSVGがいちばんきれいに仕上がります。ブラウザのタブでは16 pxで表示されることを忘れずに。文字入りのロゴ全体はその大きさでは潰れてしまうので、シンボル部分だけを切り出すか、1文字だけにしてください。角の丸みと背景の設定は、すべてのサイズにまとめて適用されます。

サイトへの設置

zipの中のファイルをサイトのルートフォルダに置き、head-snippet.htmlの中身を<head>に貼り付けます。ブラウザはfaviconを長くキャッシュするので、確認はプライベートウィンドウかスーパーリロードで行ってください。

よくある質問

写真はサーバーにアップロードされますか?

いいえ。すべての処理はブラウザの中で行われるため、写真が端末の外に出ることはありません。タブを閉じれば、何も残りません。

どのサイズが必要ですか?

最近のサイトに必要なのは、favicon.ico、32 pxのPNG 1枚、180 pxのApple Touch Icon、manifest用の192 px・512 pxのアイコンだけです。このツールは、これらをすべてまとめて生成します。