Tiada muat naik, 100% setempat, tiada akaun

Penjana Favicon

Muat naik logo atau ikon anda dan muat turun semua saiz favicon standard sebagai PNG. Termasuk Apple Touch Icon dan ikon PWA. Tiada apa meninggalkan peranti anda.

Cara Penjana favicon berfungsi

Favicon Generator mengambil mana-mana imej yang anda berikan dan mengubah saiznya kepada dimensi favicon standard menggunakan Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (ikon sentuhan Apple), 192x192 (Android Chrome) dan 512x512 (manifest PWA). Keenam-enam saiz dihasilkan dalam pelayar anda dan dimuat turun sebagai fail PNG individu. Imej sumber anda tidak pernah meninggalkan peranti anda.

Set favicon yang lengkap merangkumi julat penuh ikon tab pelayar, penanda halaman, pintasan skrin utama dan skrin percikan PWA. Menggunakan imej sumber beresolusi tinggi (sekurang-kurangnya 512x512 piksel) memberikan algoritma penskalaan bawah butiran paling banyak untuk digunakan. Teg pautan HTML yang anda perlukan untuk merujuk setiap fail yang dihasilkan ditunjukkan dalam potongan yang boleh anda salin terus ke dalam elemen head halaman anda.

Ditulis oleh Bastien Sulyan

Cara menggunakan Penjana favicon, langkah demi langkah

  1. Lepaskan imej sumber anda ke kawasan muat naik. Gunakan imej persegi pada 512 px atau lebih besar untuk hasil terbaik.
  2. Pratonton enam saiz yang dihasilkan dalam panel keputusan.
  3. Muat turun setiap satu daripada enam fail PNG secara individu daripada panel hasil.
  4. Salin potongan HTML yang menunjukkan teg pautan untuk semua saiz.
  5. Letakkan fail PNG di akar laman anda dan tampal teg pautan ke dalam kepala halaman anda.

Kes penggunaan biasa

  • Pembangun menyediakan laman web baru dan memerlukan semua saiz favicon yang dihasilkan daripada logo jenama tanpa langganan alat reka bentuk.
  • Pengarang PWA menghasilkan ikon 192x192 dan 512x512 yang diperlukan dalam manifest aplikasi web untuk pemasangan skrin utama.
  • Penulis blog menyegarkan identiti laman mereka dan menggantikan favicon lalai dengan ikon tersuai yang dibina daripada logo mereka.
  • Pekerja bebas menghasilkan set favicon penuh untuk projek pelanggan dengan cepat tanpa menunggu untuk memasang perisian reka bentuk luar talian.

Soalan lazim

Format imej apa yang boleh saya gunakan sebagai sumber?

Mana-mana format yang boleh dinyahkod oleh pelayar berfungsi sebagai input: JPEG, PNG, WebP, GIF dan SVG. Untuk sumber SVG, pelayar merastrikan vektor ke Canvas sebelum mengubah saiz, jadi PNG output adalah imej raster tanpa mengira.

Mengapa favicon saya kelihatan kabur dalam tab pelayar?

Saiz 16x16 dan 32x32 adalah sangat kecil. Jika imej sumber mengandungi butiran halus atau garis nipis, ia tidak akan bertahan dari penskalaan bawah. Reka bentuk yang mudah dan berani dengan bentuk yang jelas berfungsi jauh lebih baik pada saiz kecil berbanding ilustrasi yang kompleks.

Adakah alat ini menghasilkan fail ICO?

Ya. Selain enam fail PNG, alat ini turut menghimpunkan satu fail favicon.ico yang mengandungi imej 16x16, 32x32 dan 48x48 dalam satu fail, iaitu format yang masih dicari oleh pelayar Windows lama dan sesetengah crawler di akar laman. Pelayar moden sudah memadai dengan pautan PNG, jadi menerbitkan kedua-duanya tidak memerlukan kos tambahan dan membolehkan setiap klien memilih.

Adakah imej sumber diproses pada pelayan?

Tidak. Panggilan Canvas drawImage yang menghasilkan setiap saiz dijalankan dalam tab pelayar anda. Imej sumber dibaca dari cakera setempat anda dan enam output PNG dicipta dalam memori dan ditawarkan sebagai muat turun. Tiada data fail yang melalui pelayan.

Saiz mana yang harus saya gunakan untuk ikon sentuhan Apple?

iOS dan iPadOS menggunakan PNG 180x180 piksel yang dirujuk oleh teg pautan apple-touch-icon. Saiz ini digunakan apabila pengguna menambah laman anda ke skrin utama pada peranti Apple. Alat ini menghasilkan fail ini bersama dengan saiz lain.

Bolehkah saya menggunakan imej segiempat tepat sebagai sumber?

Ya, tetapi output akan mempunyai cer huruf atau petak tiang untuk dimasukkan ke dalam kanvas persegi. Untuk hasil terbaik, mulakan dengan imej persegi atau pangkas imej sumber anda ke persegi sebelum menggunakan alat ini.

Alat berkaitan

Kekalkan semuanya setempat, terokai alat pelengkap.

Semua alat imej