Favicon Webflow: Cara Menambah Favicon dan Webclip

Tambahkan favicon dan webclip di Webflow: letak pengaturan Icons, ukuran yang dibuat Webflow, cara publish, dan solusi jika ikon tidak kunjung berubah.

Pertanyaan yang sering diajukan

Berapa ukuran favicon Webflow yang tepat?

Pusat bantuan Webflow mencantumkan favicon 32x32 dan webclip 256x256. Pada alur terbarunya, Anda cukup mengunggah satu gambar persegi dan Webflow akan membuat ukuran lainnya secara otomatis. Jadi, mulailah dari file persegi berukuran minimal 256x256 piksel yang tetap terbaca jelas saat diperkecil.

Di mana saya mengunggah favicon di Webflow?

Buka Site settings, masuk ke General, lalu cari bagian Icons. Unggah gambar persegi Anda, pilih ikon mana yang ingin diperbarui, terapkan perubahan, lalu publish situs. Panduan lama menyebutnya Project settings, tetapi itu tempat yang sama.

Apa itu webclip di Webflow?

Webclip adalah ikon berukuran lebih besar yang dipakai saat seseorang menyimpan situs Anda ke layar utama ponsel atau pintasan sejenis. Webflow mencantumkan ukurannya 256x256 piksel. Ikon ini berbeda dari ikon kecil yang tampil di tab browser.

Kenapa favicon Webflow saya tidak muncul setelah diunggah?

Penyebab paling umum adalah situs belum di-publish setelah unggahan, karena ikon hanya berubah di situs yang sudah dipublikasikan. Penyebab kedua adalah cache browser. Publish dulu, lalu periksa di jendela pribadi atau browser lain sebelum menyimpulkan bahwa unggahan gagal.

Apakah Webflow mendukung favicon SVG atau mode gelap?

Menurut catatan pembaruan Webflow, Anda bisa mengunggah PNG, JPG, GIF, ICO, atau SVG, dan artikel bantuannya menyebut ikon tab browser mode gelap yang bersifat opsional. Webflow juga mengonversi unggahan SVG menjadi PNG agar kompatibel di berbagai browser, jadi uji hasilnya di browser yang penting bagi Anda.

Berapa lama sampai Google menampilkan favicon Webflow baru saya?

Tidak ada jadwal yang pasti. Google yang menentukan kapan melakukan crawl ulang dan memperbarui ikon di hasil pencarian, dan laporan komunitas menyebutkan prosesnya bisa memakan waktu berhari-hari hingga berminggu-minggu atau lebih. Yang bisa Anda kendalikan adalah memastikan ikon sudah tayang di situs yang dipublikasikan.

Jawaban singkat: Di Webflow, buka Site settings > General > Icons, unggah satu gambar persegi, pilih ikon mana yang ingin diperbarui (favicon terang, favicon mode gelap opsional, webclip), terapkan perubahan, lalu publish situs. Webflow mencantumkan favicon 32x32 dan webclip 256x256, dan ukuran lainnya dibuat otomatis dari unggahan Anda. Tidak ada yang berubah di situs langsung sebelum Anda melakukan publish. (Diperiksa pada November 2026 terhadap pusat bantuan dan catatan pembaruan Webflow.)

Yang diminta Webflow

Tutorial lama menjelaskan dua kolom unggah terpisah, satu untuk favicon 32x32 dan satu untuk webclip 256x256. Artikel bantuan Webflow saat ini menjelaskan alur yang lebih sederhana: unggah satu gambar persegi dan Webflow yang mengurus ukurannya. Berikut fungsi masing-masing ikon.

Ikon	Ukuran yang dicantumkan Webflow	Tampil di mana
Favicon (terang)	32x32	Tab browser dan bookmark
Favicon (mode gelap, opsional)	32x32	Tab browser saat browser dalam mode gelap
Webclip	256x256	Pintasan layar utama dan tautan tersimpan sejenisnya
Tambahan otomatis	Favicon 48x48, ikon sentuh 180x180 dan 192x192	Dibuat Webflow dari unggahan Anda

Format unggahan yang diterima menurut catatan pembaruan Webflow: PNG, JPG, GIF, ICO, dan SVG. Unggahan SVG diubah menjadi PNG agar kompatibel di berbagai browser.

Untuk pembahasan lebih dalam tentang ukuran di berbagai platform, lihat panduan ukuran favicon kami.

Siapkan gambar Anda terlebih dahulu

Favicon ditampilkan dengan lebar sekitar 16 hingga 32 piksel di tab, sehingga gambar sumber jauh lebih penting daripada pengaturannya.

Mulai dari bentuk persegi. Ekspor kanvas persegi berukuran 256x256 atau lebih besar agar webclip tidak diperbesar paksa.
Sederhanakan. Gunakan logomark atau satu huruf, bukan logo teks lengkap. Detail halus akan menjadi buram pada ukuran tab.
Perhatikan latar belakang. PNG transparan terlihat bagus di tab terang, tetapi bisa hilang di tab gelap. Jika Anda memakai favicon mode gelap, buat versi dengan simbol berwarna terang.
Pakai nama file yang netral. Nama aset yang diunggah bisa muncul di HTML yang dipublikasikan, jadi hindari nama seperti "final_v3_REAL.png".

