Tambahkan Favicon ke Ruang persegi

Tingkatkan estetika situs Anda. Pelajari cara mengonfigurasi favicon tab bersih di dalam pengaturan Squarespace.

Menambahkan favicon ke Squarespace hanya membutuhkan beberapa menit. Anda memerlukan gambar favicon yang sesuai, akses ke situs web Squarespace yang benar, dan kemampuan untuk membuka pengaturan faviconnya. Dalam panduan ini, Anda akan mempelajari cara menyiapkan favicon, mengunggahnya ke Squarespace, memverifikasi bahwa favicon berfungsi, mengganti atau menghapusnya, dan memecahkan masalah ketika ikon baru tidak segera muncul.

Apa itu Favicon Squarespace?

Favicon, juga disebut ikon browser, adalah gambar persegi kecil yang terkait dengan situs web Anda. Biasanya muncul di samping judul halaman Anda di tab browser dan bookmark. Tergantung pada browser atau perangkatnya, ini juga dapat muncul di antarmuka browser lain dan terkadang di hasil pencarian.

Setiap situs Squarespace dimulai dengan favicon kubus default Squarespace kecuali Anda menambahkan yang khusus. Menggantinya dengan ikon Anda sendiri memberi pengunjung pengenal visual yang dapat dikenali untuk situs web Anda.

Favicon terpisah dari logo situs web Anda. Logo Anda mungkin tampak menonjol di header situs Anda, sedangkan favicon dirancang agar tetap dapat dikenali dalam ukuran yang sangat kecil.

Apa yang Harus Anda Persiapkan Sebelum Menambahkan Favicon ke Squarespace?

Sebelum membuka Squarespace, siapkan gambar yang ingin dijadikan favicon. Panduan favicon Squarespace saat ini merekomendasikan hal berikut:

  • Gunakan PNG: Squarespace merekomendasikan file .png untuk favicon dan tidak mengizinkan file .ico untuk diunggah.
  • Gunakan gambar persegi: Kanvas persegi berfungsi paling baik karena favicon ditampilkan sebagai ikon persegi kecil.
  • Bidik 100 × 100 piksel hingga 300 × 300 piksel: Squarespace merekomendasikan rentang ini untuk gambar favicon. Meskipun favicon dapat ditampilkan dalam dimensi yang sangat kecil seperti 16 × 16 piksel, gambar sumber yang lebih besar dalam rentang ini berfungsi lebih baik di seluruh browser.
  • Simpan file di bawah 100 KB: Squarespace menyatakan bahwa file favicon tidak boleh melebihi 100 KB.
  • Gunakan desain sederhana: Favicon jauh lebih kecil dari logo biasa, sehingga ilustrasi rumit dan teks panjang menjadi tidak dapat dikenali.
  • Gunakan kontras yang kuat: Ikon harus tetap dapat dibedakan antara antarmuka browser terang dan gelap.
  • Hindari detail yang berlebihan: Garis-garis halus, huruf kecil, dan berbagai elemen visual sulit dikenali pada ukuran favicon.
  • Mulailah dengan sumber berkualitas tinggi: Memperkecil gambar yang bersih dan tajam umumnya memberikan hasil yang lebih baik daripada memperbesar gambar yang kecil.

Format file apa yang direkomendasikan Squarespace?

Khusus untuk favicon, Squarespace merekomendasikan PNG dan tidak mendukung pengunggahan file .ico melalui pengunggah faviconnya.

Jangan bingung antara dukungan unggahan gambar Squarespace secara umum dengan persyaratan khusus favicon. Squarespace mendukung beberapa format di area gambar lain, namun dokumentasi faviconnya secara khusus merekomendasikan PNG.

Bagaimana Cara Menambahkan Favicon ke Squarespace?

