Cara Menambah a Shopify Favicon kepada Anda Shopify Kedai

Identiti kedai e-dagang anda menghimpunkan beberapa elemen seperti logo, warna laman web, dan elemen anda bahan-bahan pemasaran. Identiti ini mengukuhkan jenama anda secara keseluruhan dan mencipta peringatan yang sihat untuk pelanggan anda, membangkitkan perasaan selesa dan kebolehpercayaan apabila mereka melihat imej dan warna jenama anda.

Walaupun bersaiz kecil, Favicon juga terikat dengan strategi penjenamaan itu. Dalam tutorial ini, kami akan menunjukkan kepada anda cara membuat dan menambah favicon pada anda Shopify menyimpan, melengkapkan penampilan dalam talian anda dan mempermudah mengenali kedai anda semasa pelanggan berkunjung.

Apa itu Shopify Favicon?

A Shopify Favicon, atau Favicon apa pun, adalah ikon kecil untuk laman web anda yang muncul di tab penyemak imbas di sebelah nama laman web anda.

Bar alamat penyemak imbas adalah kawasan yang paling biasa untuk melihat laman web Favicon, tetapi juga terdapat di lokasi berikut:

• Aplikasi bar alat
• Penanda buku
• Hasil sejarah
• Cari bar
• Kadang kala apabila dikongsi di media sosial

Pada dasarnya, setiap kali penyemak imbas perlu menunjukkan pautan ke laman web anda, dan tidak ada banyak ruang untuk kandungan lain, ia menggantikan logo bersaiz biasa anda dengan Favicon.

Secara lalai, Shopify menambah Shopify logo untuk Favicon anda, jadi kami perlu mengubahnya.

Favicon yang bagus selalunya merupakan versi logo anda yang lebih kecil, tetapi kadang kala ia sedikit berbeza kerana anda ingin memastikannya kelihatan, mengambil semua ruang yang diperuntukkan, dan menambahkan sedikit warna di sebelah nama laman web anda.

Secara lalai, semua penyemak imbas menyokong Favicons bersaiz 32 × 32 piksel. Itu gambar yang agak kecil, tetapi dengan bantuan beberapa penjana dalam talian, anda boleh membuatnya sendiri Shopify Favicon untuk laman web anda. Juga, gambar yang lebih besar akan dikecilkan, jadi anda tidak semestinya harus mendapatkannya tepat hingga 32 × 32.

Favicon cukup masuk akal untuk kedai dalam talian Shopify kerana ia mudah ditambahkan, dan penting untuk memperkukuhkan identiti jenama anda sebagai penjual dalam talian. Ada juga yang berpendapat bahawa ia membantu SEO.

Teruskan membaca untuk mengetahui lebih lanjut mengenai cara menambahkan Favicon pada anda Shopify kedai.

Cara Menambah Favicon pada Anda Shopify Kedai – Panduan Langkah Pantas

Seperti yang disebutkan, semasa menjalankan laman web melalui Shopify secara automatik menambah a Shopify logo sebagai Favicon tapak anda. Tidak ada yang salah dengan itu, tetapi lebih profesional dan berorientasikan jenama untuk memasukkan logo anda sendiri. Berikut adalah langkah-langkah yang perlu anda ikuti:

Langkah 1: Pergi ke Anda Shopify Papan Pemuka

Oleh itu, pergi ke anda Shopify papan pemuka dan klik pada Kedai Dalam Talian di bawah Saluran Jualan.

Langkah 2: Navigasi ke Tetapan Tema

Navigasi ke Tema anda dan klik pada butang Sesuaikan di sebelah tema semasa anda. Walaupun tetapan berubah dari tema ke tema, semuanya paling baru Shopify tema mempunyai bahagian untuk menukar Favicon.

Dalam Shopify penyesuai, tatal ke bahagian bawah senarai di sebelah kiri dan klik pada Tetapan Tema.

Langkah 3: Pilih Butang Favicon

Di bahagian baru, cari dan pilih butang Favicon.

