Στο σχεδιασμό ιστοσελίδων, όπως πιθανότατα γνωρίζετε, κάθε λεπτομέρεια έχει σημασία. Ένα άτομο που έχει μεταβεί στον πόρο σας δεν βλέπει καθένα από τα στοιχεία ξεχωριστά, αλλά αντιλαμβάνεται ολόκληρη την εικόνα ως ένα πακέτο που αποτελείται από άλλες μικρές λεπτομέρειες. Έτσι, αν χάσετε κάτι στη διαδικασία ανάπτυξης του πόρου σας, αυτή η λεπτομέρεια μπορεί αργότερα να χαλάσει ολόκληρο το σύμπλεγμα, ολόκληρη τη σύνθεση.
Ένα τέτοιο μικροσκοπικό μπορεί να είναι, για παράδειγμα, το φόντο ενός κουμπιού, μια λανθασμένα επιλεγμένη γραμματοσειρά κάποιου μικρού στοιχείου, ακόμη και ένα favicon. Πράγματι, δείτε μόνοι σας - οι μεγάλοι, γνωστοί ιστότοποι έχουν ένα μεμονωμένο εικονίδιο που το υποδεικνύει στην ενότητα "Σελιδοδείκτες" του προγράμματος περιήγησης του χρήστη. Χωρίς αυτήν, οι προγραμματιστές του πόρου δεν θα μπορούσαν να δημιουργήσουν τη σύνθεση για την οποία αρχικά προσπαθούσαν.
Επομένως, όταν δημιουργείτε ένα σχέδιο για τον ιστότοπό σας, θα πρέπει να προσέχετε μια τέτοια λεπτομέρεια όπως το favicon. Σε αυτό το άρθρο, θα μιλήσουμε για το πώς να το ταιριάξουμε με το γενικό στυλ του πόρου, καθώς και για το τι μεγέθη πρέπει να έχει αυτή η εικόνα.
Εικονίδιο ιστότοπου
Αρχικά, ας ορίσουμε τι είναι αυτό το στοιχείο. Αυτήν τη στιγμή, ρίξτε μια ματιά στον τίτλο της καρτέλας του προγράμματος περιήγησής σας. Όπως μπορείτε να δείτε, υπάρχει μια μικρή εικόνα στα αριστερά της, που υποδεικνύει μια απλοποιημένη έκδοση του λογότυπου του πόρου. Η ίδια εικόνα βρίσκεται επίσης κοντά στο όνομα του ιστότοπου που εμφανίζεται στα αποτελέσματα αναζήτησης. Αυτό καθοδηγείται ο χρήστης όταν βλέπει τον τίτλο.
Πολλοί webmasters κατανοούν ότι χρειάζεται μια τέτοια εικόνα - αλλά λίγοι άνθρωποι γνωρίζουν ποιο μέγεθος favicon για τον ιστότοπο θα είναι το καταλληλότερο. Επομένως, σε αυτό το άρθρο δεν θα δώσουμε μόνο πληροφορίες για το πώς να δημιουργήσετε ένα τέτοιο εικονίδιο και πώς μπορείτε να το εγκαταστήσετε στον πόρο σας, αλλά θα μιλήσουμε επίσης για μεγέθη εικόνας.
Ο σκοπός του favicon
Έτσι, η εικόνα κοντά στην κεφαλίδα του ιστότοπου χρησιμοποιείται για αναγνώριση. Αυτός είναι ο αρχικός του σκοπός: να εκφράσει το site του οποίου το όνομα βλέπουμε και να το κάνει να ξεχωρίζει στα μάτια των υπολοίπων. Αυτό γίνεται όσο το δυνατόν πιο απλά μέσω της χρήσης γραφικών: αντιλαμβανόμαστε διαισθητικά πληροφορίες σε εικόνες πολύ πιο γρήγορα και ευκολότερα από ό,τι σε μορφή κειμένου. Τα Favicons μας βοηθούν να κάνουμε ακριβώς αυτό. Αλλά μην ξεχνάτε ότι το μέγεθος του favicon είναι ελάχιστο στα μάτια του χρήστη. Αυτό δεν είναι ένα λογότυπο στην "κεφαλίδα" του ιστότοπου, το οποίο μπορεί να περιέχει πρόσθετες πληροφορίες με τη μορφή επιγραφών, ορισμένες διευκρινίσεις ή στοιχεία επικοινωνίας. Όλα όσα μπορούν να εμφανιστούν στο εικονίδιο δίπλα στο όνομα πρέπει να ταιριάζουν στο μέγεθος του favicon όσο το δυνατόν περισσότερο. Και αυτός, όπως ήδη αναφέρθηκε, είναι απλώς μινιατούρα (μόνο 16 επί 16 pixel).
Πώς να επιλέξετεfavicon;
Λοιπόν, πώς μπορεί ένας webmaster να σχεδιάσει ένα εικονίδιο για τον ιστότοπό του; Θα πρέπει να σημειωθεί ότι η απλή συμπίεση του λογότυπου του ιστότοπου, τις περισσότερες φορές, δεν θα λειτουργήσει. Στα εμβλήματα που τοποθετούνται με τη μορφή λογότυπου ενός συγκεκριμένου πόρου, είναι συχνά ορατά διάφορα στοιχεία, τα οποία δεν θα εμφανίζονται πάντα σωστά σε μικροσκοπική μορφή. Είναι καλύτερα να εγκαταλείψετε αμέσως ένα τέτοιο εγχείρημα.
Φυσικά, το μέγεθος του favicon δεν επιτρέπει να μιλάμε για απλή εισαγωγή μιας επιγραφής εκεί. Οποιοδήποτε κείμενο θα είναι απλώς αόρατο σε αυτό το ψήφισμα. Πρέπει να αναπτύξουμε ένα νέο εικονίδιο που θα μεταφέρει το στυλ του ιστότοπου. Για να βρούμε λύσεις, πάλι, ας στραφούμε στους μεγαλύτερους ιστότοπους.
Πολλοί άνθρωποι χρησιμοποιούν το στυλιζαρισμένο πρώτο γράμμα του ονόματος της υπηρεσίας ως favicon. Αυτός είναι ο τρόπος, για παράδειγμα, Bing, Yahoo, Yandex, Wikipedia, Google. Υπάρχει μια άλλη προσέγγιση - εάν έχετε ένα σύντομο όνομα τοποθεσίας, μπορείτε να το ορίσετε ως φόντο του εικονιδίου σας. Προκειμένου το μέγεθος του favicon (σε pixel που φτάνει, επαναλαμβάνω, 16 επί 16 pixel) να εμφανίζει σωστά αυτήν την επιγραφή, δεν πρέπει να είναι περισσότερο από 3 γράμματα. Αυτό κάνει, για παράδειγμα, η υπηρεσία Aol.
Πώς να δημιουργήσετε ένα favicon;
Υπάρχουν διάφοροι τρόποι για να δημιουργήσετε ένα εικονίδιο για το όνομα της τοποθεσίας. Φυσικά, το πιο εύκολο είναι να δουλέψεις με διαφορετικές έτοιμες λύσεις. Μπορούμε να μιλήσουμε για ορισμένες υπηρεσίες ή προγράμματα που σας επιτρέπουν να δημιουργήσετε ένα εικονίδιο από μια πλήρη εικόνα μειώνοντάς το. Ωστόσο, θα συνιστούσα να αναπτύξετε ένα τέτοιο λογότυπο μόνοι σας. Αυτό θα δώσει πρώτατην ευκαιρία να μάθουν κάτι? και δεύτερον, θα παρέχει περισσότερα εργαλεία. Το μόνο που χρειάζεται να ξέρετε για αυτό είναι τι να σχεδιάσετε και επίσης να ξέρετε τι μέγεθος πρέπει να είναι το favicon στην τελική έκδοση. Θα μιλήσουμε για το μέγεθος εικονιδίου για τον ιστότοπο λίγο αργότερα, αλλά προς το παρόν θα σημειώσουμε ορισμένες λεπτές αποχρώσεις της εργασίας με τέτοιες εικόνες. Συγκεκριμένα, χωρίς να αναφέρεται το μέγεθος του favicon για τον ιστότοπο, θα πρέπει να διευκρινιστεί η μορφή μιας τέτοιας εικόνας. Όπως σημειώνουν οι έμπειροι σχεδιαστές, η εικόνα πρέπει να αποθηκευτεί ως αρχείο-p.webp
Μπορείτε να αποθηκεύσετε την εικόνα, για παράδειγμα, χρησιμοποιώντας το Photoshop, όπου θα σχεδιαστεί το έμβλημα.
Διαστάσεις Favicon
Λοιπόν, ας μιλήσουμε τώρα για το πόσο μεγάλη θα πρέπει να είναι η εικόνα που βλέπουμε δίπλα στο όνομα του ιστότοπου στα αποτελέσματα αναζήτησης. Από προεπιλογή, όπως ήδη αναφέρθηκε, το μέγεθός του είναι μόνο 16 pixel (σε κάθε πλευρά). Ωστόσο, αν προσπαθήσετε να επεξεργαστείτε αυτήν την εικόνα στο Photoshop, θα δείτε μόνοι σας πόσο άβολο είναι. Επομένως, συνιστούμε να εργαστείτε με μια μεγεθυσμένη εικόνα, η οποία στο μέλλον μπορεί απλώς να συμπιεστεί κατά μήκος των άκρων και να αποθηκευτεί στην απαιτούμενη μορφή.
Πολλαπλατφόρμα
Ωστόσο, μιλώντας για το πόσο μεγάλο θα πρέπει να είναι το favicon στον ιστότοπό σας, υπάρχει ένα ακόμη πράγμα που πρέπει να έχετε κατά νου. Δεν εμφανίζουν όλες οι πλατφόρμες μια εικόνα πόρων με τον ίδιο τρόπο. Για παράδειγμα, οι συσκευές με οθόνη Retina «βλέπουν» το favicon σας στα 32 επί 32 pixel. Και στο Safari και στη νέα πλατφόρμα των Windows, και καθόλου, αυτά τα εικονίδια φτάνουν το μέγεθος 64pixels.
Ως εκ τούτου, συνιστούμε να αποθηκεύσετε διαφορετικές εκδόσεις του εικονιδίου και απλώς να προβλέπετε την αλλαγή του ανάλογα με την πλατφόρμα του χρήστη στο μέλλον. Ένα άλλο ενδιαφέρον σημείο - μπορείτε να προσπαθήσετε να φορτώσετε το εικονίδιο στη μεγαλύτερη μορφή, βασιζόμενοι στο γεγονός ότι θα "συρρικνωθεί" ανάλογα με το πρόγραμμα περιήγησης.
Εξωτερικοί συντάκτες
Φυσικά είναι καλό αν είστε καλοί με το Photoshop και γνωρίζετε τι μέγεθος πρέπει να είναι το favicon και πώς να το πετύχετε ενώ αποθηκεύετε την εικόνα σας. Ωστόσο, υπάρχουν πολλοί αρχάριοι που απλώς δεν έχουν συναντήσει τόσο προσεκτικά τους επεξεργαστές γραφικών στο παρελθόν, επομένως δεν μπορούν να σχεδιάσουν την επιθυμητή εικόνα τόσο εύκολα. Για να βοηθήσετε τέτοιους webmasters, υπάρχουν διάφορες υπηρεσίες που σας επιτρέπουν να δημιουργείτε αυτόματα το εικονίδιο που σας ενδιαφέρει. Πολλά από αυτά είναι ακόμη και δωρεάν, κάτι που δεν απαιτεί καμία επένδυση από τον χρήστη.
Μερικές φορές χρειάζεται μόνο να εγγραφείτε για να εργαστείτε, αλλά, όπως καταλαβαίνετε, αυτό γίνεται μία φορά - άλλωστε, οι εταιρείες δεν αλλάζουν το favicon τους τόσο συχνά. Ρίξτε μια ματιά στο Google, το οποίο αλλάζει το λογότυπο κάθε μέρα, αλλά δεν αγγίζει το εικονίδιο.
Πώς να εγκαταστήσετε ένα favicon;
Γενικά, η ρύθμιση του ιστότοπού σας με τέτοιο τρόπο ώστε να εμφανίζει σωστά την εικόνα που χρειάζεστε είναι πολύ απλή. Αρκεί να εκτελέσετε μια σειρά από απλά βήματα που θα επιτρέψουν στις μηχανές αναζήτησης, καθώς και στα απλά προγράμματα περιήγησης, να διαβάσουν τις πληροφορίες.
Για να γίνει αυτό, η εικόνα που προκύπτει πρέπει να αποθηκευτεί μεονομάζεται favicon.ico και τοποθετείται στη ρίζα του πόρου σας. Αυτό ήταν, τώρα η εικόνα σας θα αναγνωριστεί αυτόματα και μετά από κάποιο χρονικό διάστημα θα συνδεθεί με τον ιστότοπό σας.
Εκτός από αυτό το δέσιμο, μπορείτε να προσθέσετε μια ακόμη γραμμή που θα "υποδεικνύει" πού βρίσκεται το εικονίδιό σας. Μοιάζει με αυτό:
Εγκαταστήστε τον κώδικα στην κεφαλίδα του ιστότοπου.
Συμπεράσματα
Έτσι, αφού διαβάσατε το άρθρο μας, καταλάβατε τι μέγεθος πρέπει να είναι ένα favicon για έναν ιστότοπο και τι είναι. Επίσης, νομίζω ότι καταλάβατε ότι η εύρεση του σωστού εικονιδίου για τον πόρο σας είναι μια αναγκαιότητα, γιατί παίζει καλά στα χέρια σας τόσο από την άποψη της αύξησης της αναγνώρισης όσο και από την άποψη κάποιας πρόσθετης διαφοράς μεταξύ των ανταγωνιστών σας. Τουλάχιστον οι μεγαλύτεροι ιστότοποι κάνουν το ίδιο, το οποίο μπορεί να ληφθεί ως χαρακτηριστικό παράδειγμα. Και εκτός αυτού, δεν προκαλεί μεγάλη προσπάθεια - αφού φτιάξετε ένα favicon μία φορά και το εγκαταστήσετε σωστά στον ιστότοπό σας, μπορείτε να το ξεχάσετε για τους επόμενους μήνες.
Γι' αυτό, πειραματιστείτε ελεύθερα, βρείτε κάτι νέο, δοκιμάστε - και όλα θα πάνε καλά!
