Πώς να προσθέσετε ένα Shopify Favicon στο δικό σας Shopify κατάστημα

Μάθετε τα βασικά του τι είναι Shopify Favicon και πώς να το τοποθετήσετε στο ηλεκτρονικό σας κατάστημα.

Εάν εγγραφείτε σε μια υπηρεσία από έναν σύνδεσμο σε αυτήν τη σελίδα, η Reeves and Sons Limited ενδέχεται να κερδίσει μια προμήθεια. Δείτε το δικό μας δήλωση ηθικής.

Η ταυτότητα του το κατάστημα ηλεκτρονικού εμπορίου σας συγκεντρώνει διάφορα στοιχεία όπως το λογότυπο, τα χρώματα του ιστότοπου και το δικό σας υλικά μάρκετινγκ. Αυτή η ταυτότητα ενισχύει τη συνολική επωνυμία σας και δημιουργεί μια υγιή υπενθύμιση για τους πελάτες σας, προκαλώντας συναισθήματα άνεσης και αξιοπιστίας όταν βλέπουν τις εικόνες και τα χρώματα της επωνυμίας σας.

Although small in size, the Favicon also ties into that branding strategy. In this tutorial, we’ll show you how to create and add a favicon to your Shopify κατάστημα, ολοκληρώνοντας την εμφάνισή σας στο διαδίκτυο και διευκολύνοντας την αναγνώριση του καταστήματός σας όταν επισκέπτονται οι πελάτες.

Τι είναι ένα Shopify Favicon;

A Shopify Το Favicon, ή οποιοδήποτε Favicon για αυτό το θέμα, είναι ένα μικρό εικονίδιο για τον ιστότοπό σας που εμφανίζεται στην καρτέλα του προγράμματος περιήγησης δίπλα στο όνομα του ιστότοπού σας.

Η γραμμή διευθύνσεων του προγράμματος περιήγησης είναι η πιο κοινή περιοχή για την προβολή του ιστότοπου Favicon, αλλά εμφανίζεται επίσης στις ακόλουθες τοποθεσίες:

  • Εφαρμογές γραμμής εργαλείων
  • Αποθηκευμένα
  • Αποτελέσματα ιστορικού
  • Γραμμές αναζήτησης
  • Μερικές φορές όταν κοινοποιείται στα κοινωνικά μέσα

Ουσιαστικά, όποτε το πρόγραμμα περιήγησης χρειάζεται να εμφανίσει έναν σύνδεσμο προς τον ιστότοπό σας και δεν υπάρχει πολύς χώρος για άλλο περιεχόμενο, αντικαθιστά το συνηθισμένο λογότυπο πλήρους μεγέθους με το Favicon.

Shopify Παραδείγματα Favicon

Από προεπιλογή, Shopify προσθέτει το Shopify λογότυπο για το Favicon σας, οπότε πρέπει να το αλλάξουμε αυτό.

Ένα καλό favicon είναι συχνά μια μικρότερη έκδοση του λογότυπού σας, αλλά μερικές φορές διαφέρουν λίγο επειδή θέλετε να βεβαιωθείτε ότι είναι ορατά, καταλάβετε όλο τον εκχωρημένο χώρο και προσθέστε λίγο χρώμα δίπλα στο όνομα του ιστότοπού σας.

Από προεπιλογή, όλα τα προγράμματα περιήγησης υποστηρίζουν Favicons μεγέθους 32×32 pixel. Αυτή είναι μια μάλλον μικροσκοπική εικόνα, αλλά με τη βοήθεια ορισμένων ηλεκτρονικών γεννητριών μπορείτε να φτιάξετε τη δική σας Shopify Favicon για τον ιστότοπό σας. Επίσης, οι μεγαλύτερες εικόνες μειώνονται ούτως ή άλλως, επομένως δεν χρειάζεται απαραίτητα να τις φτάσετε σε ακριβώς 32×32.

Ένα Favicon έχει νόημα για τα διαδικτυακά καταστήματα Shopify καθώς είναι εύκολο να προστεθούν και είναι σημαντικό να ενισχύσετε την ταυτότητα της επωνυμίας σας ως πωλητής στο διαδίκτυο. Κάποιοι υποστηρίζουν επίσης ότι βοηθάει με το SEO.

Συνεχίστε να διαβάζετε για να μάθετε περισσότερα σχετικά με τον τρόπο προσθήκης του Favicon στο δικό σας Shopify κατάστημα.

Πώς να προσθέσετε ένα Favicon στο δικό σας Shopify Store – Quick Step Guide