Proses Squarespace saat ini menggunakan panel Favicon khusus. Rute pasti ke panel tersebut dapat bervariasi tergantung pada antarmuka Squarespace yang Anda gunakan, jadi fokuslah untuk menemukan pengaturan favicon atau ikon browser situs daripada mengandalkan jalur menu lama.

  1. Masuk ke Squarespace: Buka Squarespace dan masuk ke akun yang mengelola situs web Anda. Pastikan Anda memiliki izin mengedit untuk situs yang faviconnya ingin Anda ubah.
  2. Buka situs web yang benar: Dari dashboard akun Squarespace Anda, buka situs web yang ingin Anda edit. Ini penting jika akun Anda mengelola beberapa situs web Squarespace. Mengunggah favicon ke satu situs tidak akan mengubah favicon di situs lain.
  3. Buka pengaturan favicon: Navigasikan melalui pengaturan situs atau kontrol desain hingga Anda mencapai panel Favicon. Dokumentasi bantuan Squarespace saat ini merujuk pada tujuan ini secara khusus sebagai panel Favicon. Tutorial lama mungkin menjelaskan pengaturan dengan label seperti Ikon Browser, atau menempatkannya di bawah area antarmuka yang berbeda. Jangan berasumsi jalur lama masih sama di akun Anda.
  4. Unggah favicon Anda: Di dalam panel Favicon, seret gambar favicon Anda ke pengunggah, atau klik pengunggah untuk memilih file dari komputer Anda. Pilih favicon PNG yang Anda siapkan. Tunggu hingga unggahan selesai. Periksa apakah gambar yang diunggah muncul di area favicon. Squarespace saat ini mendukung favicon alternatif opsional untuk mode gelap. Favicon default harus ditambahkan sebelum Anda dapat menambahkan versi mode gelap.
  5. Simpan perubahan: Klik Simpan setelah gambar diunggah. Menyimpan itu penting karena mengunggah atau memilih gambar saja tidak menggantikan favicon yang dipublikasikan sampai perubahan disimpan. Instruksi Squarespace saat ini secara khusus mengarahkan pengguna untuk mengklik Simpan setelah gambar diunggah.
  6. Buka situs web Anda dan periksa tab browser: Buka URL situs Anda yang dipublikasikan di browser. Lihat tab browser di sebelah judul halaman. Favicon baru Anda harus menggantikan ikon Squarespace default.

Jika masih melihat favicon sebelumnya, jangan langsung menganggap upload gagal. Browser dapat menyimpan favicon secara agresif, sehingga ikon lama mungkin terus muncul bahkan setelah favicon baru berhasil disimpan.

Dimanakah Setting Favicon di Squarespace?

Antarmukanya telah berubah seiring waktu, itulah sebabnya tutorial Squarespace yang berbeda dapat menampilkan jalur navigasi yang berbeda. Dokumentasi Squarespace saat ini mengidentifikasi tujuan sebagai panel Favicon.

Anda mungkin menemukan instruksi lama yang mengacu pada:

  • Ikon Peramban
  • Logo & Judul
  • Desain
  • Pengaturan ikon browser dalam kontrol desain atau branding situs

Label-label ini tidak boleh dianggap berlaku secara universal. Squarespace dapat mengubah lokasi atau penamaan kontrol antara antarmuka dan versi platform. Pengaturan yang penting adalah yang khusus ditujukan untuk favicon situs atau ikon browser. Pengaturannya tidak sama dengan logo situs atau judul halaman Anda.

Bagaimana Cara Membuat Favicon untuk Squarespace?

Anda tidak perlu mendesain favicon dari awal. Pendekatan paling sederhana bergantung pada aset merek yang sudah Anda miliki.

Buat favicon dari logo Anda

Jika Anda sudah memiliki logo, buatlah versi persegi yang disederhanakan. Jangan otomatis menggunakan seluruh logo horizontal. Nama bisnis yang panjang mungkin menjadi tidak terbaca jika direduksi menjadi dimensi favicon. Pendekatan yang lebih baik sering kali adalah dengan menggunakan simbol yang dapat dikenali dari logo, inisial tunggal, monogram, atau tanda merek yang disederhanakan.

Buat favicon dari teks atau inisial

Untuk favicon berbasis teks, gunakan satu atau dua huruf yang menonjol, bukan nama bisnis secara keseluruhan. Misalnya, sebuah perusahaan bernama Digital Marketing Solutions dapat menggunakan DM daripada mencoba memasukkan nama lengkap ke dalam ikonnya. Gunakan jenis huruf yang tebal dan sederhana serta kontras yang cukup agar huruf tetap dapat dikenali.

