ConvertPixel

ConvertPixel · WEB APP

ConvertPixelをホーム画面に追加

Safariでは共有メニューからWebアプリを追加します。アプリのように開け、一度使ったツールはオフラインでも利用できます。

  1. Safariのツールバーで「共有」をタップします。

  2. 「ホーム画面に追加」を選び、「追加」をタップします。

Webサイトアイコンスタジオ

16ピクセルでも伝わるFaviconを作る

画像、文字、内蔵アイコン、SVG、Identiconから始め、実際のブラウザータブで確認して完全なWebアイコン一式を書き出せます。処理はローカルで、アップロードはありません。

16·32·481つのICOに入るサイズ7そのまま使えるファイル0画像アップロード
生成するWebマニフェストに使用します。

前景のレイアウト

影
プラットフォーム側でマスクされない出力にのみ適用します。iOSとAndroidのアダプティブアイコンはシステムがマスクします。

プレビュー

最も強く切り取るAndroidランチャーのマスクです。セーフゾーンはこの形で決まり、内接円の外側は表示されません。

円の外側はAndroidランチャーのマスクで切り取られる場合があります。

プラットフォーム

生成はすべてこのタブ内で行われ、アップロードはありません。対応ブラウザでは使用済みの機能がキャッシュされ、オフラインで再利用できます。

7 files · Web

1回のダウンロードでWebの全表示面に対応

Webだけを初期選択。ZIPにはブラウザー用、ホーム画面用、PWA用の画像と参照コードが入ります。

複数サイズのfavicon.ico

16・32・48pxのPNGフレームを正しいICOコンテナに格納します。

Apple Touch + PWA

不透明180px、通常192/512px、安全領域付きmaskable 512pxを生成します。

HTML + Manifest付き

プロジェクト名を反映したlinkコードとsite.webmanifestを同梱します。

3ステップで導入

  1. マークを作り、特にブラウザータブの小さな表示を確認します。
  2. favicon-pack.zipを取得し、webフォルダーの中身を公開ディレクトリへコピーします。
  3. favicon-snippet.htmlをheadへ貼り、manifestをリンクして、公開後にキャッシュを無視して再読込します。

小さなピクセルには別の判断が必要

実際の大きさで確認

512pxでは美しくても16pxでは潰れます。ブラウザー表示でダウンロード前に判別できます。

PNGの名前変更ではない

ICOはコンテナです。3サイズを別々に描画し、正しいディレクトリを書き込みます。

構造としてプライベート

描画、縮小、ICO化、ZIP化はすべてこのタブ内で行われ、画像を含む通信はありません。

Web
  • maskable PWAアイコンはAndroidのアダプティブアイコンと同様にプラットフォーム側でマスクされるため、同じ中央セーフゾーンが必要です。キャンバス全体を埋めると端が欠けます。
  • apple-touch-iconに透明部分は使用できません。iOSでは黒い背景に合成されるため、透明部分がホーム画面で黒い斑点として表示されます。
  • 現在のfavicon.icoにも、16、32、48ピクセルの画像が1ファイルに含まれます。ブラウザーやOSの表示場所ごとに異なるサイズが使われます。
プライバシー設計

ファイルではなくツールを共有

必要な人へこのページを送れます。リンクに画像、ファイル名、利用履歴は含まれません。