§

Muat naik imej

PNG, JPEG, WebP — sehingga 10 MB.

Menyusun set favicon untuk laman web baru sering bermakna membuka aplikasi grafik, mengeksport enam PNG berbeza dan menulis tag secara manual. Alat ini memendekkan proses menjadi satu langkah: letak imej (atau taip perkataan atau emoji), pilih fon dan warna, dapatkan setiap saiz favicon serta HTML dan coretan manifest dalam ZIP. Pendekatannya di sisi pelayar — Canvas API mengendalikan perubahan saiz dan fflate membungkus bundle dalam ingatan. Tiada muat naik, jadi ia berfungsi pada mesin korporat terkunci atau persekitaran terpencil. Favicon yang terhasil ialah PNG standard yang berfungsi pada semua pelayar yang menyokong , dan ikon Apple-touch-icon serta PWA sedia untuk binaan pengeluaran.

// Alat Berkaitan

./image-format-converter
Penukar Format Imej
Tukar imej PNG, JPEG, dan WebP secara setempat — tiada muat naik, sokongan kelompok.
→
./image-compressor
Pemampat Imej
Mampatkan imej JPEG, PNG, dan WebP secara setempat — kualiti atau saiz sasaran, tiada muat naik.
→
./image-resizer
Pengubah Saiz Imej
Ubah saiz foto menggunakan piksel, peratusan, atau sisi terpanjang — tiada muat naik, sokongan kelompok.
→
./
Semua Alat
Semak imbas set penuh alat dalam talian Ultim8Soft.
→

Bagaimana penjanaan favicon berasaskan pelayar berfungsi

Keseluruhan saluran paip penjanaan berjalan di dalam tab pelayar anda menggunakan Canvas API dan pustaka mampatan fflate. Tiada pemprosesan pelayan, tiada muat naik, tiada perkhidmatan pihak ketiga.

  1. Muatkan imej sumber anda atau render teks atau emoji anda pada kanvas luar skrin pada resolusi tinggi. Jika anda memilih imej, ia akan dinyahkod oleh pelayar secara asli. Jika anda memilih mod teks, halaman akan melukis perkataan anda pada kanvas dengan fon, warna teks, dan warna latar yang dipilih.
  2. Untuk setiap saiz sasaran (16, 32, 48, 180, 192, 512 piksel), halaman mencipta kanvas luar skrin baru pada dimensi tepat itu, kemudian melukis kandungan sumber ke atasnya menggunakan Canvas API. Perubahan saiz imej terbina dalam pelayar mengendalikan pengecilan dengan penapisan bilinear atau bicubic secara automatik, menghasilkan favicon yang tajam pada setiap saiz.
  3. Setiap kanvas dieksport ke PNG Blob melalui canvas.toBlob(). Panel pratonton menunjukkan semua enam saiz supaya anda boleh memeriksa hasil sebelum memuat turun. Blok HTML sedia untuk ditampal dan coretan manifes aplikasi web (manifest.json) dibina daripada nama fail supaya anda boleh letakkannya terus ke dalam tag head laman web anda.
  4. Apabila anda klik Muat turun ZIP, halaman membaca setiap PNG Blob ke dalam ingatan, menggunakan fflate untuk membungkusnya bersama fail manifest.json ke dalam satu arkib ZIP, dan mencetuskan muat turun dengan satu klik. Keseluruhan bundle dibina dalam pelayar anda — tiada apa-apa yang dimuat naik pada mana-mana peringkat.

Mengapa hasilkan favicon dalam pelayar anda?

  • Set favicon lengkap menghapuskan ralat 404 favicon-tidak-dijumpai pelayar pada lawatan pertama dan memastikan laman web anda kelihatan profesional dalam penanda buku, tab pelayar, dan skrin pemasangan PWA. Saiz yang hilang bermakna pelayar sama ada tidak memuatkan apa-apa atau menggunakan skala jiran terdekat yang kabur.
  • HTML dan coretan manifes yang disertakan menjimatkan anda daripada menulis enam tag dan blok manifes JSON secara manual. Tampalkannya ke dalam head laman web anda, laraskan laluan jika perlu, dan anda selesai dalam beberapa saat berbanding beberapa minit.
  • Penjanaan sisi klien adalah satu-satunya pilihan pada peranti korporat terkunci yang tiada editor foto. Kerana tiada apa-apa yang dimuat naik, tiada risiko kebocoran data dan tiada semakan pematuhan diperlukan untuk imej sensitif atau berjenama.
  • Mod teks dan emoji membolehkan anda menjana favicon tanpa sebarang imej. Taip inisial jenama anda, huruf, atau emoji, pilih fon dan warna, dan dapatkan set lengkap — sesuai untuk projek peribadi, prototaip, atau laman web yang hanya memerlukan favicon sementara.