Ini menunjukkan butang untuk Pilih Gambar atau Terokai Imej Percuma. Saya tidak dapat membayangkan mereka mempunyai gambar percuma yang sesuai dengan logo anda, jadi sebaiknya klik Pilih Gambar untuk memuat naik gambar tersuai dari komputer anda.

Langkah 4: Muat Naik Favicon Anda

Pilih fail Favicon dan muat naik ke Shopify.

Selepas itu, anda akan melihat pratonton ikon Favicon anda. Untuk menjadikan perubahan kekal, pilih butang Simpan di Shopify.

Untuk melihat anda Shopify favicon dalam tindakan, pergi ke bahagian depan laman web anda dan lihat tab penyemak imbas semasa. Anda mesti melihat Favicon di sebelah tajuk laman web anda.

Petua Membuat Favicon Anda

Walaupun nampak mudah menghasilkan sedikit ikon, penting untuk memperbaikinya, memandangkan pelanggan melihat Favicon setiap kali mereka datang ke laman web anda. Juga mudah untuk membuat Favicon yang kabur atau tidak memenuhi seluruh ruang, mengalahkan tujuan Favicon kerana ia tidak dapat dilihat oleh mata.

Untuk menyelesaikan sebarang masalah, berikut adalah beberapa petua untuk membuat anda Shopify Favicon:

• Mulakan reka bentuk anda yang lebih besar daripada 32 × 32 dan kurangkan jika perlu. Anda pasti akan mempunyai gambar yang kabur jika anda cuba meregangkan gambar yang lebih kecil ke ruang tersebut. Sebagai contoh, mengambil gambar 32 × 32 dari Hatchful dan berusaha meregangkannya untuk menyingkirkan bahagian logo yang tertulis boleh menyebabkan masalah.
• Anda biasanya tidak boleh mengambil logo semasa anda dan mengharapkan ia berfungsi dengan sempurna sebagai Favicon.
• Favicon kelihatan hebat apabila anda menutup setiap piksel dari ruang yang disediakan. Anda tidak mempunyai banyak ruang, jadi anda harus memanfaatkan setiap square piksel dalam ruang 32 × 32.
• Keluarkan semua teks, kerana sukar dibaca di Favicon. Pengecualian adalah jika elemen logo utama anda adalah huruf besar.
• Tangkap untuk warna pepejal dan lebih terang. Logo kartun yang ringkas berfungsi dengan baik.
• Lihatlah Favicons dari jenama kegemaran anda. Apa yang telah mereka lakukan untuk memastikan imej dalam talian mereka melalui favicon?
• Pertimbangkan untuk mengisi seluruh ruang dengan latar belakang warna yang padat atau membuat latar yang telus dengan elemen latar depan yang diregangkan sehingga hanya menyentuh tepi. Anda akan melihat bahawa banyak jenama yang lebih besar mempunyai latar belakang yang jelas untuk Favicons mereka.
• Fail ICO format berfungsi dengan baik untuk imej yang lebih kecil. Jika anda tidak biasa, gunakan PNG untuk latar belakang lutsinar atau JPG untuk Favicon resolusi tinggi dengan latar belakang pepejal.

Bagaimana Menjana Favicon untuk Anda Shopify Kedai

Anda mempunyai pilihan untuk merancang Favicon dalam perisian reka bentuk pilihan anda. Sekiranya anda lebih suka Photoshop, ikutilah. Sekiranya anda lebih suka perisian percuma seperti GIMP atau Pixlr, semuanya berfungsi selagi anda berpegang pada dimensi 32 × 32 yang diperlukan.

Anda juga mempunyai pilihan untuk membuat Favicon dengan ShopifyLogo Hatchful dan Generator Favicon Percuma. Lihat keseluruhan panduan kami Semasa menggunakan Hebat untuk membina logo.

Sebaik sahaja pencipta logo melakukan kerjanya, ia memberikan anda fail yang diisi dengan berbilang logo formats, salah satunya ialah Favicon.