Ubah PNG yang ada menjadi favicon

Jika Anda sudah memiliki logo atau ikon PNG yang sesuai, Anda dapat mengubahnya menjadi karya seni siap pakai favicon menggunakan alat konversi gambar. Misalnya, PNGtoFavicon.com dapat mengubah gambar PNG menjadi favicon. Ini berguna ketika Anda sudah memiliki PNG persegi tetapi memerlukan file berorientasi favicon untuk situs web Anda.

Sebelum mengunggah hasilnya ke Squarespace, periksa apakah gambar akhir memenuhi persyaratan favicon Squarespace, khususnya format PNG, dimensi persegi, dan ukuran file maksimum 100 KB.

Jaga agar desain tetap dapat dikenali pada ukuran kecil

Tes desain yang paling penting adalah sederhana: perkecil ikon secara signifikan dan lihatlah tanpa memperbesarnya. Jika Anda tidak dapat mengidentifikasi simbol atau huruf dengan cepat, sederhanakan. Favicon biasanya berfungsi lebih baik sebagai tanda visual tebal dibandingkan sebagai versi miniatur keseluruhan logo Anda.

Bagaimana Anda Memeriksa apakah Favicon Squarespace Anda Berfungsi?

Setelah menyimpan favicon, verifikasi di situs web sebenarnya yang dipublikasikan.

  • Periksa tab browser: Buka situs web Anda dan lihat ikon di samping judul halaman di tab browser. Ini adalah pengujian paling langsung karena tab browser adalah salah satu tempat utama munculnya favicon.
  • Uji sesi browser baru: Jika ikon lama tetap terlihat, buka jendela pribadi atau penyamaran, kunjungi situs web Anda, dan periksa kembali tab browser. Ini membantu menentukan apakah masalah disebabkan oleh data favicon yang disimpan dalam cache di sesi browser normal Anda.
  • Periksa browser desktop lain: Uji situs di browser lain seperti Chrome, Edge, Firefox, atau Safari. Favicon yang ditampilkan dengan benar di satu browser tetapi tidak di browser lain dapat menunjukkan perilaku cache atau tampilan khusus browser, bukan masalah unggahan Squarespace. Safari dapat menampilkan favicon secara berbeda dari browser lain. Squarespace mencatat bahwa Safari mungkin menampilkan favicon saat Anda mengklik bilah alamat atau saat beberapa tab terbuka, dan Safari dapat menambahkan batas atau latar belakang untuk kontras.
  • Periksa di ponsel: Jangan menganggap tidak adanya favicon di browser seluler sebagai bukti kegagalan pengunggahan. Squarespace menyatakan bahwa tampilan favicon di seluler bergantung pada browser seluler, dan dalam beberapa kasus favicon tidak akan ditampilkan sama sekali.

Mengapa Favicon Squarespace Saya Tidak Muncul?

Favicon yang tidak segera muncul biasanya disebabkan oleh masalah caching atau konfigurasi, bukan alasan untuk membangun kembali seluruh situs web.

Tembolok peramban

Masalah: Browser Anda masih menampilkan favicon lama.
Memperbaiki: Kosongkan cache browser, tutup dan buka kembali browser, lalu kunjungi kembali situs Anda. Squarespace secara khusus merekomendasikan untuk membersihkan cache browser dan memulai ulang browser ketika favicon tidak segera diperbarui.

Favicon tidak disimpan

Masalah: Gambar telah diunggah tetapi perubahannya tidak disimpan.
Memperbaiki: Kembali ke panel Favicon, konfirmasikan gambar yang benar ada, dan klik Simpan.

Anda mengedit situs web yang salah

Masalah: Favicon terlihat tidak berubah karena gambar diunggah ke situs Squarespace lain di akun Anda.
Memperbaiki: Konfirmasikan nama website dan domain sebelum mengubah favicon.

Gambar tidak memenuhi persyaratan favicon

