Anda sudah ada logo. Apa yang anda perlukan ialah logo itu ditukar menjadi timbunan fail ikon kecil yang pelayar jangkakan — favicon.ico, segelintir PNG pada saiz tertentu, manifes web, dan HTML untuk menyambungnya semua. Penukaran itu mekanikal, dan anda boleh melakukannya dalam kira-kira seminit tanpa memasang apa-apa.
Masalahnya ialah bukan setiap logo mengecil dengan anggun. Jadi ini merangkumi kedua-dua laluan pantas dan cara membaiki logo yang menjadi lumat pada 16 piksel.
Versi pendek
- Dapatkan logo anda sebagai imej segi empat sama — idealnya 512×512 atau lebih besar, pada latar belakang telus atau pejal.
- Letakkannya ke dalam Penjana Favicon.
- Muat turun set yang dijana dan letakkan fail ke dalam akar tapak anda.
- Tampal cebisan HTML yang disediakan ke dalam
<head>anda.
Itulah keseluruhan kerja. Penjana mengeluarkan favicon.ico, PNG pada 16, 32, 48, 180, 192, dan 512, webmanifest, dan tag <link> tepat — jadi anda tidak memangkas enam imej dengan tangan atau meneka sintaks manifes.
Sediakan logo anda dahulu — di sinilah kualiti dimenangi atau hilang
Favicon hidup pada 16×16 dalam tab pelayar. Apa sahaja butiran yang tidak boleh bertahan saiz itu terbazir. Luangkan dua minit di sini dan hasilnya kelihatan tajam di mana-mana.
Jadikan ia segi empat sama. Favicon adalah segi empat sama. Logo mendatar yang lebar akan bertepi hitam atau terhimpit. Pangkas ke elemen paling boleh dikenali — biasanya tanda atau satu huruf awal — dan pusatkannya dalam bingkai segi empat sama.
Buang tanda kata. Nama syarikat anda sepenuhnya tidak akan boleh dibaca pada saiz tab. "Acme Corporation" menjadi comot kelabu. Kekalkan simbol, atau satu huruf, dan biar tajuk tab membawa nama.
Semak kontras terhadap kedua-dua tema. Tab pelayar datang dalam cerah dan gelap. Ikon biru laut gelap lenyap pada tab gelap; ikon pucat lenyap pada yang cerah. Jika tanda anda satu warna rata, pastikan warna itu dibaca pada kedua-duanya. Garis luar halus atau cip latar belakang pejal kecil boleh membantu.
Tinggalkan ruang bernafas. Tambah sedikit pelapik di dalam segi empat sama supaya ikon tidak terhimpit tepi. Ia akan kelihatan lebih seimbang dalam setiap slot.
Mula besar. Sumber 512×512 (atau lebih besar) memberi penjana butiran bersih untuk diturunkan skala. Membesarkan logo kecil dahulu cuma membakar kabur.
Latar belakang telus atau pejal?
Kedua-duanya berfungsi — ia bergantung pada rupa yang anda mahu.
- Telus membiarkan latar belakang tab atau skrin utama tembus. Bersih dan moden, dan ia menyesuaikan dengan persekitaran cerah/gelap. Terbaik apabila tanda anda bentuk yang berbeza.
- Cip latar belakang pejal (segi empat sama membulat berwarna di belakang tanda) menjamin ikon dibaca tidak kira apa di belakangnya. Ini yang kebanyakan ikon aplikasi lakukan, dan ia pilihan lebih selamat jika logo anda nipis atau kontras rendah.
Jika ragu-ragu, cip pejal dalam warna jenama anda ialah pilihan teguh — ia tidak pernah lenyap ke dalam latar belakang sepadan.
Selepas anda muat turun: ke mana fail pergi
Penjana menyerahkan anda satu set fail dan cebisan. Dua peraturan penempatan meliputinya:
favicon.icopergi di akar tapak anda (/favicon.ico). Pelayar dan Windows mencarinya di situ mengikut nama walaupun tanpa tag<link>.- Segala yang lain boleh hidup di mana sahaja anda mahu selagi laluan dalam cebisan HTML sepadan. Kebanyakan orang letakkan semuanya di akar dan tampal cebisan sebagaimana adanya.
Kemudian ia cuma cebisan <head> — pautan ikon, apple-touch-icon, dan rujukan manifes. Tampal, sebar, segar-semula keras, dan anda patut nampak logo anda dalam tab.
Mengapa lakukan dalam pelayar?
Kerana logo anda tidak pernah meninggalkan mesin anda. Keseluruhan proses — membaca imej, mengubah saiz ke setiap dimensi, membungkus .ico, menulis manifes — berlaku secara setempat dalam pelayar anda menggunakan Canvas. Tiada yang dimuat naik ke pelayan, tiada pendaftaran atau tera air, dan selepas lawatan pertama anda alat berfungsi luar talian. Untuk aset jenama yang mungkin anda belum terbitkan, mengekalkannya jauh daripada pelayan pihak ketiga ialah lalai yang bijak.
Sebaik logo anda segi empat sama, kontras tinggi, dan boleh dibaca kecil, menjana set penuh ialah bahagian mudah.