cv.cm
すべてのレッスン

写真

ファビコンの作り方

ファビコンは16pxで読めないとダメ。マークを正方形にし、CoverかContainを選び、タブ用ICOとタッチ用PNGのZIPを保存。

7 分

今日の結果 favicon.ico(16/32/48)とPNGのZIP(180/192/512含む)。タブサイズでも読める。

マークが手元にあってから開く。Coverは正方形を埋め切ることがある。Containは余白。白背景が初期値。アップロードなし。

ファビコン作成を開く
この一回
  1. 小さくても分かるマーク

    賑やかな写真は16pxで死ぬ。1文字、単純な形、コントラストの高いロゴ。横長なら先にクロップ。

    Coverは埋めて切ることがある。Containは全体(余白)。
    Coverは埋めて切ることがある。Containは全体(余白)。
  2. cv.cmのファビコンを開く

    このタブで処理。

    ファビコン作成を開く
  3. 画像をドロップ

    プレビューが空なら先にHEICをJPGに。

  4. CoverかContain、白背景の有無

    Coverは正方形を埋め切ることがある。Containは全体(余白)。クラシックなタブは白背景のまま。透明PNGが要るなら外す。

  5. ICOとPNGのZIPを保存

    ICOは16/32/48(クラシックなタブ)。ZIPには180/192/512(AppleタッチとPWA)も入る。元のマークは残す。

    ICOは16/32/48。PNGのZIPに180/192/512。16pxを見る。
    ICOは16/32/48。PNGのZIPに180/192/512。16pxを見る。
  6. 16pxのPNGを開く

    256のプレビューは嘘。16pxがボケるならマークを単純にするかContain。favicon.icoをルートに置き、HTMLでPNGをリンク。

よくある質問

ファビコンを無料で作れる?

できる。このタブで描く。アップロードなし。

ICOのサイズは?

16/32/48pxのPNGを1つのfavicon.icoに入れる。

Appleタッチアイコンも要る?

PNGのZIPに180/192/512。HTMLでリンクしてホーム画面用。

アップロードされる?

しない。タブを閉じると消える。

透明背景にできる?

できる。白背景を外す。Containなら透明の余白。