Masalah: File terlalu besar, menggunakan format yang tidak sesuai, atau memiliki dimensi yang memberikan hasil buruk.
Memperbaiki: Ekspor ulang gambar sebagai PNG, simpan di bawah 100 KB, dan gunakan gambar persegi antara 100 × 100 px dan 300 × 300 px seperti yang direkomendasikan Squarespace.

Favicon telah diubah baru-baru ini

Masalah: Squarespace telah menyimpan favicon baru, tetapi browser Anda masih menampilkan versi yang lebih lama.
Memperbaiki: Uji di jendela penyamaran/pribadi atau browser lain sebelum melakukan perubahan tambahan.

Anda menguji domain atau halaman yang salah

Masalah: Anda memeriksa pementasan, pratinjau, domain Squarespace bawaan, atau domain berbeda dari yang Anda edit.
Memperbaiki: Buka URL situs web terbitan yang terkait dengan situs Squarespace yang Anda ubah.

Perilaku browser seluler

Masalah: Favicon muncul di desktop tetapi tidak di ponsel Anda.
Memperbaiki: Periksa situs yang sama di browser desktop sebelum menganggap unggahan gagal. Perilaku favicon seluler berbeda-beda menurut browser, dan Squarespace mencatat bahwa browser seluler mungkin tidak menampilkan favicon sama sekali.

Berapa Lama Waktu yang Dibutuhkan untuk Memperbarui Favicon Squarespace?

Ada tiga peristiwa terpisah yang perlu dibedakan:

  1. Squarespace menyimpan favicon: Ini terjadi ketika Anda mengunggah gambar dan menyimpan pengaturan favicon.
  2. Situs web Anda menyajikan favicon baru: Konfigurasi situs yang disimpan harus memberikan ikon yang diperbarui kepada pengunjung.
  3. Browser Anda menampilkan favicon baru: Browser dapat terus menggunakan favicon yang di-cache sebelumnya.

Karena browser dapat menyimpan data favicon, tidak ada waktu pembaruan universal yang dapat menjamin ikon baru akan segera muncul. Squarespace secara khusus memperingatkan bahwa browser mungkin gigih terhadap favicon yang di-cache. Uji jendela browser pribadi atau browser lain sebelum menyimpulkan bahwa perubahan gagal.

Bagaimana Anda Mengubah atau Mengganti Favicon Squarespace?

Mengganti favicon yang ada pada dasarnya mengikuti proses yang sama seperti menambahkan favicon untuk pertama kalinya.

  • Masuk ke Squarespace.
  • Buka situs web yang ingin Anda ubah.
  • Buka panel Favicon.
  • Pilih pengunggah favicon yang ada.
  • Unggah gambar PNG baru. (Jika Anda menggunakan favicon mode gelap, perbarui versi tersebut secara terpisah sesuai kebutuhan.)
  • Klik Simpan.
  • Buka situs web yang diterbitkan dan periksa tab browser. Uji di jendela pribadi apakah favicon sebelumnya terus muncul.

Squarespace mengizinkan favicon mode gelap opsional, tetapi favicon default harus ada sebelum versi mode gelap alternatif dapat ditambahkan.

Bagaimana Cara Menghapus Favicon Squarespace?

Jika Anda ingin berhenti menggunakan favicon khusus Anda, buka pengaturan favicon dan cari kontrol penghapusan atau penghapusan yang tersedia di sebelah gambar yang diunggah. Kontrol sebenarnya dapat bervariasi tergantung antarmuka Squarespace saat ini, jadi jangan bergantung pada tutorial lama yang menentukan nama tombol tertentu.

Setelah menghapus favicon khusus, simpan pengaturan dan uji situs web lagi. Squarespace menyatakan bahwa situs tanpa favicon khusus dimulai dengan favicon kubus defaultnya.

