Penjana Favicon

Tukar sebarang logo atau imej menjadi set favicon yang lengkap: favicon.ico berbilang saiz, apple-touch-icon, ikon aplikasi Android/web dan cebisan HTML yang sedia untuk ditampal. Pilih bentuk persegi, bucu bulat atau bulatan, tambah pelapik atau warna latar belakang, dan muat turun keseluruhan pakej sebagai ZIP. Semuanya dijana secara setempat dalam pelayar anda — imej anda tidak pernah dimuat naik.

Privasi didahulukan: setiap imej diproses secara setempat dalam pelayar anda. Tiada apa-apa dimuat naik, disimpan atau dihantar ke mana-mana pelayan.

Penjana favicon PixelVault menukar sebarang imej menjadi set ikon laman web dan aplikasi yang lengkap tanpa memuat naik apa-apa. Kebanyakan laman “penjana favicon” meminta anda menghantar logo anda ke pelayan mereka sebelum anda menerima walau satu ikon pun. Di sini, setiap fail — favicon.ico berbilang resolusi, ikon PNG dan manifes — dihasilkan terus di dalam pelayar anda, jadi seni jenama anda tidak pernah meninggalkan peranti anda.

Laman moden memerlukan lebih daripada satu ikon. Pelayar membaca favicon.ico yang kecil untuk bar alamat dan tab, iOS mahukan apple-touch-icon 180×180 untuk skrin utama, dan Android serta PWA menggunakan PNG 192 dan 512px yang dirujuk daripada manifes web. PixelVault membina kesemuanya sekali gus daripada satu imej sumber dan memberi anda cebisan HTML yang sedia untuk ditampal supaya menyambungkannya mengambil masa beberapa saat sahaja.

Anda mengawal rupa ikon itu. Kekalkan ia sebagai persegi biasa, bulatkan bucunya, atau potong menjadi bulatan; tambah pelapik supaya tanda kata tidak terhimpit pada tepi; dan pilih latar belakang lutsinar atau pejal. Pratonton langsung menunjukkan hasilnya pada saiz favicon sebenar — termasuk tab pelayar olokan — jadi anda tahu dengan tepat apa yang akan dilihat pelawat sebelum anda memuat turun.

Cara ia berfungsi

Apabila anda menambah imej, pelayar menyahkodnya ke dalam memori dan PixelVault melukisnya semula pada kanvas persegi pada setiap saiz ikon, sambil menggunakan topeng bentuk, pelapik dan latar belakang pilihan anda. Setiap kanvas dienkod ke PNG dengan pengekod terbina pelayar, dan PNG 16, 32 dan 48px dibungkus menjadi satu favicon.ico (bekas PNG-dalam-ICO yang disokong secara meluas). Logo SVG diraster secara setempat pada resolusi tinggi terlebih dahulu, jadi ikon kekal tajam.

Mengapa pemprosesan setempat penting

Menjana ikon secara setempat bermakna logo anda — selalunya penjenamaan yang belum dilancarkan — tidak pernah dihantar, disimpan atau dilog oleh perkhidmatan pihak ketiga. Ia juga serta-merta: tiada muat naik, tiada baris menunggu dan tiada perjalanan pergi-balik muat turun, dan ia terus berfungsi luar talian setelah halaman dimuatkan. Apa yang anda muat turun ialah tepat apa yang dihasilkan pelayar anda, tanpa apa-apa tambahan.

Format yang disokong

  • ICO — favicon.ico berbilang resolusi (16/32/48px) untuk tab dan bar alamat.
  • PNG — Apple-touch-icon (180px) dan ikon Android/PWA (192 & 512px).
  • SVG — Input sahaja — logo vektor diraster secara setempat untuk ikon paling tajam.
  • JPG / WebP — Diterima sebagai imej sumber di samping PNG.

Kegunaan biasa

  • Cipta favicon.ico dan ikon aplikasi untuk laman web atau halaman pendaratan baharu.
  • Tukar logo PNG atau SVG kepada fail ICO berbilang saiz yang betul.
  • Jana apple-touch-icon dan ikon manifes web untuk PWA.
  • Segarkan set favicon jenama tanpa menyerahkan logo kepada perkhidmatan dalam talian.

Soalan lazim

Adakah imej saya dimuat naik untuk membuat favicon?
Tidak. favicon.ico, ikon PNG dan manifes semuanya dijana secara setempat dalam pelayar anda menggunakan API Canvas. Imej anda tidak pernah meninggalkan peranti anda.
Saiz dan fail apakah yang saya dapat?
Satu favicon.ico berbilang resolusi (16, 32 dan 48px), ikon PNG pada 16, 32, 48, 180 (apple-touch-icon), 192 dan 512px, satu site.webmanifest, dan cebisan HTML untuk ditampal ke dalam <head> anda.
Bolehkah saya menukar PNG atau SVG kepada ICO?
Ya. Letakkan PNG, JPG, SVG atau WebP dan muat turun favicon.ico yang sebenar. Logo SVG diraster secara setempat pada resolusi tinggi terlebih dahulu.
Imej apakah yang paling sesuai?
Imej persegi dengan logo yang ringkas dan berkontras tinggi. Imej bukan persegi dipotong dari tengah supaya muat; gunakan kawalan pelapik dan bentuk untuk membingkainya mengikut kehendak anda.
Bagaimanakah saya memasang favicon itu?
Nyahzip pakej itu ke dalam folder root laman anda dan tampal cebisan HTML yang diberikan ke dalam <head> halaman anda. favicon.ico dikesan secara automatik oleh kebanyakan pelayar.