Set favicon yang betul lebih daripada satu fail: pelayar mahu .ico berbilang saiz, iOS mahu apple-touch-icon 180px, Android mahu PNG 192 dan 512px serta manifes web. Alat ini memaparkan kesemuanya daripada satu imej dan membungkusnya menjadi satu ZIP, bersama tag HTML tepat untuk ditampal ke dalam <head> anda.
Pratonton menunjukkan ikon anda pada 16, 32 dan 48px sebenar supaya anda boleh menyemak ia kekal boleh dikenali pada saiz kecil sebelum anda menghantarnya.
Cara guna
- Tambah logo andaImej segi empat sama berfungsi paling baik; yang lain dipotong-tengah.
- Semak saiz kecilPratonton 16px ialah apa yang kebanyakan pengguna akan lihat dalam tab.
- Muat turun ZIPfavicon.ico, enam PNG, site.webmanifest dan html-snippet.txt sedia ditampal.
Satu imej masuk, satu set favicon penuh keluar
Masukkan satu logo atau ikon dan penjana ini membina set lengkap yang diperlukan laman moden: favicon.ico berbilang saiz yang membungkus versi 16, 32 dan 48 piksel, PNG berasingan pada 16, 32, 48, 180 untuk ikon sentuh Apple, serta 192 dan 512 untuk pemasangan Android dan PWA, ditambah site.webmanifest. Semuanya turun sebagai satu ZIP supaya anda boleh memasukkannya terus ke akar projek anda.
Anda juga mendapat coretan pengepala HTML sedia tampal dengan tag pautan dan meta yang betul sudah disambungkan. Salin ke dalam templat anda, muat naik fail, dan favicon muncul dalam tab pelayar, penanda buku dan pintasan skrin utama tanpa anda menulis sebarang markup dengan tangan.
Ikon yang tajam pada setiap saiz
Favicon amat kecil, jadi penjana ini memaparkan pratonton saiz sebenar pada 16, 32 dan 48 piksel, tepat seperti tab pelayar akan menunjukkannya. Itu membolehkan anda menangkap logo yang menjadi kabur pada 16px sebelum anda menghantarnya. Jika imej sumber anda bukan persegi, alat ini memangkasnya di tengah supaya ikon kekal seimbang dan bukan memampat.
Keseluruhan proses berjalan dalam pelayar daripada imej asal anda, bermakna anda boleh menjana PNG favicon dan ICO daripada logo beresolusi tinggi tanpa sebarang muat naik atau akaun.
Untuk apa orang menggunakannya
Melancarkan laman baharu — Jana favicon.ico dan setiap saiz PNG dalam satu laluan supaya tab dan penanda buku kelihatan siap pada hari pertama.
Menambah ikon pemasangan PWA — Eksport PNG 192 dan 512 ditambah site.webmanifest supaya aplikasi anda dipasang dengan ikon skrin utama yang betul.
Ikon sentuh Apple — Hasilkan apple-touch-icon 180x180 supaya penanda buku dan skrin utama iOS menunjukkan jubin yang tajam.
Menjenamakan semula laman sedia ada — Tukar satu logo baharu melalui penjana dan gantikan keseluruhan set ikon sekali gus.
Penyerahan pelanggan — Serahkan satu ZIP ico, PNG, manifes dan coretan pengepala supaya pembangun hanya perlu memasukkannya.
Menyemak keterbacaan saiz kecil — Gunakan pratonton saiz sebenar 16px untuk mengesahkan logo terperinci masih terbaca sebagai ikon.
Logo bukan persegi — Masukkan tanda kata yang lebar dan biarkan pangkasan tengah menjadikannya favicon persegi yang seimbang.
Laman statik atau projek rangka kerja — Salin tag pengepala yang dijana ke dalam templat Next, Astro, atau HTML biasa anda dan hantar.
Jana set favicon lengkap daripada satu imej — dalam pelayar, dalam satu laluan
Favicon kedengaran seperti renungan tunggal 16×16 piksel, dan selama bertahun-tahun memang begitu. Pelayar dan platform moden diam-diam menukarnya menjadi pengeluaran kecil. Untuk melakukannya dengan betul hari ini anda perlukan favicon.ico, sebaran PNG dari 16px hingga 512px, ikon sentuh Apple untuk skrin utama iOS, site.webmanifest supaya laman boleh dipasang sebagai aplikasi, dan blok tag <link> dan <meta> yang betul dalam <head> HTML anda. Terlepas satu saiz dan ikon tab anda kelihatan kabur pada skrin retina; terlepas manifes dan ikon "tambah ke skrin utama" berbalik kepada tangkapan skrin; salah blok tag dan sesetengah platform mengabaikan keseluruhannya.
Itu banyak output leceh untuk tugas yang anda lakukan sekali setiap projek dan kemudian lupa butirannya. IMG.DIY mengambil satu imej sumber dan menghasilkan set lengkap — .ico, setiap saiz PNG, manifes web, dan cebisan HTML salin-tampal — mengubah saiz sepenuhnya dalam pelayar anda dengan Canvas. Logo anda dibaca secara setempat dan dipaparkan ke setiap saiz sasaran pada peranti; tiada apa-apa dimuat naik. Untuk tanda jenama atau logo produk belum dilancarkan yang anda lebih rela tidak siarkan ke pelayan pihak ketiga sebelum pelancaran, jaminan setempat itu berbaloi dimiliki, dan ia tidak berkos apa-apa.
Kerana keseluruhan saluran berjalan di sebelah klien, ia juga berfungsi luar talian sebaik PWA disimpan cache, jadi anda boleh menjana semula ikon pada mesin kerja yang terkunci atau tanpa sambungan. Percuma, tiada akaun, tiada tera air dibakar ke dalam ikon anda.
Apa yang membezakannya
- Set lengkap, bukan sekadar .ico. ICO, PNG dari 16 hingga 512, ikon sentuh Apple, dan
site.webmanifestdalam satu muat turun. - HTML salin-tampal disertakan. Blok
<link>/<meta>tepat untuk dijatuhkan ke dalam<head>anda, supaya ikon benar-benar berdaftar merentasi pelayar. - Tiada apa-apa dimuat naik. Logo anda diubah saiz secara setempat — berguna apabila tanda itu sulit atau pra-pelancaran.
- Satu laluan, tiada wizard. Suapkan satu imej, dapatkan segalanya; tiada aliran berbilang langkah yang menanyakan pilihan platform yang kemudian perlu anda kaji.
- Luar talian dan bersih. PWA disimpan cache, tiada pendaftaran, tiada tera air pada mana-mana ikon yang dijana.
IMG.DIY berbanding penjana favicon lain
| Aspek | favicon.io | realfavicongenerator.net | Manual (aplikasi reka bentuk + kod) | IMG.DIY |
|---|---|---|---|---|
| Fail dimuat naik | Ya, ke pelayan mereka | Ya, ke pelayan mereka | Tidak, setempat | Tidak, kekal dalam pelayar |
| Set penuh (.ico + PNG + manifes) | Ya | Ya, sangat menyeluruh | Anda himpun sendiri | Ya |
| Cebisan HTML disediakan | Ya | Ya, terperinci | Anda tulis sendiri | Ya |
| Langkah ke hasil | Sedikit | Lebih (banyak pilihan) | Banyak | Satu laluan |
| Berfungsi luar talian | Tidak | Tidak | Ya | Ya, selepas lawatan pertama |
| Harga | Percuma | Peringkat percuma; pilihan berbayar | Kos aplikasi + masa anda | Percuma |
| Perlu akaun | Tidak | Tidak | Tidak | Tidak |
Berterus terang tentang pesaing: realfavicongenerator cemerlang dan benar-benar lebih menyeluruh — ia pratonton ikon anda pada platform sebenar, mengendalikan kes tepi seperti topeng tab-pin Safari dan tema, dan membolehkan anda menala penampilan setiap platform. Jika anda mahu tahap kawalan itu dan tidak kisah memuat naik imej anda, ia pilihan yang hebat. favicon.io pantas dan mudah dan juga menghasilkan set yang kukuh. Perbezaan IMG.DIY ialah gabungan output lengkap dengan tiada muat naik dan satu laluan: anda mendapat hasil praktikal yang sama — ico, PNG, manifes, dan HTML untuk memasangnya — tanpa logo anda meninggalkan pelayar dan tanpa melangkah melalui wizard konfigurasi. Untuk "saya ada logo, beri saya segala yang saya perlu tampal, dan jangan hantar fail saya ke mana-mana," itulah padanannya.
Mengapa IMG.DIY
Set lengkap
ICO + PNG 16/32/48/180/192/512 + manifes.
HTML salin-tampal
Tag pautan tepat disertakan sebagai fail teks.
Pratonton saiz-sebenar
Lihat ikon pada 16/32/48px sebenar dahulu.
Peribadi
Logo anda tidak pernah meninggalkan pelayar.