Cara menambah favicon dan webclip di Webflow

Buka proyek Anda di Webflow Designer atau dashboard, lalu masuk ke Site settings.
Pilih tab General dan gulir ke bagian Icons.
Klik Upload icon dan pilih gambar persegi Anda.
Pilih ikon mana yang ingin diperbarui oleh gambar tersebut: favicon, favicon mode gelap opsional, dan webclip.
Jika Anda ingin ikon mode gelap yang berbeda, tambahkan di slot mode gelap. Langkah ini opsional.
Klik Apply. Teks pada antarmuka bisa sedikit berubah seiring pembaruan Webflow, jadi sesuaikan dengan label yang Anda lihat.
Publish situs ke domain Anda. Menyimpan saja tidak akan mengirim ikon ke situs langsung.
Buka situs langsung di jendela pribadi dan periksa tab-nya.

Daftar periksa yang bisa disalin

`` [ ] Square source image, 256x256 or larger [ ] Mark is simple enough to read at tab size [ ] Tested on a light and a dark browser theme [ ] Uploaded under Site settings > General > Icons [ ] Applied the change [ ] Published to the live domain (not just the webflow.io staging domain) [ ] Checked in a private window [ ] Hard refreshed or cleared cache if the old icon persists ``

Pemecahan masalah

Favicon masih menampilkan ikon lama atau logo Webflow

Coba langkah berikut secara berurutan:

Publish ulang. Ikon hanya tayang setelah publish. Jika Anda mempublikasikan ke beberapa domain, sertakan semuanya.
Uji di jendela pribadi. Browser menyimpan cache favicon dengan sangat agresif, dan tab biasa bisa menampilkan ikon lama dalam waktu lama.
Hard refresh halaman, atau tutup dan buka kembali browser.
Buka file-nya secara langsung. Pastikan URL ikon di sumber halaman bisa dimuat di tab tersendiri.

Unggahan ditolak atau tampilannya terdistorsi

Beberapa utas komunitas melaporkan galat ukuran pada alur lama yang mewajibkan dimensi persis. Jika Anda mengalaminya, gunakan gambar persegi dan coba lagi. Jika masalah berlanjut, coba browser lain atau jendela pribadi. Saran ini berasal dari laporan forum, bukan dari dokumentasi Webflow, jadi anggap sebagai solusi sementara.

Hasil pencarian Google menampilkan ikon yang salah

Ikon di hasil pencarian dikendalikan oleh Google, bukan Webflow. Utas komunitas menyebutkan pembaruan bisa memakan waktu berhari-hari, berminggu-minggu, atau lebih. Pastikan ikon termuat di situs langsung Anda, lalu tunggu. Ikon persegi yang stabil dengan URL yang konsisten akan membantu.

Ikon tampak buram di tab

Biasanya ini berarti gambar sumber terlalu detail atau sejak awal beresolusi rendah. Gambar ulang simbol yang lebih sederhana dalam ukuran lebih besar, lalu unggah kembali.

Format mana yang sebaiknya diunggah?

Format	Cocok untuk	Yang perlu diperhatikan
PNG	Sebagian besar situs; andal dan mendukung transparansi	Butuh resolusi yang cukup untuk webclip
SVG	Karya sumber yang bersih	Webflow mengubahnya menjadi PNG, jadi pratinjau hasilnya
ICO	Alur kerja lama	Sering kali tidak perlu karena Webflow membuat ukurannya sendiri
JPG	Jarang menjadi pilihan yang baik	Tanpa transparansi; meninggalkan kotak latar belakang

Jika ragu, PNG persegi berukuran 256x256 atau lebih besar adalah pilihan paling aman.

Posisi favicon dalam persiapan peluncuran

Favicon hanyalah bagian kecil dari daftar periksa peluncuran, bersama judul, deskripsi, dan gambar media sosial. Jika Anda masih membandingkan platform sebelum memutuskan, halaman perbandingan Webflow dan alternatif Webflow kami membahas untung ruginya, dan panduan umum mengganti favicon berguna jika Anda mengelola situs di lebih dari satu platform.

Jika Anda lebih suka memulai dari tata letak siap pakai, paket gratis We.Inc memungkinkan Anda mempublikasikan hingga tiga situs dari template siap pakai. Pembuat situs AI yang menyusun situs dari sebuah prompt tersedia mulai dari paket Starter seharga $20 per bulan. Anda bisa daftar di sini.

Mulai gratis · Tanpa kartu kredit

Umair Ali Sadaqat

Pendiri We.Inc

Umair adalah pendiri We.Inc. Ia menulis tentang pembuatan situs web dengan AI, agensi, dan bisnis menjalankan studio web.

Siap membuat sesuatu yang hebat?

Bergabunglah dengan 15,000+ bisnis yang memakai We.Inc untuk meluncurkan, berkembang, dan mengotomatiskan, semuanya dari satu platform.