ファビコン作成
1枚のPNGまたはSVGから、サイト用アイコン一式を生成します。favicon.ico、16〜512 pxのPNG、Apple Touch Icon、manifest、HTMLスニペットがそろいます。
またはここに画像をドロップ
最大 30 MB画像はブラウザの中で処理され、アップロードされることはありません- 1選択
正方形の画像を選択します(512 px以上、またはSVGがおすすめです)。
- 2調整
角の丸みと背景を選びます。
- 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のアイコンだけです。このツールは、これらをすべてまとめて生成します。