Aplikasi penjanaan favicon biasa

Setiap laman web yang orang tandai atau pasang memerlukan favicon. Berikut adalah tiga senario di mana penjana berasaskan pelayar menjimatkan masa.

  • Menyediakan halaman arahan atau microsite baru. Hasilkan set favicon lengkap daripada logo jenama dalam masa kurang seminit, salin tag ke dalam head laman web, dan gunakan. Tiada alat reka bentuk diperlukan.
  • Menghasilkan ikon PWA untuk aplikasi web progresif. Ikon PNG 192×192 dan 512×512 diperlukan untuk manifest.json. Hasilkannya bersama-sama dengan set favicon yang lain dalam satu langkah dan bukannya mengubah saiz logo secara manual.
  • Mencipta pemegang tempat untuk prototaip dan laman web pementasan. Taip satu huruf atau emoji, pilih warna latar, dan dapatkan favicon realistik tanpa menunggu aset jenama akhir daripada pasukan reka bentuk.

Contoh kerja: menjana set favicon daripada logo syarikat

Anda mempunyai logo PNG 500×500 dan memerlukan set favicon lengkap untuk laman web pemasaran baru.

Buka halaman ini dan letak logo PNG ke dalam zon muat naik. Imej dimuatkan dan pratonton muncul di sebelah grid saiz. Klik Hasilkan favicon. Halaman melukis logo ke enam kanvas luar skrin pada 16, 32, 48, 180, 192, dan 512 piksel dan menunjukkan setiap hasil. Di bawah panel pratonton, blok HTML sedia untuk ditampal muncul dengan entri rel="icon" untuk saiz 16/32/48, pautan apple-touch-icon untuk saiz 180, dan pautan manifest untuk ikon PWA. Coretan manifes di bawah menyenaraikan ikon 192 dan 512. Klik Muat turun ZIP — halaman membungkus kesemua enam PNG serta manifest.json ke dalam satu arkib ZIP melalui fflate. Seluruh perjalanan mengambil masa dua saat dan tidak menggunakan lebar jalur selain daripada muatan halaman awal.

Apakah saiz favicon yang dihasilkan oleh alat ini?

Enam saiz: 16×16, 32×32, dan 48×48 untuk favicon pelayar standard, 180×180 untuk Apple Touch Icon, dan 192×192 dan 512×512 untuk ikon manifes PWA. Setiap saiz dikeluarkan sebagai PNG. Pelayar moden menerima favicon PNG melalui .

Bolehkah saya menjana favicon daripada teks atau emoji?

Ya. Tukar ke mod teks atau emoji, taip perkataan atau tampal emoji, pilih fon, warna teks, dan warna latar, dan klik Hasilkan. Teks akan dirender pada kanvas luar skrin pada resolusi tinggi dan kemudian diubah saiznya kepada setiap saiz favicon sasaran.

Adakah imej dimuat naik ke pelayan?

Tidak. Imej tidak pernah meninggalkan peranti anda. Halaman menggunakan File API pelayar untuk membaca imej ke ingatan dan Canvas API untuk mengubah saiz dan mengeksport setiap favicon. Buka panel Network DevTools semasa menjana — satu-satunya permintaan keluar adalah muatan halaman awal dan panggilan iklan. Tiada data imej dihantar.

Apakah format yang diterima untuk muat naik imej?

Sebarang format yang boleh dinyahkod oleh pelayar: PNG, JPEG, WebP, GIF, dan SVG (dirasterkan oleh pelayar). Had saiz fail ialah 10 MB setiap muat naik.

Bagaimanakah muat turun ZIP berfungsi?

Halaman menggunakan pustaka fflate (dimuat atas permintaan daripada laluan vendor dikongsi) untuk membungkus semua PNG yang dihasilkan serta manifest.json ke dalam arkib ZIP standard. Pembungkusan berlaku sepenuhnya dalam ingatan pelayar — tiada muat naik, tiada perjalanan pergi balik pelayan. ZIP dihidangkan sebagai muat turun Blob dengan satu klik.

Bolehkah saya menggunakan favicon ini di mana-mana laman web?

Ya. Favicon PNG yang dihasilkan berfungsi pada semua pelayar moden yang menyokong tag . Apple Touch Icon 180×180 meliputi iOS dan Safari. Ikon PWA 192×192 dan 512×512 memenuhi keperluan manifes untuk Chrome pada Android dan pelayar lain yang menyokong PWA.

Adakah terdapat pilihan format .ico sebenar?

Versi semasa mengeluarkan PNG kerana semua pelayar moden menerimanya melalui . Format .ico pelbagai resolusi sebenar belum disokong dan mungkin akan ditambah dalam keluaran akan datang.