Cara menggunakan
- Pilih Huruf dan masukkan satu atau dua karakter beserta warnanya, atau pilih Gambar dan pilih logo (sebaiknya berbentuk persegi dan berukuran minimal 512 px).
- Periksa pratinjau setiap ukuran, terutama 16 dan 32 px yang ditampilkan di tab browser.
- Unduh ZIP dan unggah file-file di dalamnya ke direktori utama situs web Anda.
- Tempel tag HTML ke bagian head halaman Anda, lalu sesuaikan nama dalam site.webmanifest jika perlu.
Cara kerja
Browser dan perangkat mencari ikon di berbagai tempat. Paket yang dibuat di sini mencakup kebutuhan umum: favicon.ico dengan gambar berukuran 16, 32, dan 48 px untuk tab browser, bookmark, serta perangkat lunak lama yang meminta /favicon.ico secara otomatis; file PNG berukuran 16 dan 32 px yang dirujuk oleh tag link; apple-touch-icon berukuran 180 × 180 yang digunakan saat seseorang menambahkan situs Anda ke layar utama iPhone atau iPad; serta ikon berukuran 192 dan 512 px yang dirujuk dari site.webmanifest untuk layar utama Android dan aplikasi web yang dapat diinstal.
File favicon.ico menyimpan ikon sebagai gambar PNG di dalam wadah ICO, yang dapat dibaca oleh semua browser terkini dan Windows Vista atau versi lebih baru. File ICO dan ZIP dirakit oleh kode di halaman ini; tidak ada yang dikirim ke server.
Ukuran kecil memerlukan desain sederhana: pada 16 × 16 piksel, garis tipis dan teks kecil tidak akan terlihat, sehingga huruf tebal atau logo yang disederhanakan lebih cocok daripada logo lengkap dengan tulisan. Gambar diperkecil dalam beberapa tahap berkualitas tinggi. apple-touch-icon selalu diberi warna latar solid karena iOS mengisi area transparan dengan warna hitam, dan iOS membulatkan sudutnya sendiri.
Setelah mengunggah ikon baru, browser mungkin masih menampilkan favicon lama untuk sementara karena menyimpannya dalam cache secara agresif. Memuat ulang halaman secara paksa atau membuka /favicon.ico secara langsung biasanya dapat membantu.
Contoh
Ikon huruf untuk proyek baru
Mengetik "TG" dengan huruf putih di atas kotak hijau tua bersudut bulat menghasilkan ikon sederhana yang tetap terbaca pada ukuran 16 × 16 px di tab browser, tanpa perlu membuat logo.
Ikon dari logo yang sudah ada
Logo PNG 1024 × 1024 dengan latar transparan, menggunakan opsi Sesuaikan seluruh gambar, menghasilkan ikon tab transparan dan apple-touch-icon dengan warna merek Anda sebagai latar.
Logo lebar
Untuk logo tulisan berukuran 1200 × 300, opsi Pangkas bagian tengah hanya mempertahankan huruf-huruf di tengah. Opsi Sesuaikan seluruh gambar mempertahankan semuanya, tetapi membuatnya sangat kecil; logo persegi terpisah biasanya terlihat lebih baik.
Pertanyaan yang sering diajukan
Apakah saya masih memerlukan favicon.ico?
Masih berguna. Beberapa browser, pembaca feed, dan alat meminta /favicon.ico dari direktori utama situs meskipun tidak ada tag link. Browser modern juga menggunakan ikon PNG yang dirujuk dalam HTML.
Di mana saya harus menyimpan file ini?
Unggah file ke direktori utama situs web Anda, bersama halaman beranda, agar /favicon.ico dan jalur lainnya dalam HTML berfungsi. Jika Anda menggunakan subdirektori, ubah jalur dalam tag link dan site.webmanifest.
Mengapa favicon lama saya masih ditampilkan?
Browser menyimpan favicon dalam cache terpisah dan untuk waktu yang lama. Coba muat ulang halaman secara paksa, buka /favicon.ico di tab baru, atau periksa melalui jendela privat. Mengganti nama file, misalnya menjadi favicon-v2.ico, juga akan memaksa pemuatan ulang.
Apakah alat ini membuat favicon SVG?
Tidak. Alat ini membuat file PNG dan ICO yang dapat digunakan di mana saja. Jika Anda sudah memiliki logo SVG, Anda dapat menambahkannya sendiri dengan tag link bertipe image/svg+xml selain file-file ini.
Privasi
Ikon, file ICO, dan ZIP dibuat di browser Anda. Gambar dan teks Anda tidak diunggah, disimpan, atau disertakan dalam analitik.