Perlu diingat bahawa banyak logo yang anda buat Hebat (baca kami Ulasan yang menarik) gunakan ruang putih di sekitar logo, jadi anda mungkin perlu menyesuaikannya agar grafik merangkumi sebahagian besar ruang. Secara umum, saya mendapati bahawa anda hanya boleh menggunakan favicon Hatchful yang disediakan sekiranya sudah kelihatan bagus (mengisi sebahagian besar ruang dan tidak mempunyai elemen kecil seperti teks).

Sekiranya tidak demikian, gunakan perisian penyuntingan pihak ketiga seperti Photoshop atau Pixlr untuk memotong beberapa elemen yang tidak perlu.

penting: Anda perlu menggunakan versi gambar yang lebih besar jika anda berencana meregangkannya di atas kanvas untuk memotong teks dan ruang kosong. Untuk ini, saya menggunakan Hatchful untuk menghasilkan logo tetapi sebenarnya mengambil salah satu logo besar (bukan fail Favicon yang disediakan) kerana saya tidak mahu kabur berlaku ketika saya meregangkannya di atas kanvas 32 × 32.

Di dalam perisian penyuntingan anda, pilih kanvas baru dengan Lebar dan Tinggi masing-masing ditetapkan pada 32.

Buat lapisan untuk gambar baru dan pastikan gambar lebih besar daripada kanvas 32 × 32, kerana anda mungkin meregangkannya. Kemudian muat naik atau letakkan gambar ke dalam kanvas.

Pada tangkapan skrin berikut, saya mempunyai reka bentuk Favicon yang diperbesar sehingga saya dapat memastikannya sesuai square dengan betul. Ia kabur, tetapi saya tahu ia akan kelihatan lebih baik apabila saya mengezum keluar.

Seperti yang anda lihat, versi Favicon yang diperbesar dalam pereka Pixlr kelihatan bagus. Saya telah merangkumi sebahagian besar ruang yang diperuntukkan, memilih ikon warna terang dan padat, dan membuang semua tanda teks yang lebih kecil.

Langkah terakhir adalah memuat turun fail. Anda boleh memilih untuk menjadikannya PNG telus pada ketika ini. Tetapi untuk tutorial ini, saya tetap menggunakan JPG resolusi tinggi sehingga kelihatan setajam mungkin. Dan saya tidak keberatan mempunyai latar belakang dengan warna yang padat.

Kembali kepada anda Shopify papan pemuka. Klik di Kedai Dalam Talian> Tema> Sesuaikan.

Kemudian pergi ke Tetapan Tema> Favicon.

Muat naik Favicon baru itu dan klik butang Simpan di Shopify editor.

Sekali lagi, cara utama untuk menguji dan melihat Favicon anda adalah dengan hanya membuka tab dengan URL laman web halaman utama anda. Seperti yang anda lihat, Favicon muncul dengan baik dan sebenarnya sedikit lebih baik daripada Favicon saya sebelumnya, kerana bagaimana ia tidak memenuhi keseluruhan ruang 32 × 32 yang disediakan.

Dalam Kesimpulan

A Shopify Favicon mengambil masa tidak lebih dari beberapa minit untuk mereka bentuk dan menambah laman web anda, namun ia memberikan peringatan yang indah kepada pengunjung anda di laman web mana mereka berada. Di samping itu, ia dapat berfungsi sebagai cara bagi orang untuk mencari laman web anda dalam penanda halaman dan sejarah penyemak imbas mereka, memandangkan kemungkinan besar mereka mencari melalui senarai panjang laman web lain ketika melalui bahagian tersebut.

Perlu diingat bahawa anda tidak boleh memutuskan untuk kabur atau tidak terbaca Shopify Gambar favicon. Sekiranya anda mendapati bahawa Favicon pertama tidak kelihatan betul, atau anda ingin memotong beberapa teks atau menambahkan latar belakang yang telus, kembali ke awal dan dapatkan yang betul. Walaupun bukan idea yang baik untuk tidak memiliki Favicon sama sekali, Favicon yang kabur atau sukar dilihat menjadikan jenama anda kelihatan tidak profesional dan agak bodoh.

Sekiranya anda mempunyai soalan mengenai menambah Favicons ke Shopify, atau membuat sendiri Shopify Favicon, beritahu kami di bahagian komen di bawah.