Favicon untuk Webflow

Muat naik favicon Webflow adalah sebahagian daripada panel Tetapan Projek, yang berasingan daripada kanvas Pereka. Klik nama projek dalam papan pemuka Webflow, kemudian navigasi ke Tetapan Projek > Umum. Tatal ke bawah ke bahagian Ikon Favicon & Apl, klik kawasan muat naik dan pilih fail imej anda. Webflow menerima format PNG, ICO dan GIF.

32×32 piksel PNG ialah saiz minimum yang diperlukan untuk pemuat naik favicon Webflow, tetapi bermula dari 512×512 menghasilkan hasil yang lebih tajam. Webflow menurunkan sampel imej anda untuk paparan tab dan sebarang varian yang dijana CDN. Sentiasa sediakan sumber bersih terbesar yang anda miliki — penjana memudahkan untuk mencipta 512×512 PNG daripada sebarang logo.

Webflow mengehos favicon pada CDNnya sendiri dengan URL yang dijana secara automatik (biasanya dalam format uploads-ssl.webflow.com/...). Anda tidak perlu menyediakan laluan CDN secara manual. Selepas memuat naik, klik Simpan dan kemudian Terbitkan projek anda. Favicon disuntik pada penerbitan, bukan hanya pada simpan — perubahan yang tidak diterbitkan tidak kelihatan pada domain langsung anda.

Latar belakang lutsinar berfungsi dengan betul dengan muat naik favicon Webflow. CDN mengekalkan saluran alfa PNG, jadi ikon latar belakang lutsinar dipaparkan dengan bersih terhadap tema penyemak imbas mod gelap. Jika logo anda mempunyai latar belakang putih atau berwarna pepejal, ia akan muncul sebagai kotak segi empat sama dalam tab penyemak imbas. Eksport logo anda tanpa isian latar belakang sebelum memuat naik.

Pemuat naik favicon terbina dalam Webflow tidak menyokong fail SVG. Jika anda mahukan favicon vektor SVG untuk pemaparan yang jelas pada sebarang skala dan sokongan mod gelap, tambahkannya melalui suntikan kod tersuai. Pergi ke Tetapan Projek > Kod Tersuai > Kod Kepala dan tambah: `<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>`. Hos fail SVG pada pelayan anda sendiri atau perkhidmatan CDN.

Menambahkan apple-touch-icon untuk pemasangan skrin utama iOS juga memerlukan kod tersuai dalam Webflow, kerana pemuat naik terbina dalam hanya mengendalikan favicon standard. Muat naik 180×180 apple-touch-icon.png anda ke hos fail (atau Webflow Aset jika pelan anda menyokongnya), kemudian masukkan `<link rel='apple-touch-icon' sizes='180x180' href='URL_TO_YOUR_FILE'>` dalam medan Project Settings > Custom Code > Head Code.

Sokongan ikon PWA Webflow adalah terhad berbanding rangka kerja seperti Next.js. Tiada penjana manifes web asli dalam Webflow. Untuk sokongan pemasangan penuh PWA, buat fail JSON site.webmanifest secara manual, hoskannya secara luaran dan masukkan teg pautan manifes melalui kod tersuai. Sertakan entri 192×192 dan 512×512 PNG dalam tatasusunan ikon manifes.

Jika anda membina tapak Webflow untuk pelanggan, favicon selalunya ditetapkan lewat dalam projek dan kemudian dilupakan. Aliran kerja yang berguna ialah menetapkan favicon pemegang tempat pada awal projek dan menggantikannya sebelum penyerahan. Webflow tidak mempunyai versi sejarah favicon — sebaik sahaja anda menyimpan favicon baharu, favicon lama hilang daripada Tetapan Projek, walaupun ia mungkin kekal boleh diakses melalui URL CDNnya untuk beberapa lama.

Tapak Webflow berbilang domain — di mana projek yang sama diterbitkan ke berbilang domain tersuai — berkongsi favicon Tetapan Projek tunggal. Tiada penggantian favicon setiap domain dalam Webflow asli. Ikon yang sama muncul pada semua domain yang diterbitkan. Jika anda memerlukan ikon setiap domain, gunakan suntikan kod tersuai untuk mengatasi teg pautan ikon secara bersyarat (ini memerlukan Webflow CMS atau logik tersuai).

Kemas kini favicon dalam Webflow boleh mengambil masa untuk disebarkan kerana caching CDN. Selepas menerbitkan favicon baharu, yang lama mungkin muncul dalam penyemak imbas selama 24-48 jam. Buka tapak langsung anda dalam tetingkap peribadi/inkognito untuk melihat ikon dikemas kini tanpa gangguan cache penyemak imbas setempat. Jika khalayak anda menggunakan halaman bercache CDN, kelewatan penyebaran bergantung pada tetapan CDN TTL Webflow.

Untuk pengguna Editor Webflow (klien mengedit kandungan tanpa akses Pereka bentuk), favicon tidak boleh ditukar melalui Editor — ia dikunci dalam Tetapan Projek. Hanya kolaborator dengan akses Pereka bentuk atau pemilik akaun boleh mengemas kini favicon. Sampaikan perkara ini dengan jelas kepada pelanggan supaya mereka tahu tempat untuk meminta kemas kini favicon pada masa hadapan.

Selepas menerbitkan favicon Webflow anda, gunakan favicon tester untuk mengesahkan ia selesai di domain pengeluaran anda. Bandingkan hasil dengan saiz yang dijangkakan: 32×32 untuk tab, 180×180 untuk iOS jika anda menambah apple-touch-icon. Semak juga panduan best favicon size untuk memahami saiz yang meningkatkan skor kesempurnaan ikon tapak anda.