Favicon untuk Shopify
Shopify memungkinkan Anda mengunggah favicon dari editor tema dalam hitungan detik. Setiap tema Shopify modern menampilkan bidang Favicon di bawah Pengaturan Tema, dan CDN Shopify menyajikan ikon di setiap halaman etalase Anda. Gunakan favicon generator untuk membuat persegi 512×512 PNG terlebih dahulu — Shopify akan mengubah ukurannya ke ukuran tampilan 32×32 yang diperlukan secara otomatis.
Favicon adalah salah satu sinyal merek pertama yang dilihat calon pelanggan saat mereka membuka banyak tab. Di toko Shopify, favicon muncul di tab browser, bilah bookmark, dan bilah alamat. Favicon yang tajam dan dapat dikenali memperkuat kepercayaan merek dan membantu pembeli menemukan tab toko Anda dengan cepat di antara lusinan tab yang terbuka.
Setiap tema Shopify modern (Dawn, Refresh, dan sebagian besar tema premium) menyertakan bidang Favicon di Theme Editor di bawah Pengaturan Tema. Untuk mengaksesnya, login ke admin Shopify Anda, buka Toko Online > Tema, dan klik Kustomisasi di samping tema langsung Anda. Di sidebar kiri, klik Pengaturan Tema (atau ikon roda gigi), lalu cari bagian Favicon.
Shopify merekomendasikan untuk mengunggah kotak PNG berukuran 32×32 piksel untuk bidang favicon. Dalam praktiknya, mengunggah 512×512 PNG menghasilkan hasil yang lebih tajam karena Shopify menurunkan sampelnya menjadi 32×32 dengan kualitas yang lebih baik dibandingkan jika Anda memulai dari yang asli 32×32. Selalu mulai dari sumber persegi terbesar yang Anda miliki — generator membuatnya mudah.
Setelah mengunggah favicon Anda, klik Simpan di pojok kanan atas Theme Editor. Shopify memproses gambar, mengunggahnya ke CDN, dan menyebarkannya ke setiap halaman etalase dalam hitungan menit. Anda tidak perlu memublikasikan ulang tema Anda atau membuat perubahan kode lainnya.
Tema Shopify yang lebih lama atau sangat disesuaikan mungkin tidak menampilkan bidang Favicon di Pengaturan Tema. Dalam hal ini, Anda perlu mengedit kode Liquid tema secara langsung. Buka editor file tema (Toko Online > Tema > Edit Kode), cari file theme.liquid, dan cari bagian `<head>`. Masukkan `<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>` setelah mengunggah favicon.png Anda ke folder Aset tema.
Untuk toko Shopify pada kerangka tema 2.0, favicon dikelola melalui site.webmanifest yang dihasilkan Shopify secara otomatis dari pengaturan tema Anda. Jika toko Anda menggunakan shell Aplikasi Web Progresif, manifes Shopify menyertakan favicon sebagai ikon aplikasi. Memperbarui favicon tema secara otomatis memperbarui ikon manifes — tidak diperlukan pengeditan JSON tambahan.
Latar belakang transparan berfungsi dengan benar di favicon Shopify. Editor tema mempertahankan saluran alfa PNG saat mengunggah ke CDN. Namun, jika logo Anda berlatar belakang putih, logo tersebut akan muncul dengan kotak putih di tab browser mode gelap. Ekspor logo Anda tanpa isian latar belakang sebelum mengunggah untuk menghindari hal ini.
Jika Anda menjalankan beberapa toko Shopify (penyiapan umum untuk etalase internasional), setiap toko harus menyetel faviconnya secara terpisah. Favicon adalah setelan per toko, bukan setelan tingkat Mitra atau organisasi Shopify. Masuk ke admin masing-masing toko dan ulangi langkah Theme Editor.
Pembatalan cache dapat menunda pembaruan favicon di Shopify. CDN Shopify menyimpan cache aset dengan TTL yang panjang. Setelah mengubah favicon, browser mungkin terus menampilkan favicon lama selama berjam-jam. Buka jendela pribadi/penyamaran untuk melihat ikon yang diperbarui tanpa gangguan cache. Alternatifnya, perintahkan browser Anda untuk melakukan hard-refresh (Ctrl+Shift+R di Windows, Cmd+Shift+R di Mac).
Shopify tidak secara asli memasukkan apple-touch-icon atau tag tautan manifes aplikasi web kecuali templat tema Anda menyertakannya. Jika Anda ingin pemasangan layar utama iOS menampilkan logo Anda dan bukan tangkapan layar halaman, tambahkan tag apple-touch-icon secara manual melalui Toko Online > Tema > Edit Kode > theme.liquid. Tempatkan `<link rel='apple-touch-icon' size='180x180' href='{{ 'apple-touch-icon.png' | aset_url }}'>` di bagian `<head>` dan unggah 180×180 PNG ke Aset.
Untuk toko Shopify Plus, Anda dapat menggunakan merek checkout untuk menyesuaikan favicon dalam alur checkout secara terpisah dari favicon etalase utama. Pencitraan merek Checkout dikonfigurasikan pada Pengaturan > Checkout dan akun > Sesuaikan. Hal ini memungkinkan halaman checkout Anda menampilkan favicon yang berbeda dari toko utama, yang berguna untuk pengaturan multi-merek.
Untuk memverifikasi favicon Shopify Anda berfungsi, gunakan live favicon tester dan masukkan URL toko Anda. Penguji mengonfirmasi bahwa ikon tersebut dapat diakses publik dan menunjukkan kepada Anda bagaimana ikon ditampilkan pada 16, 32, dan 48 piksel. Periksa juga best favicon size untuk memahami ukuran tambahan mana yang akan meningkatkan pengalaman pemasangan PWA Anda.
Kesalahan favicon Shopify yang umum termasuk mengunggah logo persegi panjang tanpa memotongnya menjadi persegi terlebih dahulu (menghasilkan ikon yang terjepit), mengunggah gambar yang sangat kecil (buram pada tampilan retina), dan lupa mengklik Simpan setelah mengunggah (perubahan tidak dilakukan sampai Anda menyimpannya secara eksplisit). favicon generator mengekspor PNG persegi dengan benar pada 512×512 yang siap untuk diunggah langsung Shopify.
Cara kerjanya
- 1
Hasilkan persegi 512×512 PNG
Gunakan [favicon generator](tool:favicon-generator) dengan logo atau merek Anda. Ekspor 512×512 PNG dari paket unduhan — ini adalah ukuran masukan yang benar untuk Shopify.
- 2
Buka tema Anda di Theme Editor
Di admin Shopify Anda, buka Toko Online > Tema dan klik Sesuaikan di samping tema aktif Anda.
- 3
Navigasi ke Pengaturan Tema > Favicon
Di sidebar kiri, klik Pengaturan Tema (ikon roda gigi di bagian bawah pada sebagian besar tema) dan cari bagian Favicon atau Merek. Label pastinya bervariasi berdasarkan tema.
- 4
Unggah PNG Anda dan simpan
Klik kolom unggah favicon, pilih 512×512 PNG Anda, dan konfirmasi. Klik Simpan di pojok kanan atas. Shopify mengunggah ikon ke CDN-nya dan menyebarkannya ke seluruh halaman.
- 5
Verifikasi di jendela penyamaran
Buka jendela browser pribadi/penyamaran dan navigasikan ke URL toko Anda. Konfirmasikan favicon baru muncul di tab browser. Gunakan [favicon tester](utility:favicon-tester) untuk pemeriksaan eksternal cepat.
Coba sekarang
Hasilkan favicon siap Shopify
Pembuat FaviconFAQ
Di mana saya menambahkan favicon di Shopify?+
Toko Online > Tema > Sesuaikan > Pengaturan Tema > Favicon. Unggah kotak PNG (direkomendasikan 512×512), klik Simpan, dan Shopify memasukkan ikon ke setiap halaman etalase secara otomatis.
Berapa ukuran favicon yang digunakan Shopify?+
Shopify menampilkan favicon pada 32x32 piksel di tab browser. Unggah 512×512 untuk hasil paling tajam — turunkan sampel Shopify ke 32×32. Jangan pernah mengunggah sumber yang lebih kecil dari 32×32 karena akan tampak buram.
Mengapa favicon Shopify saya terlihat buram atau melebar?+
Anda mungkin mengunggah gambar non-persegi atau sumber yang sangat kecil. Pangkas logo Anda menjadi persegi sempurna sebelum diunggah, dan mulai dari setidaknya 256x256 piksel. [favicon generator](tool:favicon-generator) secara otomatis menghasilkan persegi 512×512 PNG yang siap untuk Shopify.
Mengapa favicon Shopify saya yang baru tidak muncul?+
Browser dan cache CDN menunda pembaruan. Buka jendela penyamaran/pribadi dan navigasikan ke URL toko Anda untuk melihat favicon yang diperbarui tanpa gangguan cache. Jika masih menampilkan ikon lama dalam penjelajahan normal, tunggu beberapa jam hingga cache CDN kedaluwarsa.
Bisakah saya menambahkan apple-touch-icon ke toko Shopify saya?+
Ya, tetapi memerlukan pengeditan kode manual. Unggah 180×180 apple-touch-icon.png ke folder Aset tema Anda, lalu tambahkan `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | aset_url }}'>` di theme.liquid di dalam bagian `<head>`.
Apakah Shopify mendukung favicon SVG?+
Unggahan favicon Theme Editor bawaan tidak menerima SVG. Untuk menggunakan favicon SVG, tambahkan tag tautan secara manual di theme.liquid: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | aset_url }}'>` setelah mengunggah SVG ke folder Aset.
Apakah saya memerlukan pengembang untuk mengubah favicon Shopify saya?+
Tidak. Dengan menggunakan Theme Editor (Toko Online > Tema > Sesuaikan > Pengaturan Tema > Favicon), Anda dapat mengunggah dan menyimpan favicon baru dalam waktu kurang dari dua menit tanpa kode. Akses pengembang hanya diperlukan untuk penambahan SVG atau apple-touch-icon.