Cara membuat favicon untuk website

Favicon adalah ikon kecil di tab browser, bilah bookmark, daftar riwayat, layar utama iPhone, dan di samping nama situs Anda di hasil pencarian. Sering kali itulah satu-satunya bagian merek Anda yang terlihat saat pengunjung membuka dua puluh tab. Dulu, membuatnya dengan benar berarti mengurus belasan ukuran. Kini, beberapa file saja sudah mencakup semua platform yang penting.

Panduan ini membahas apa yang perlu dibuat, cara mendesain ikon yang tetap terbaca di 16 piksel, cara memasangnya, dan cara mendiagnosis masalah yang paling umum.

File yang dibutuhkan situs modern

• favicon.ico berisi gambar 16, 32, dan 48 px. Browser meminta /favicon.ico dengan sendirinya bahkan tanpa HTML apa pun, Windows memakainya untuk shortcut, dan file ini adalah cadangan paling aman.
• apple-touch-icon.png berukuran 180×180. Dipakai saat seseorang menambahkan situs ke layar utama di iPhone atau iPad.
• icon-192.png dan icon-512.png. Ikon layar utama Android dan layar pembuka web app yang terpasang.
• site.webmanifest. File JSON kecil yang menunjuk ke dua ikon Android dan, jika Anda ingin situs bisa dipasang, mendeskripsikannya.
• Opsional, icon.svg. Satu ikon vektor yang dirender tajam di ukuran berapa pun oleh browser yang mendukung favicon SVG, dan bisa berganti warna untuk mode gelap.

Semua hal lain yang mungkin Anda temukan di tutorial lama, seperti puluhan ukuran PNG dan gambar tile khusus browser, tidak lagi diperlukan untuk situs biasa.

Buat satu set dari satu logo

1. Siapkan sumber berbentuk persegi. SVG paling ideal; jika tidak ada, PNG minimal 512×512.
2. Buka Pembuat favicon dan lepas file Anda. PNG, JPG, WebP, dan SVG hingga 20 MB diterima.
3. Unduh ZIP-nya. Isinya favicon.ico (berisi 16, 32, dan 48 px), apple-touch-icon.png, icon-192.png, icon-512.png, dan site.webmanifest.
4. Salin file-file itu ke root situs Anda, di samping halaman beranda.

Setiap ukuran digambar langsung dari file asli, jadi SVG dirasterisasi langsung di 16 px, bukan diperkecil dari bitmap besar. Rendering berlangsung di browser Anda; logo tidak diunggah. Sumber yang tidak persegi diskalakan agar muat dan diletakkan di tengah, dengan ruang transparan di sisi yang lebih pendek.

Generator ini tidak membuat icon.svg. Jika Anda ingin favicon SVG, salin logo SVG Anda sendiri ke root situs dengan nama tersebut.

Tambahkan HTML

Letakkan baris-baris ini di <head> setiap halaman, atau di template tata letak bersama:

<link rel="icon" href="/favicon.ico" sizes="32x32">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

Hapus baris SVG jika Anda tidak punya file SVG. Atribut sizes="32x32" pada baris ICO penting jika ada SVG: atribut ini mencegah sebagian browser memilih ICO alih-alih SVG yang lebih tajam.

Manifest yang dihasilkan mencantumkan ikon dengan path absolut seperti /icon-192.png. Jika situs Anda berada di subfolder, bukan di root domain, sesuaikan path tersebut.

Mendesain ikon yang tetap terbaca di 16 piksel

Pada 16×16 total hanya ada 256 piksel. Tidak ada pengaturan ekspor yang bisa menyelamatkan desain yang butuh lebih dari itu.

• Pakai simbolnya, bukan logo lengkap. Satu huruf, monogram, atau simbol tanpa tulisan nama. Kata-kata berubah menjadi noda abu-abu di bawah 32 px.
• Bentuk tebal, sedikit warna. Garis yang lebih tipis dari sekitar 1/16 lebar ikon akan hilang di ukuran terkecil. Dua warna dengan kontras kuat paling mudah dibaca.
• Isi kotak persegi. Buang margin kosong di sumber. Logo yang mengambang di ruang transparan akan tampak sangat kecil di tab.
• Uji di kedua tema tab. Bilah tab bisa terang atau gelap. Simbol hitam di latar transparan akan hilang di tema gelap. Bentuk berwarna solid di belakang simbol, seperti persegi bersudut membulat, bekerja di keduanya.

