Artikel
Membuat favicon dari PNG
Favicon adalah grafik kecil yang ditampilkan browser di tab, bookmark, dan daftar riwayat. Membuatnya dengan benar melibatkan lebih dari sekadar mengubah ukuran logo: format .ico mengemas beberapa resolusi ke dalam satu file, browser modern lebih menyukai PNG, perangkat mobile memiliki apple-touch-icon sendiri, dan manifes aplikasi web memerlukan kumpulan ikon sendiri. Artikel ini membahas setiap bagian dan menjelaskan cara menghasilkan seluruh kumpulan dari satu PNG sumber.
Apa itu favicon dan di mana browser menggunakannya
Kata favicon adalah singkatan dari "favorite icon". Browser pertama kali menampilkannya di bilah alamat di Internet Explorer 5 (1999), kemudian diadopsi untuk bookmark. Saat ini muncul di tab browser, toolbar bookmark, riwayat penelusuran, halaman tab baru di beberapa browser, dan taskbar sistem operasi saat situs disematkan. Di mobile, jika pengguna menambahkan situs ke layar beranda mereka, perangkat menggunakan gambar terkait tetapi berbeda yang disebut apple-touch-icon daripada favicon standar. Mesin pencari terkadang menampilkan favicon di sebelah hasil di antarmuka mereka. Grafik ini kecil berdasarkan desain, yang membuatnya efektif untuk identifikasi visual cepat tetapi juga menuntut untuk dibuat dengan baik: pada 16x16 piksel, logo yang detail menjadi noda yang tidak jelas. File favicon itu sendiri telah melalui beberapa format selama beberapa dekade, dengan .ico tetap paling kompatibel secara luas dan PNG sekarang menjadi default modern untuk sebagian besar browser.
Kontainer .ico: beberapa resolusi dalam satu file
Format .ico adalah kontainer, bukan gambar tunggal. Satu file .ico dapat menampung beberapa gambar bitmap pada resolusi yang berbeda, masing-masing disimpan sebagai entri terpisah dalam indeks di awal file. Tiga ukuran yang paling umum adalah 16x16, 32x32, dan 48x48 piksel. Ketika Windows menampilkan favicon di Explorer atau di taskbar, ia memilih entri yang paling cocok dengan konteks tampilan. Versi Windows lama memerlukan entri 48x48 untuk slot taskbar dengan kepadatan tinggi. Browser meminta favicon pada 16x16 untuk tab tetapi mungkin menggunakan entri yang lebih besar jika layar kepadatan lebih tinggi terdeteksi. Mengemas ketiga ukuran ke dalam satu file .ico berarti satu permintaan HTTP mencakup setiap kasus penggunaan. Mendistribusikannya sebagai PNG terpisah juga valid tetapi memerlukan tag tautan tambahan dan menambah permintaan HTTP. Gambar internal di dalam file .ico adalah data BMP atau PNG standar, sehingga kontainer hanya menambahkan sedikit overhead header per entri.
Merancang untuk ukuran kecil: sederhanakan tanda
Pada 16x16 piksel Anda memiliki total 256 piksel. Logotype khas dengan wordmark atau detail halus menjadi tidak terbaca pada ukuran tersebut. Pendekatan standar adalah membuat tanda yang disederhanakan: satu huruf, bentuk abstrak, atau ikon yang mewakili merek tanpa mengandalkan detail. Beberapa masalah spesifik yang perlu diantisipasi: garis tipis menghilang sepenuhnya pada ukuran kecil, terutama pada layar non-retina. Pasangan huruf dan detail ruang negatif menjadi noise abu-abu. Gradien hampir tidak terlihat. Kontras tinggi antara tanda dan latar belakangnya adalah faktor tunggal terbesar dalam keterbacaan. Bentuk solid di atas latar belakang polos hampir selalu lebih terbaca daripada ilustrasi detail pada 16x16. Ukuran 32x32 dan 48x48 lebih mudah dimaafkan dan dapat mendukung sedikit lebih banyak detail, tetapi versi 16x16 harus diperlakukan sebagai kendala yang mengikat. Jika tanda masih tidak terbaca pada 16x16, desain perlu disederhanakan lebih lanjut.
Kumpulan modern: .ico, ikon PNG, apple-touch-icon, manifest, dan tag tautan HTML
Pengaturan favicon lengkap untuk situs publik saat ini memerlukan lima hal. Pertama, favicon.ico di root situs (browser meminta /favicon.ico langsung di root domain tanpa tag tautan sebagai fallback). Kedua, PNG 32x32 untuk browser desktop modern, dideklarasikan dengan tag tautan: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Ketiga, PNG 16x16 untuk ukuran tab: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Keempat, apple-touch-icon berukuran 180x180 piksel untuk bookmark layar beranda iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Kelima, manifes aplikasi web (site.webmanifest) dengan PNG 192x192 dan 512x512 untuk Android dan progressive web app. Transparansi didukung dalam PNG dan dalam entri yang dienkoding PNG di dalam .ico, meskipun apple-touch-icon harus memiliki latar belakang buram karena iOS mengabaikan saluran alpha dan mengisi area transparan dengan hitam.
Melakukannya secara lokal: favicon-generator menjaga gambar Anda di perangkat Anda
favicon-generator di situs ini mengambil PNG dan menghasilkan kumpulan lengkap: favicon.ico multi-resolusi yang dikemas dengan entri 16x16, 32x32, dan 48x48, ukuran PNG individual untuk penggunaan tag tautan langsung, dan apple-touch-icon 180x180. Semua ini terjadi di browser Anda menggunakan Canvas API dan encoder .ico JavaScript. Gambar sumber Anda tidak pernah diunggah ke mana pun; gambar tetap di perangkat Anda. Ini penting ketika file sumber adalah logo perusahaan atau aset apa pun yang tidak boleh meninggalkan mesin Anda sebelum Anda mengontrol ke mana perginya. Setiap file yang dihasilkan ditawarkan sebagai unduhan tersendiri, menggunakan nama file konvensional. Anda menyalinnya ke root situs dan menambahkan tag tautan yang sesuai ke head HTML Anda. Jika logo sumber Anda memiliki detail halus yang tidak bertahan pada render 16x16, Anda dapat memotong atau menyederhanakannya sebelum menjatuhkannya ke generator, atau menyediakan gambar sumber yang berbeda yang disiapkan khusus untuk favicon.
Alat dalam artikel ini
- Generator faviconBuat PNG favicon berukuran 16/32/48/180/192/512 px dari gambar mana pun. Tanpa unggah.
- Ubah ukuran gambarUbah ukuran dan konversi gambar (JPEG, PNG, WebP) tanpa mengunggahnya.
- Kompres gambarKurangi ukuran berkas gambar tanpa mengunggah. Slider kualitas atau ukuran target dalam KB. Batch didukung.
Pertanyaan yang sering diajukan
Apakah saya masih memerlukan favicon.ico jika saya mendeklarasikan tag tautan PNG?
Ya, dengan dua alasan. Pertama, browser yang tidak membaca HTML Anda (crawler web, pembaca RSS, beberapa browser mobile lama) mencari /favicon.ico langsung di root domain. Jika file tersebut tidak ada, mereka menghasilkan permintaan 404 di setiap pemuatan halaman, yang menambah noise pada log server dan perjalanan bolak-balik kecil yang tidak perlu. Kedua, versi lama Internet Explorer hanya mengenali format .ico dan mengabaikan tag tautan PNG. Menyediakan keduanya mencakup semua kasus.
Bisakah saya menggunakan SVG sebagai favicon?
Chrome dan Firefox mendukung favicon SVG melalui `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari tidak mendukung favicon SVG. Karena favicon SVG independen resolusi, tampilan tajam pada kepadatan tampilan apa pun, termasuk layar retina, tanpa memerlukan beberapa varian ukuran. Rekomendasi praktisnya adalah mendeklarasikan tag tautan SVG untuk browser yang mendukungnya dan tetap menyertakan fallback .ico untuk cakupan lengkap. Favicon SVG juga dapat menyertakan kueri media `prefers-color-scheme` untuk beralih antara versi terang dan gelap secara otomatis.
Gambar apa yang harus saya mulai untuk mendapatkan hasil terbaik?
PNG persegi berukuran 512x512 atau lebih besar dengan latar belakang transparan memberikan fleksibilitas terbesar. Memulai besar dan menurunkan skala mempertahankan lebih banyak detail daripada memulai dari gambar kecil. Jika logo utama Anda menyertakan wordmark, pertimbangkan untuk menyiapkan versi yang disederhanakan secara terpisah yang hanya menampilkan ikon atau tanda, karena teks tidak akan terbaca pada 16x16 terlepas dari resolusi sumbernya. Kontras tinggi antara tanda dan latar belakangnya adalah prediktor paling andal tentang apakah ukuran kecil akan terbaca dengan jelas.