Kesalahan Umum Favicon Squarespace yang Harus Dihindari

  • Menggunakan gambar yang rumit: Sederhanakan desainnya sehingga ikon tetap dapat dikenali dalam ukuran kecil.
  • Menggunakan gambar sumber kecil: Mulailah dengan sumber yang bersih dan berukuran memadai daripada memperbesar gambar beresolusi rendah.
  • Kontras yang buruk: Ikon yang menyatu dengan latar belakang browser mungkin tampak tidak terlihat.
  • Menggunakan terlalu banyak teks: Nama bisnis lengkap jarang terbaca di favicon.
  • Mengunggah jenis file yang salah: Squarespace merekomendasikan PNG untuk favicon dan tidak mengizinkan pengunggahan .icon.
  • Melebihi batas ukuran file: File Favicon tidak boleh melebihi 100 KB.
  • Lupa menyimpan: Selalu simpan setelah gambar selesai diunggah.
  • Memeriksa hanya satu browser: Gunakan browser lain atau jendela pribadi saat pengujian.
  • Dengan asumsi ikon cache berarti unggahan gagal: Hapus cache sebelum melakukan perubahan yang tidak perlu.
  • Mengharapkan browser seluler berperilaku seperti browser desktop: Dukungan dan tampilan favicon seluler berbeda-beda menurut browser.

FAQ Favicon Squarespace

Bisakah saya menambahkan favicon PNG ke Squarespace?

Ya. Squarespace merekomendasikan PNG untuk unggahan favicon. Dokumentasi favicon Squarespace saat ini juga menyatakan bahwa file .icon tidak dapat diunggah melalui pengaturan favicon.

Berapa ukuran favicon Squarespace?

Squarespace merekomendasikan untuk mengunggah favicon antara 100 × 100 px dan 300 × 300 px. Dinyatakan juga bahwa file favicon tidak boleh lebih besar dari 100 KB.

Mengapa favicon Squarespace saya tidak muncul?

Penjelasan paling umum adalah cache browser. Hapus cache browser Anda, mulai ulang browser, atau uji situs di jendela pribadi atau browser lain. Konfirmasikan juga bahwa Anda menyimpan favicon dan sedang memeriksa situs web yang dipublikasikan dengan benar.

Bisakah saya mengubah favicon Squarespace saya?

Ya. Buka panel Favicon, unggah gambar pengganti, dan simpan perubahannya.

Apakah Squarespace secara otomatis mengubah ukuran favicon?

Dokumentasi Squarespace saat ini merekomendasikan untuk mengunggah karya seni favicon antara 100 × 100 px dan 300 × 300 px, sambil memperhatikan bahwa favicon ditampilkan dalam ukuran yang sangat kecil seperti 16 × 16 px. Pendekatan paling aman adalah menyiapkan gambar pada ukuran persegi yang sesuai daripada mengandalkan file sumber yang kecil.

Bagaimana cara membuat favicon untuk Squarespace?

Buat ikon persegi sederhana dari logo, inisial, atau simbol merek yang dapat dikenali. Ekspor sebagai PNG, simpan di bawah 100 KB, dan gunakan dimensi antara 100 × 100 px dan 300 × 300 px. Alat konversi seperti PNGtoFavicon.com dapat membantu mengubah PNG yang ada menjadi karya seni yang siap untuk favicon.

Berapa lama waktu yang dibutuhkan untuk memperbarui favicon Squarespace?

Tidak ada waktu universal yang dapat diandalkan untuk memperbarui tampilan browser. Squarespace dapat segera menyimpan perubahan, namun browser mungkin terus menampilkan versi cache dari favicon sebelumnya. Hapus cache atau uji di jendela pribadi saat memverifikasi pembaruan.

Bisakah saya menggunakan logo saya sebagai favicon Squarespace?

Ya. Sebuah logo dapat digunakan sebagai favicon, namun logo tersebut harus disederhanakan bila diperlukan sehingga tetap dapat dikenali dalam dimensi kecil. Squarespace juga mencatat bahwa alat Logo Squarespace miliknya dapat membuat logo PNG yang dapat digunakan sebagai favicon.

Kesimpulan

Untuk menambahkan favicon ke Squarespace, siapkan PNG persegi sederhana, buka panel Favicon situs, unggah gambar, dan simpan perubahannya. Kemudian verifikasi di tab browser. Poin pemecahan masalah yang paling penting adalah caching. Unggahan favicon yang berhasil mungkin tidak langsung muncul karena browser masih dapat mempertahankan favicon sebelumnya. Uji di jendela pribadi, kosongkan cache, atau periksa browser lain sebelum berasumsi bahwa unggahan Squarespace gagal.