Όπως αναφέρθηκε, όταν εκτελείτε έναν ιστότοπο Shopify προσθέτει αυτόματα ένα Shopify logo as your site’s Favicon. There’s nothing wrong with that, but it’s far more professional and brand-oriented to include your own logo. Here are the steps you need to follow:

Βήμα 1: Μεταβείτε στο δικό σας Shopify Ταμπλό

Επομένως, πηγαίνετε στο δικό σας Shopify ταμπλό και κάντε κλικ στο Διαδικτυακό κατάστημα κάτω από τα κανάλια πωλήσεων.

Βήμα 2: Μεταβείτε στις Ρυθμίσεις θέματος

Μεταβείτε στα Θέματά σας και κάντε κλικ στο κουμπί Προσαρμογή δίπλα στο τρέχον θέμα σας. Αν και οι ρυθμίσεις αλλάζουν από θέμα σε θέμα, όλα τα πιο πρόσφατα Shopify θέματα έχουν μια ενότητα για να αλλάξετε το Favicon.

ηλεκτρονικό κατάστημα

Στο Shopify customizer, μεταβείτε στο κάτω μέρος της λίστας στα αριστερά και κάντε κλικ στο Theme Settings.

ρυθμίσεις θεμάτων

Βήμα 3: Επιλέξτε το κουμπί Favicon

Στη νέα ενότητα, βρείτε και επιλέξτε το κουμπί Favicon.

favicon Shopify Favicon

Αυτό αποκαλύπτει ένα κουμπί για Επιλογή εικόνας ή Εξερεύνηση δωρεάν εικόνων. Δεν μπορώ να φανταστώ ότι έχουν δωρεάν εικόνες που να ταιριάζουν με το λογότυπό σας, επομένως είναι καλύτερο να κάνετε κλικ στο Επιλογή εικόνας για να ανεβάσετε μια προσαρμοσμένη εικόνα από τον υπολογιστή σας.

επιλέξτε εικόνα

Βήμα 4: Ανεβάστε το Favicon σας

Επιλέξτε το αρχείο Favicon και ανεβάστε το Shopify.

Μετά από αυτό, θα δείτε μια προεπισκόπηση του εικονιδίου Favicon. Για να κάνετε τις αλλαγές μόνιμες, επιλέξτε το κουμπί Αποθήκευση μέσα Shopify.

αποθήκευση

Για να δείτε το δικό σας Shopify favicon σε δράση, μεταβείτε στο frontend του ιστότοπού σας και δείτε την τρέχουσα καρτέλα του προγράμματος περιήγησης Θα πρέπει να δείτε το Favicon δίπλα στον τίτλο του ιστότοπού σας.

παράδειγμα Shopify Favicon

Συμβουλές για τη δημιουργία του Favicon σας

Αν και φαίνεται εύκολο να δημιουργήσετε ένα μικρό εικονίδιο, είναι σημαντικό να το κάνετε σωστά, λαμβάνοντας υπόψη ότι οι πελάτες βλέπουν το Favicon όποτε έρχονται στον ιστότοπό σας. Είναι επίσης εύκολο να φτιάξετε ένα Favicon που είναι θολό ή δεν γεμίζει ολόκληρο τον χώρο, ακυρώνοντας τον σκοπό του Favicon, καθώς δεν είναι τόσο ορατό στο μάτι.

Για να επιλύσετε τυχόν προβλήματα, ακολουθούν ορισμένες συμβουλές για τη δημιουργία των δικών σας Shopify Favicon:

  • Ξεκινήστε το σχέδιό σας μεγαλύτερο από 32×32 και συρρικνώστε το εάν χρειάζεται. Είναι βέβαιο ότι θα έχετε μια πιο θολή εικόνα εάν προσπαθήσετε να τεντώσετε μια μικρότερη εικόνα στο χώρο. Για παράδειγμα, η λήψη μιας εικόνας 32×32 από το Hatchful και η προσπάθεια να την απλώσετε για να απαλλαγείτε από το γραπτό μέρος του λογότυπου μπορεί να προκαλέσει προβλήματα.
  • Συνήθως δεν μπορείτε απλώς να πάρετε το τρέχον λογότυπό σας και να περιμένετε να λειτουργεί τέλεια ως Favicon.
  • Το Favicon φαίνεται υπέροχο όταν καλύπτετε κάθε pixel του παρεχόμενου χώρου. Δεν έχετε πολύ χώρο, επομένως θα πρέπει να εκμεταλλευτείτε κάθε square pixel στο χώρο 32 × 32.
  • Καταργήστε όλο το κείμενο, καθώς είναι δύσκολο να διαβαστεί σε ένα Favicon. Η εξαίρεση είναι εάν το κύριο στοιχείο του λογότυπου σας είναι ένα μεγάλο γράμμα.
  • Τραβήξτε για συμπαγή, φωτεινότερα χρώματα. Τα απλά, γελοιογραφικά λογότυπα λειτουργούν καλύτερα.
  • Κοιτάξτε το Favicons από τις αγαπημένες σας μάρκες. Τι έχουν κάνει για να διασφαλίσουν ότι η διαδικτυακή τους εικόνα θα περάσει με favicon;
  • Σκεφτείτε είτε να γεμίσετε ολόκληρο τον χώρο με ένα μονόχρωμο φόντο είτε να δημιουργήσετε ένα διαφανές φόντο με τεντωμένο το στοιχείο του προσκηνίου ώστε να αγγίζει απλώς τις άκρες. Θα παρατηρήσετε ότι πολλές μεγαλύτερες μάρκες έχουν διαφανές φόντο για τα Favicon τους.
  • Το αρχείο ICO format λειτουργεί καλά για μικρότερες εικόνες. Εάν δεν είστε εξοικειωμένοι, χρησιμοποιήστε ένα PNG για διαφανή φόντο ή ένα JPG για Favicons υψηλής ανάλυσης με συμπαγές φόντο.

