Generator favicon
Buat favicon dari logo Anda dengan generator favicon ini. Letakkan logo, lalu dapatkan satu set file lengkap, dari ikon tab browser 16 piksel hingga ikon aplikasi 512 piksel, beserta HTML yang tinggal ditempel. Semuanya diproses di browser, jadi gambar Anda tidak pernah diunggah.
Qwyzzle
Summit Roasters
Fox EsportsLetakkan logo di sini
PNG, JPG, WebP, atau SVG. Paling bagus persegi, 512 px atau lebih.
Dibuat di browser. Gambar Anda tidak pernah diunggah.
Apa itu favicon dan di mana tampilnya
Favicon adalah ikon persegi kecil yang mewakili situs Anda. Namanya singkatan dari “favorite icon”: browser pertama yang menampilkannya meletakkan ikon ini di samping bookmark, yang di browser itu disebut Favorites.
Favicon terlihat di tab browser, di samping judul halaman, dengan lebar 16 piksel, atau 32 piksel pada layar yang lebih tajam. Favicon juga menandai situs Anda di bookmark dan riwayat penjelajahan. Saat seseorang menyimpan situs Anda ke layar utama ponsel, favicon menjadi ikon aplikasi. Google pun menampilkannya di samping nama situs Anda di hasil penelusuran.
Di mana pun, tugasnya sama: mudah dikenali sekilas di antara ikon-ikon lain.
Mengapa satu favicon menjadi satu set file
Setiap tempat itu muncul pada masa yang berbeda dan meminta file sendiri. Generator favicon di atas membuat semuanya dari satu gambar.
Tab browser, bookmark, dan riwayat memakai favicon.ico, satu file yang berisi versi 16, 32, dan 48 piksel. Inilah format tertua: jika halaman tidak menyebutkan ikon apa pun, browser tetap mencari favicon.ico di folder root situs.
Jika mulai dari SVG, Anda juga mendapatkan favicon.svg, yang dipakai sebagai gantinya oleh browser yang bisa menampilkan ikon SVG. Karena tersusun dari bentuk, bukan piksel, file ini tetap tajam di layar apa pun.
iPhone dan iPad memakai apple-touch-icon.png berukuran 180 × 180 piksel saat seseorang menambahkan situs Anda ke layar utama. iPhone mengisi area transparan dengan hitam, jadi ikon ini selalu diberi latar solid: warna pilihan Anda, atau putih jika Anda memilih transparan.
Ponsel Android, serta situs yang dipasang sebagai aplikasi dari browser, memakai icon-192.png dan icon-512.png. Keduanya ditemukan lewat site.webmanifest, file teks kecil yang memberi tahu browser nama situs Anda (jika Anda mengisinya di alat ini) dan letak ikon yang lebih besar.
PNG terpisah berukuran 16 hingga 48 piksel adalah cadangan untuk layanan yang meminta PNG. Untuk hasil penelusuran, Google membaca tautan ikon di HTML halaman beranda Anda.
Cara memasang favicon di situs
Jika Anda atau developer Anda mengedit file situs, caranya hanya dua langkah.
Pertama, ekstrak file zip yang diunduh, lalu letakkan file-filenya di folder root situs, yaitu folder teratas tempat halaman beranda berada. Untuk memeriksanya, tambahkan /favicon.ico di akhir alamat situs Anda: ikonnya seharusnya terbuka.
Kedua, tempel baris HTML dari README (alat ini juga menampilkannya) ke bagian head di halaman Anda, yaitu bagian di awal HTML yang memuat judul halaman. Ada satu baris masing-masing untuk file ICO, Apple touch icon, dan manifest, ditambah satu untuk SVG jika ada.
Biasanya semua halaman memakai satu template yang sama, jadi Anda cukup menempelnya sekali. Hapus dulu baris ikon yang lama, karena jika tidak, browser bisa terus memakai ikon lama.
Di pembuat situs web, kedua langkah ini bisa dilewati: unggah icon-512.png di pengaturan ikon situs, dan HTML-nya akan ditambahkan untuk Anda.
Cara membuat logo tetap jelas di 16 piksel
Pada ukuran 16 × 16, seluruh ikon Anda hanyalah 256 kotak warna yang sangat kecil. Kebanyakan logo tidak digambar untuk ukuran itu.
Mulailah dari simbol, bukan nama: jika nama delapan huruf dijejalkan ke dalam 16 piksel, setiap huruf hanya mendapat lebar dua piksel. Tidak punya simbol? Pakai huruf pertama, besar dan tebal. Huruf tebal tetap terbaca jauh lebih lama daripada huruf tipis saat diperkecil.
Lalu kurangi detail. Garis yang sangat tipis dan celah kecil akan menyatu dengan sekitarnya, dan slogan berubah menjadi noda.
Yang penting adalah terang lawan gelap, bukan warnanya. Tab bisa terang atau gelap tergantung tema, dan ikon biru tua akan hilang di bilah tab yang gelap. Jika logo Anda gelap, beri latar terang di alat ini, atau sebaliknya.
Jarak tepi, yaitu ruang antara logo dan tepi persegi, perlu dibuat seimbang. Terlalu lebar, logo mengecil di tab. Terlalu sempit, sudut logo terpotong di iPhone, yang membulatkan sudut ikon di layar utama.
Terakhir, periksa pratinjau tab terang dan gelap di atas pada ukuran sebenarnya, tanpa memperbesar. Cek logo gratis kami memeriksa lebih jauh: logo diperkecil menjadi 32 piksel, lalu diukur berapa banyak detail yang bertahan.
Kapan perlu menggambar ulang, bukan sekadar memperkecil
Kadang sebuah logo memang tidak bisa diselamatkan. Pada ilustrasi yang detail atau tampilan 3D yang mengandalkan bayangan, detail itulah desainnya, dan di 16 piksel detail itu hilang. Alat ini bisa mengubah ukuran logo, tetapi tidak bisa menggambarnya ulang.
Itu bukan berarti logonya buruk, hanya saja logo itu dibuat untuk tempat yang lebih besar. Gambarlah versi kecil dengan sengaja: simbol yang disederhanakan, atau inisial dengan font merek Anda. Pertahankan warna dan sebagian bentuknya, maka orang akan mengaitkan keduanya. Bagi kami, inisial yang jelas selalu lebih baik daripada miniatur yang kabur.
Butuh logo baru? Pembuat logo AI kami merancangnya dari nama merek Anda, ditambah deskripsi singkat jika mau. Logo dari template logo kami menyertakan simbolnya sebagai file terpisah jika desainnya memiliki simbol, dan setiap logo yang Anda beli dari kami sudah termasuk file favicon.
Pertanyaan seputar favicon
Gratis, tanpa mendaftar, dan tanpa watermark. Gambar Anda juga tetap di tangan Anda. Alat ini bekerja sepenuhnya di browser: semua ukuran dan file zip dibuat langsung di perangkat Anda, dan gambar tidak pernah dikirim ke server kami. Jadi, alat ini cocok juga untuk logo yang belum Anda tunjukkan kepada siapa pun.
Persegi, minimal 512 piksel di setiap sisi. Ikon terbesar dalam set berukuran 512 piksel, jadi PNG, JPG, atau WebP yang lebih kecil harus direntangkan untuk mengisinya, dan ikon besar jadi kurang tajam. Alat ini akan memberi tahu jika hal itu terjadi. SVG tidak punya batas seperti itu: SVG tersusun dari bentuk, bukan piksel, sehingga tetap tajam di semua ukuran. Logo yang lebar hanya mengisi strip tipis di dalam persegi, jadi mulailah dari simbol atau inisial Anda.
Sebaiknya semuanya, karena browser dan ponsel yang berbeda meminta file yang berbeda, dan HTML dari alat ini memberi tahu masing-masing file mana yang harus dipakai. File ICO dipahami semua browser. PNG untuk ponsel dan aplikasi yang terpasang, dengan cadangan dalam ukuran kecil. SVG, yang Anda dapatkan jika mulai dari SVG, tetap tajam di layar apa pun pada browser yang mendukungnya.
Kemungkinan besar browser menampilkan salinan yang tersimpan. Browser menyimpan favicon jauh lebih lama daripada bagian halaman lainnya, jadi ikon lama bisa tetap muncul meski file baru sudah aktif. Coba muat ulang paksa (hard refresh), yaitu memuat ulang halaman tanpa file yang tersimpan: Ctrl+Shift+R di Windows, Cmd+Shift+R di Mac (Option+Cmd+R di Safari). Jika belum berhasil, buka alamat situs Anda dengan /favicon.ico di bagian akhir lalu muat ulang, atau lihat di jendela pribadi. Browser orang lain akan ikut berganti seiring waktu.
Di pengaturan pembuat situs, bukan di folder. Sebagian besar pembuat situs web dan platform toko online punya pengaturan ikon situs atau favicon untuk mengunggah satu PNG persegi. Pilih icon-512.png, file terbesar di dalam zip, agar pembuat situs punya bahan yang cukup saat membuat ukuran yang lebih kecil. Jika pengaturannya meminta ukuran tertentu, gunakan file yang sesuai. Pembuat situs akan menambahkan HTML untuk Anda, jadi README bisa dilewati.
Google mengambil favicon baru saat crawler-nya, yaitu program yang membaca halaman web untuk Google, mengunjungi halaman beranda Anda berikutnya. Tidak ada jadwal pasti untuk itu. Google memerlukan gambar persegi dan tautan ikon di HTML halaman beranda Anda, jadi pastikan keduanya sudah terpasang. Setelah itu, apa yang ditampilkan dan kapan sepenuhnya keputusan Google, jadi beri waktu.
Belum punya logo? Mulai dari sini.
Desain logo dengan pembuat logo AI kami atau dengan template di pembuat logo gratis. Setiap logo yang Anda unduh dari DepthLogo sudah dilengkapi favicon.