onul.works

Penjana Favicon

Penjana favicon untuk membuat saiz favicon PNG, favicon.ico dan calon Apple Touch Icon daripada imej atau logo.

◴ Data tidak disimpan ⌁ Percuma

Konsep

Favicon ialah ikon identiti untuk tab penyemak imbas, bookmark dan skrin mula PWA

Favicon bukan hanya imej pratonton; ia merangkumi konfigurasi tab, bookmark dan ikon pemasangan supaya UI browser memaparkan identiti halaman.

Tab biasanya memerlukan 16~48px, manakala bookmark dan PWA lazimnya guna PNG 180/192/512px.

Simpan versi latar belakang lutsinar dan periksa kontras dalam mod gelap sebelum mengesahkan paparan sebenar pada tab, bookmark dan skrin mudah alih.

Untuk apa

Digunakan apabila menyediakan favicon.ico, site.webmanifest, dan gabungan link rel="icon"/"apple-touch-icon" untuk tab, bookmark dan PWA.

Saiz disyorkan

Sediakan PNG 16/32/48/180/192/512px, favicon.ico dan jika perlu SVG untuk menyokong klien web dan peranti mudah alih.

Semak sebelum guna

Sahkan latar lutsinar, kontras mod gelap, base path href dan paparan ikon dalam tab, bookmark, serta skrin pemasangan.

Fungsi tidak berhenti pada pra-tinjauan; ikon mesti diuji di UI tab/bookmark/PWA sebenar supaya pengguna melihat ikon yang sama dengan yang dirancang.

Imej sumber
Hasil favicon
Pratonton favicon yang dijana akan muncul di sini.

Cara guna

  1. 1 Pilih atau lepaskan imej yang hampir berbentuk segi empat sama.
  2. 2 Klik jana untuk mencipta beberapa saiz favicon PNG dan favicon.ico.
  3. 3 Muat turun fail secara individu atau sebagai ZIP, kemudian semak laluan relatif atau base path dalam kod pautan HTML untuk deployment anda.

Contoh penggunaan umum

  • Jana fail favicon PNG/ICO
  • Buat favicon daripada imej logo
  • Cipta calon Apple Touch Icon
  • Sediakan kod pautan HTML favicon

Soalan lazim

Adakah alat ini turut menjana fail ICO?

Ya. V2 menjana saiz favicon PNG, favicon.ico dan kod pautan HTML, dengan muat turun ZIP untuk keseluruhan set. Contoh HTML menggunakan laluan relatif secara lalai, jadi tambah base path sebelum setiap href apabila deploy di bawah subpath. Penjanaan dalam pelayar ialah lalai, manakala penjanaan dioptimumkan pelayan menggunakan resizing Cloud Run.

Aliran kerja berkaitan

Penjana FaviconTukar imej sumber atau logo untuk ikon laman kepada favicon dalam beberapa saiz terlebih dahulu. → Base64 ke ImejNyahkod imej Base64 yang diterima semasa kerja untuk memastikan ia sepadan dengan sumber. → Pemampat ImejMampatkan aset imej yang digunakan bersama ikon untuk mengurangkan saiz keluaran.