Πώς να δημιουργήσετε ένα Favicon για εσάς Shopify κατάστημα

Έχετε την επιλογή να σχεδιάσετε ένα Favicon σε οποιοδήποτε λογισμικό σχεδίασης της επιλογής σας. Αν προτιμάτε το Photoshop, πηγαίνετε με αυτό. Αν προτιμάτε ένα δωρεάν λογισμικό όπως το GIMP ή το Pixlr, όλα λειτουργούν αρκεί να τηρείτε τις απαιτούμενες διαστάσεις 32×32.

Έχετε επίσης την επιλογή να δημιουργήσετε ένα Favicon με Shopify's Hatchful Logo και Δωρεάν Γεννήτρια Favicon. Δείτε ολόκληρο τον οδηγό μας κατά τη χρήση Εκκεντρικός για να δημιουργήσετε ένα λογότυπο.

λήψη λογότυπου

Μόλις ο δημιουργός του λογότυπου κάνει τη δουλειά του, σας παρέχει ένα αρχείο γεμάτο με πολλαπλά λογότυπα formats, ένα από τα οποία είναι ένα Favicon.

Shopify Αρχείο Favicon

Λάβετε υπόψη ότι πολλά από τα λογότυπα με τα οποία δημιουργείτε Εκκεντρικός (διαβάστε το δικό μας Εκπληκτική κριτική) χρησιμοποιήστε λευκό χώρο γύρω από το λογότυπο, οπότε ίσως χρειαστεί να το προσαρμόσετε ώστε το γραφικό να καλύπτει το μεγαλύτερο μέρος του χώρου. Γενικά, έχω διαπιστώσει ότι πρέπει να χρησιμοποιείτε το παρεχόμενο Favicon Hatchful μόνο εάν φαίνεται ήδη καλό (γεμίζει το μεγαλύτερο μέρος του χώρου και δεν έχει μικρά στοιχεία όπως κείμενο).

Εάν δεν συμβαίνει αυτό, χρησιμοποιήστε ένα λογισμικό επεξεργασίας τρίτων, όπως το Photoshop ή το Pixlr, για να αποκόψετε ορισμένα από τα περιττά στοιχεία.

σημαντικό: Πρέπει να χρησιμοποιήσετε μια μεγαλύτερη έκδοση της εικόνας εάν σκοπεύετε να την τεντώσετε πάνω από έναν καμβά για να κόψετε κείμενο και λευκό χώρο. Για αυτό, χρησιμοποίησα το Hatchful για να δημιουργήσω λογότυπα, αλλά στην πραγματικότητα πήρα ένα από τα μεγάλα λογότυπα (όχι το αρχείο Favicon που παρέχεται), καθώς δεν θέλω να εμφανίζεται θάμπωμα όταν το τεντώνω πάνω από τον καμβά 32×32.

Μέσα στο λογισμικό επεξεργασίας, επιλέξτε έναν νέο καμβά με το πλάτος και το ύψος και τα δύο να είναι 32.

32 από 32

Δημιουργήστε ένα επίπεδο για τη νέα εικόνα και βεβαιωθείτε ότι η εικόνα είναι μεγαλύτερη από τον καμβά 32 × 32, καθώς μπορεί να το απλώνετε. Στη συνέχεια, ανεβάστε ή τοποθετήστε την εικόνα στον καμβά.

