Favicon untuk Shopify
Shopify membolehkan anda memuat naik favicon daripada editor tema dalam beberapa saat. Setiap tema Shopify moden mendedahkan medan Favicon di bawah Tetapan Tema dan CDN Shopify menyajikan ikon di setiap halaman etalase anda. Gunakan favicon generator untuk membuat segi empat sama 512×512 PNG dahulu — Shopify akan mengubah saiznya kepada saiz paparan 32×32 yang diperlukan secara automatik.
Favicon ialah salah satu isyarat jenama pertama yang dilihat bakal pelanggan apabila mereka membuka berbilang tab. Pada kedai Shopify, favicon muncul dalam tab penyemak imbas, bar penanda halaman dan bar alamat. Favicon yang jelas dan boleh dikenali mengukuhkan kepercayaan jenama dan membantu pembeli mencari tab kedai anda dengan cepat di kalangan berdozen tab terbuka.
Setiap tema Shopify moden (Dawn, Refresh dan kebanyakan tema premium) termasuk medan Favicon dalam Theme Editor di bawah Tetapan Tema. Untuk mengaksesnya, log masuk ke pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema dan klik Sesuaikan di sebelah tema langsung anda. Di bar sisi kiri, klik Tetapan Tema (atau ikon gear), kemudian cari bahagian Favicon.
Shopify mengesyorkan memuat naik segi empat sama PNG pada 32×32 piksel untuk medan favicon. Dalam amalan, memuat naik 512×512 PNG menghasilkan hasil yang lebih tajam kerana Shopify menurunkan sampelnya kepada 32×32 dengan kualiti yang lebih baik berbanding jika anda bermula daripada yang asal 32×32. Sentiasa bermula dari sumber persegi terbesar yang anda miliki — penjana memudahkan ini.
Selepas memuat naik favicon anda, klik Simpan di penjuru kanan sebelah atas Theme Editor. Shopify memproses imej, memuat naiknya ke CDNnya dan menyebarkannya ke setiap halaman etalase dalam beberapa minit. Anda tidak perlu menerbitkan semula tema anda atau membuat sebarang perubahan kod lain.
Tema Shopify yang lebih lama atau sangat disesuaikan mungkin tidak mendedahkan medan Favicon dalam Tetapan Tema. Dalam kes itu, anda perlu mengedit kod Cecair tema secara langsung. Buka editor fail tema (Kedai Dalam Talian > Tema > Edit Kod), cari fail theme.liquid dan cari bahagian `<head>`. Masukkan `<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>` selepas memuat naik favicon.png anda ke folder Aset tema.
Untuk kedai Shopify pada rangka kerja tema 2.0, favicon diurus melalui site.webmanifest yang Shopify hasilkan secara automatik daripada tetapan tema anda. Jika kedai anda menggunakan cangkerang Apl Web Progresif, manifes Shopify menyertakan favicon sebagai ikon apl. Mengemas kini favicon tema secara automatik mengemas kini ikon manifes — tiada pengeditan JSON tambahan diperlukan.
Latar belakang lutsinar berfungsi dengan betul dalam favicon Shopify. Editor tema mengekalkan saluran alfa PNG apabila memuat naik ke CDN. Walau bagaimanapun, jika logo anda mempunyai latar belakang putih, ia akan muncul dengan kotak putih dalam tab penyemak imbas mod gelap. Eksport logo anda tanpa isian latar belakang sebelum memuat naik untuk mengelakkan ini.
Jika anda menjalankan berbilang kedai Shopify (persediaan biasa untuk etalase antarabangsa), setiap kedai mesti mempunyai favicon ditetapkan secara berasingan. Favicon ialah tetapan setiap kedai, bukan tetapan Rakan Kongsi Shopify atau peringkat organisasi. Log masuk ke setiap pentadbir kedai dan ulangi langkah Theme Editor.
Ketidaksahihan cache boleh menangguhkan kemas kini favicon dalam Shopify. CDN Shopify menyimpan cache aset dengan TTL yang panjang. Selepas menukar favicon, penyemak imbas boleh terus menunjukkan yang lama selama berjam-jam. Buka tetingkap peribadi/inkognito untuk melihat ikon yang dikemas kini tanpa gangguan cache. Sebagai alternatif, arahkan penyemak imbas anda untuk muat semula keras (Ctrl+Shift+R pada Windows, Cmd+Shift+R pada Mac).
Shopify tidak menyuntik teg pautan manifes apple-touch-icon atau apl web secara asal melainkan templat tema anda menyertakannya. Jika anda mahu pemasangan skrin utama iOS menunjukkan logo anda dan bukannya tangkapan skrin halaman, tambahkan teg apple-touch-icon secara manual melalui Kedai Dalam Talian > Tema > Edit Kod > theme.liquid. Letakkan `<link rel='apple-touch-icon' sizes='180x180' href='{{ 'apple-touch-icon.png' | asset_url }}'>` dalam bahagian `<head>` dan muat naik 180×180 PNG ke Aset.
Untuk kedai Shopify Plus, anda boleh menggunakan penjenamaan daftar keluar untuk menyesuaikan favicon dalam aliran pembayaran secara berasingan daripada favicon depan kedai utama. Penjenamaan Checkout dikonfigurasikan di bawah Tetapan > Checkout dan akaun > Sesuaikan. Ini membolehkan halaman daftar keluar anda menunjukkan favicon berbeza daripada kedai utama, yang berguna untuk persediaan berbilang jenama.
Untuk mengesahkan favicon Shopify anda berfungsi, gunakan live favicon tester dan masukkan URL kedai anda. Penguji mengesahkan ikon boleh diakses secara umum dan menunjukkan kepada anda cara ikon tersebut dipaparkan pada 16, 32 dan 48 piksel. Semak juga best favicon size untuk memahami saiz tambahan yang akan meningkatkan pengalaman pemasangan PWA anda.
Kesilapan favicon biasa Shopify termasuk memuat naik logo segi empat tepat tanpa memangkasnya ke segi empat sama terlebih dahulu (menghasilkan ikon squished), memuat naik imej yang sangat kecil (kabur pada paparan retina) dan terlupa untuk mengklik Simpan selepas memuat naik (perubahan tidak dilakukan sehingga anda menyimpan secara eksplisit). favicon generator mengeksport segi empat sama PNG dengan betul pada 512×512 sedia untuk muat naik langsung Shopify.
Cara ia berfungsi
- 1
Hasilkan 512×512 persegi PNG
Gunakan [favicon generator](tool:favicon-generator) dengan logo atau tanda jenama anda. Eksport 512×512 PNG daripada pakej muat turun — ini ialah saiz input yang betul untuk Shopify.
- 2
Buka tema anda dalam Theme Editor
Dalam pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema dan klik Sesuaikan di sebelah tema langsung anda.
- 3
Navigasi ke Tetapan Tema > Favicon
Di bar sisi kiri, klik Tetapan Tema (ikon gear di bahagian bawah pada kebanyakan tema) dan cari bahagian Favicon atau Jenama. Label yang tepat berbeza mengikut tema.
- 4
Muat naik PNG anda dan simpan
Klik medan muat naik favicon, pilih 512×512 PNG anda dan sahkan. Klik Simpan di penjuru kanan sebelah atas. Shopify memuat naik ikon ke CDNnya dan menyebarkannya ke semua halaman.
- 5
Sahkan dalam tetingkap inkognito
Buka tetingkap penyemak imbas peribadi/inkognito dan navigasi ke URL kedai anda. Sahkan favicon baharu muncul dalam tab penyemak imbas. Gunakan [favicon tester](utility:favicon-tester) untuk pemeriksaan luaran yang pantas.
Cuba sekarang
Hasilkan favicon sedia Shopify
Penjana FaviconSoalan lazim
Di manakah saya boleh menambah favicon dalam Shopify?+
Kedai Dalam Talian > Tema > Sesuaikan > Tetapan Tema > Favicon. Muat naik segi empat sama PNG (512×512 disyorkan), klik Simpan dan Shopify menyuntik ikon pada setiap halaman etalase secara automatik.
Apakah saiz favicon yang digunakan oleh Shopify?+
Shopify memaparkan favicon pada 32×32 piksel dalam tab penyemak imbas. Muat naik 512×512 untuk hasil paling tajam — Shopify menurunkan sampel kepada 32×32. Jangan sekali-kali memuat naik sumber yang lebih kecil daripada 32×32 atau ia akan kelihatan kabur.
Mengapakah favicon Shopify saya kelihatan kabur atau terbentang?+
Anda mungkin memuat naik imej bukan segi empat sama atau sumber yang sangat kecil. Pangkas logo anda ke segi empat sama sempurna sebelum memuat naik, dan mulakan daripada sekurang-kurangnya 256×256 piksel. [favicon generator](tool:favicon-generator) secara automatik menghasilkan segi empat sama 512×512 PNG sedia untuk Shopify.
Mengapakah favicon Shopify baharu saya tidak dipaparkan?+
Pelayar dan cache CDN menangguhkan kemas kini. Buka tetingkap inkognito/peribadi dan navigasi ke URL kedai anda untuk melihat favicon yang dikemas kini tanpa gangguan cache. Jika ia masih menunjukkan ikon lama dalam penyemakan imbas biasa, tunggu beberapa jam untuk cache CDN tamat tempoh.
Bolehkah saya menambah apple-touch-icon pada kedai Shopify saya?+
Ya, tetapi ia memerlukan penyuntingan kod manual. Muat naik 180×180 apple-touch-icon.png ke folder Aset tema anda, kemudian tambahkan `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | asset_url }}'>` dalam theme.liquid dalam bahagian `<head>`.
Adakah Shopify menyokong favicon SVG?+
Muat naik favicon Theme Editor terbina dalam tidak menerima SVG. Untuk menggunakan favicon SVG, tambahkan teg pautan secara manual dalam theme.liquid: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | asset_url }}'>` selepas memuat naik SVG ke folder Aset.
Adakah saya memerlukan pembangun untuk menukar favicon Shopify saya?+
Tidak. Menggunakan Theme Editor (Kedai Dalam Talian > Tema > Sesuaikan > Tetapan Tema > Favicon), anda boleh memuat naik dan menyimpan favicon baharu dalam masa kurang daripada dua minit tanpa kod. Akses pembangun hanya diperlukan untuk tambahan SVG atau apple-touch-icon.