Jika logonya lebar, potong hingga tersisa simbolnya dengan Potong gambar online pada rasio 1:1 sebelum membuat favicon. Jika logo raster hanya tersedia dalam ukuran kecil, memperbesarnya dengan Perbesar gambar dengan AI memberi ikon 512 px tepi yang lebih bersih daripada sekadar meregangkannya.

Mode gelap dengan favicon SVG

Favicon SVG bisa berisi media query CSS untuk prefers-color-scheme: dark dan mengganti warna isinya saat browser memakai tema gelap. Ini solusi paling rapi untuk simbol gelap yang hilang di tab gelap. Tetap simpan ICO sebagai cadangan, karena tidak semua browser memakai favicon SVG.

Butuh PNG dengan ukuran lain

Sebagian platform, plugin, dan toko aplikasi meminta ukuran PNG tertentu yang tidak ada dalam set. Konversi SVG ke PNG online merender logo vektor Anda di lebar berapa pun yang Anda ketik, dengan latar transparan.

Detail platform yang perlu diketahui

Layar utama iPhone

iOS tidak menampilkan transparansi pada ikon layar utama; area transparan diisi, biasanya dengan hitam, dan sudutnya dibulatkan oleh sistem. Karena generator mempertahankan transparansi, gunakan sumber dengan warna latar solid untuk Apple touch icon. Jangan membulatkan sudutnya sendiri.

Android dan situs yang bisa dipasang

Launcher Android bisa memangkas ikon menjadi lingkaran atau bentuk lain. Agar situs bisa dipasang sebagai aplikasi, buka site.webmanifest di editor teks dan tambahkan setidaknya name, short_name, start_url, display (misalnya standalone), dan theme_color. Jika Anda menandai ikon sebagai "purpose": "maskable", pastikan bagian penting desain berada di 80% area tengah kotak, karena tepinya bisa terpotong.

Hasil pencarian

Google menampilkan ikon situs di samping hasil pencarian. Pedomannya meminta ikon persegi berukuran kelipatan 48 px, dirujuk dari halaman beranda dan bisa di-crawl. Lapisan 48 px di ICO dan PNG 192 px sama-sama memenuhi syarat. Perubahan di hasil pencarian bisa butuh berhari-hari hingga berminggu-minggu untuk muncul, karena ikon diperbarui saat halaman beranda di-crawl ulang.

Pemecahan masalah

• Favicon lama terus muncul. Browser menyimpan favicon di cache secara agresif, terpisah dari halaman. Buka /favicon.ico langsung dan muat ulang, atau tambahkan query versi seperti ?v=2 pada tautan ikon.
• Ikon kosong atau rusak. Buka setiap URL file di browser. Error 404 biasanya berarti file masuk ke subfolder alih-alih root situs, atau server perlu tipe yang benar untuk .webmanifest.
• Ikon tampak buram di tab. Versi 16 dan 32 px dibuat dari sumber yang terlalu detail. Siapkan versi sederhana untuk ukuran kecil.
• Kotak hitam di layar utama iPhone. Sumbernya berlatar transparan. Buat ulang dari versi dengan latar solid.
• Garis tipis di tengah kotak. Sumbernya berupa tulisan nama yang lebar. Potong hingga tersisa simbolnya terlebih dahulu.

Daftar periksa

1. Sederhanakan logo menjadi simbol yang terbaca di 16 px dan bekerja di tab terang maupun gelap.
2. Buat persegi, idealnya sebagai SVG, jika tidak PNG 512×512 atau lebih besar.
3. Buat set favicon dan salin semua file ke root situs.
4. Tambahkan empat tag link ke head, sertakan icon.svg hanya jika Anda punya.
5. Lengkapi manifest jika situs harus bisa dipasang.
6. Periksa setiap URL file secara langsung, lalu uji di layar utama ponsel.