Στο παρακάτω στιγμιότυπο οθόνης, έχω κάνει το σχέδιο Favicon να μεγεθύνεται, ώστε να μπορώ να βεβαιωθώ ότι ταιριάζει square δεόντως. Είναι θολό, αλλά ξέρω ότι θα φαίνεται πολύ καλύτερα όταν κάνω σμίκρυνση.

μεγάλη έκδοση

Όπως μπορείτε να δείτε, η σμίκρυνση της έκδοσης του Favicon στον σχεδιαστή Pixlr φαίνεται καλή. Έχω καλύψει το μεγαλύτερο μέρος του διαθέσιμου χώρου, επέλεξα ένα φωτεινό και συμπαγές έγχρωμο εικονίδιο και έχω αφαιρέσει όλα τα σημάδια μικρότερου κειμένου.

μικρότερη έκδοση

Το τελευταίο βήμα είναι η λήψη του αρχείου. Μπορείτε να επιλέξετε να το κάνετε διαφανές PNG σε αυτό το σημείο. Αλλά για αυτό το σεμινάριο, επιμένω σε ένα JPG υψηλής ανάλυσης, ώστε να φαίνεται όσο το δυνατόν πιο ευκρινές. Και δεν με πειράζει να έχω φόντο με μονόχρωμο.

Κατεβάστε - Shopify Favicon

Επιστροφή στην σας Shopify ταμπλό. Κάντε κλικ στο Διαδικτυακό κατάστημα> Θέματα> Προσαρμογή.

Στη συνέχεια, μεταβείτε στις Ρυθμίσεις θέματος> Favicon.

Ανεβάστε το νέο Favicon και κάντε κλικ στο κουμπί Αποθήκευση στο Shopify συντάκτης.

προεπισκόπηση εικόνας

Και πάλι, ο κύριος τρόπος για να δοκιμάσετε και να προβάλετε το Favicon σας είναι απλώς να ανοίξετε μια καρτέλα με τη διεύθυνση URL του ιστότοπου της αρχικής σας σελίδας. Όπως μπορείτε να δείτε, το Favicon εμφανίζεται όμορφα και είναι στην πραγματικότητα λίγο καλύτερο από το προηγούμενο Favicon μου, καθώς αυτό δεν γέμισε ολόκληρο τον παρεχόμενο χώρο 32×32.

το τελικό προϊόν - Shopify Favicon

Συμπέρασμα

A Shopify Το Favicon δεν χρειάζεται περισσότερα από λίγα λεπτά για να σχεδιάσει και να προσθέσει στον ιστότοπό σας, ωστόσο παρέχει μια υπέροχη υπενθύμιση στους επισκέπτες σας σε ποιον ιστότοπο βρίσκονται. Επιπλέον, μπορεί να χρησιμεύσει ως ένας τρόπος για τους χρήστες να βρουν τον ιστότοπό σας στους σελιδοδείκτες και στο ιστορικό του προγράμματος περιήγησής τους, λαμβάνοντας υπόψη ότι πιθανότατα πραγματοποιούν αναζήτηση σε μια μεγάλη λίστα άλλων ιστότοπων όταν περνούν από αυτές τις ενότητες.

Λάβετε υπόψη ότι δεν πρέπει να συμβιβάζεστε με ένα θολό ή δυσανάγνωστο Shopify Εικόνα Favicon. Εάν διαπιστώσετε ότι το πρώτο Favicon δεν φαίνεται πολύ σωστό ή θέλετε να κόψετε κάποιο κείμενο ή να προσθέσετε ένα διαφανές φόντο, επιστρέψτε στην αρχή και κάντε το σωστά. Αν και δεν είναι καλή ιδέα να μην έχετε καθόλου Favicon, ένα θολό ή δυσδιάκριτο Favicon κάνει την επωνυμία σας να φαίνεται αντιεπαγγελματική και κάπως ανόητη.

Αν έχετε απορίες σχετικά με την προσθήκη του Favicons στο Shopify, ή να φτιάξετε το δικό σας Shopify Favicon, ενημερώστε μας στην παρακάτω ενότητα σχολίων.

Joe Warnimont

Ο Joe Warnimont είναι συγγραφέας από το Σικάγο που επικεντρώνεται στα εργαλεία ηλεκτρονικού εμπορίου, το WordPress και τα κοινωνικά μέσα. Όταν δεν ψαρεύει ή δεν κάνει γιόγκα, συλλέγει γραμματόσημα σε εθνικά πάρκα (αν και αυτό είναι κυρίως για παιδιά). Δείτε το χαρτοφυλάκιο του Joe για να επικοινωνήσετε μαζί του και να δείτε προηγούμενες δουλειές.

Σχόλια απαντήσεις 0

Αφήστε μια απάντηση

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται *

Βαθμολογία *

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.