Icon Workshop1画像をアップロード
くっきりしたロゴやシンプルなマークを使ってください。正方形の画像がおすすめです。
1枚の画像を、あらゆる画面で。
ファビコン・アプリアイコン生成ツール
小さなアイコンで、印象に残るサイトに。
画像をサイトのファビコン、アプリアイコン、すぐに使えるアイコンパックに変換できます。
PNG ICO PWA
アイコンパックを作成する
画像から、ファビコンやアプリアイコンなどを作成。
- 1アップロード
- 2調整
- 3ダウンロード
ここに画像をドロップ
PNG、JPG、またはSVG · 最大 5 MB
画像が端末の外に送信されることはありません。すべてブラウザー内で処理します。
アイコンを調整する
どの画面でも見やすくなるように調整できます。
実際の表示を確認(画像をアップロードすると、アイコンのプレビューが表示されます。)
ブラウザーのタブ
×
https://example.com
iOSのホーム画面
ここにアイコンを表示
PWA / Android
ここにアイコンを表示
3 ステップでファビコンを作る方法
アイコン一式を、数秒で。
2調整してプレビュー
画像の収め方、背景、余白を選び、小さなサイズでも仕上がりを確認します。
3ダウンロードしてサイトに追加
アイコンパックを書き出し、ファイルをアップロードして、HTMLにアイコンのリンクを追加します。
ひとつのロゴを、あらゆる画面へ。
生成されるファイルと、それぞれの用途をご紹介します。
サイトのファビコン
私のサイト×16 × 1632 × 3216 × 16、32 × 32のアイコンで、ブラウザーのタブやブックマークでもサイトを見分けやすく。
iPhone & iPad
私のサイト180 × 180サイトをホーム画面に追加するために、180 × 180のapple-touchアイコンを使います。
PWA & Android
アプリをインストール192 × 192512 × 512アプリのインストールやホーム画面に使う192×192、512×512のアイコン。
アイコンパックには何が入っていますか？
さまざまなサービスでそのまま使えるアイコン一式。
- favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
- apple-touch-icon.png180 × 180
- icon-192.png192 × 192
- icon-512.png512 × 512
- site.webmanifestウェブアプリマニフェスト
サイトにアイコンを追加
これらのリンクをHTMLの<head>内に追加してください。
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">よくある質問
ファビコンとは何ですか？
ブラウザーのタブやブックマークに表示される、サイトを表す小さな画像です。
どの画像形式を使えばよいですか？
透明なロゴにはPNGがおすすめです。JPG、WebP、安全なSVGも使えます。
正方形ではない画像も使えますか？
はい。「全体を収める」「切り抜き」「引き伸ばす」から選び、プレビューで確認できます。
複数のサイズのアイコンが必要なのはなぜですか？
ブラウザーやホーム画面では異なるサイズを使います。小さなアイコンはタブではっきり表示され、大きなアイコンはアプリのショートカットに適しています。