Ποιο είναι το σημείο των favicons;

Όταν αρχίζω να λέω στους ανθρώπους τη σημασία ενός favicon για τη γενική στρατηγική τους για online branding, λένε συνήθως το ίδιο πράγμα: "Δεν παίρνετε αυτό το πράγμα μάρκας λίγο πιο μακριά;"

Η απάντησή μου συνήθως πηγαίνει: "Όχι αν είστε σοβαροί για τις δικές σας προσπάθειες branding!"

Είναι αλήθεια ότι τα favicons είναι πολύ μικρά πράγματα, ίσως το λιγότερο σημαντικό κομμάτι ενός ιστότοπου, αλλά είναι η προσοχή στη λεπτομέρεια που κάνει το site ξεχωρίζει. και ακόμα κι αν ακούγεται τρελός, τα favicons είναι πολύ σημαντικά από την οπτική γωνία του branding.

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

Μοιράζομαι μια μεγάλη λίστα με τους πόρους που σχετίζονται με το favicon παρακάτω, οπότε σκεφτείτε να σημειώσετε αυτή τη σελίδα για μελλοντική αναφορά. Ω, και αν το κάνετε, παρατηρήστε το φάκελο WDD favicon στη λίστα σελιδοδεικτών σας)

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

Τι είναι ένα favicon;

Τα Favicons είναι μικρές τετράγωνες εικόνες συνήθως 16 × 16 εικονοστοιχεία που χρησιμοποιούνται από προγράμματα περιήγησης ιστού για την εμφάνιση μιας γραφικής παράστασης του ιστότοπου που επισκέπτεται στην αριστερή πλευρά της γραμμής διευθύνσεων του προγράμματος περιήγησης. Πιθανότατα έχετε δει πολλά favicons πριν, ακόμα και αν δεν ξέρετε τι είναι. Εάν υπάρχουν αμφιβολίες, η παρακάτω εικόνα θα σας βοηθήσει.

Δύο παραδείγματα favicons σε ένα πρόγραμμα περιήγησης με καρτέλες Google Chrome.

Εάν ενδιαφέρεστε να κατανοήσετε ένα κομμάτι της ιστορίας του διαδικτύου, εδώ είναι ένα ενδιαφέρον γεγονός:

Η λέξη favicon είναι ένα portamentau που αποτελείται από τις λέξεις "αγαπημένο" και "εικονίδιο" και ονομάστηκε ως τέτοιο, επειδή υποστηρίχθηκε για πρώτη φορά από τον Internet Explorer 5 της Microsoft και μόνο σε περίπτωση που δεν χρησιμοποιείτε IE, αυτή η λειτουργία bookmarking του προγράμματος περιήγησης ονομάζεται φαβορί.

Ποιος είναι ο σκοπός ενός favicon;

Πίσω στις πρώτες μέρες του Διαδικτύου, εργαλεία όπως το Google Analytics ήταν απλά όνειρα στο μυαλό κάποιων web-nerds, έτσι ώστε να είναι περίεργο καθώς αυτό μπορεί να ακούγεται, τότε τα favicons χρησιμοποιήθηκαν ως τρόπος εκτίμησης της επισκεψιμότητας του ιστότοπου με υπολογίζοντας τον αριθμό των επισκεπτών που επέλεξαν τη σελίδα με το σελιδοδείκτη. (Αυτό είναι ένα άλλο ενδιαφέρον απόσπασμα στην ιστορία του Διαδικτύου!)

Όμως, ενδιαφέροντα γεγονότα, ο κύριος λόγος για την κατοχή favicons στις μέρες μας είναι η βελτίωση της εμπειρίας των χρηστών. Τα Favicons χρησιμοποιούνται σε όλα τα σύγχρονα προγράμματα περιήγησης στη γραμμή διευθύνσεων, στη γραμμή συνδέσεων, στην περιοχή bookmarking και στις καρτέλες περιήγησης. Εκτός αυτού, μερικά προγράμματα περιήγησης εμφανίζουν επίσης παραμορφώσεις κάθε φορά που δημιουργείτε έναν σύνδεσμο συντόμευσης για τον αντίστοιχο ιστότοπο στην επιφάνεια εργασίας και στην κινητή συσκευή σας.

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

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

Πώς να δημιουργήσετε ένα favicon;

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

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

Ακολουθεί η λίστα γεννήτριας Favicon που αναζητάτε:

Οι παραπάνω ιστότοποι ποικίλουν πολύ από την άποψη του προκύπτοντος αρχείου που λαμβάνετε. ειδικά όσον αφορά το μέγεθος του αρχείου και την επέκταση. Αν θέλετε να έχετε το πιο συμβατό αρχείο δυνατό, συνιστούμε ανεπιφύλακτα τη λήψη ενός μεγέθους εικόνας 16 × 16 pixel με τη μορφή "ico".

Αν χρειάζεστε έμπνευση, δοκιμάστε να δείτε τις παρακάτω γκαλερί favicon:

Πώς να χρησιμοποιήσετε το favicon σας;

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

Βήμα 1

Θα χρειαστεί να μεταφορτώσετε το αρχείο "favicon.ico" στο διακομιστή σας. Για να το κάνετε αυτό, τοποθετήστε τη γραμμή διευθύνσεων του προγράμματος περιήγησης στο διακομιστή FTP. η διεύθυνση URL σας πρέπει να μοιάζει με αυτή:

ftp://[email protected]

Πατήστε enter και το πρόγραμμα περιήγησης θα σας ζητήσει ένα όνομα χρήστη και έναν κωδικό πρόσβασης πριν να χορηγήσετε πρόσβαση στο διακομιστή αρχείων. Αφού εισέλθετε, μεταφορτώστε το αρχείο "favicon.ico" στον ριζικό φάκελο και τελειώσατε.

Βήμα 2

Τώρα θα χρειαστεί να επεξεργαστείτε τη σελίδα HTML της ιστοσελίδας σας για να βοηθήσετε τα προγράμματα περιήγησης να βρουν την εικόνα favicon. Κρατήστε το παράθυρο FTP ανοιχτό, βρείτε και κατεβάστε το αρχείο "index.html" ή "header.php" από το διακομιστή σας και ακολουθήστε τα παρακάτω βήματα ανάλογα με το αρχείο που λαμβάνετε:

Εάν ο ιστότοπός σας αποτελείται από απλό κώδικα HTML, εισαγάγετε τον παρακάτω κώδικα στην περιοχή HEAD του αρχείου "index.html" και μην ξεχάσετε να αλλάξετε το "yoursite.com" για τη δική σας διεύθυνση ιστότοπου.

Εάν χρησιμοποιείτε WordPress, εισαγάγετε τον παρακάτω κώδικα στην περιοχή HEAD του αρχείου "header.php".

Με αυτό που έγινε, μεταφορτώστε το αρχείο πίσω από εκεί που το πήρατε. Τελείωσες!

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

Πώς να δημιουργήσετε ένα favicon στο Photoshop

Με τόσα πολλά εργαλεία διαθέσιμα για να σας βοηθήσουν να δημιουργήσετε το favicon σας, γιατί θα θέλατε να πάρετε το σκληρό δρόμο και να το δημιουργήσετε στο Photoshop; Λοιπόν, αν είστε σχεδιαστής και θέλετε να πάρετε το καλύτερο από το favicon σας, σίγουρα αυτός είναι ο επαγγελματικός τρόπος να το κάνετε. Το τέχνασμα είναι ότι το Photoshop δεν υποστηρίζει εγγενώς αρχεία "ico", έτσι πρέπει κατεβάστε αυτό το plugin από την Telegraphics .

Βεβαιωθείτε ότι το εγκαταστήσατε πριν ακολουθήσετε το σεμινάριο που ακολουθεί. Το Photoshop δεν θα λειτουργήσει χωρίς αυτό.

Αναζητήστε την επιλογή "ICO" στο παράθυρο "Αποθήκευση ως" του Photoshop για να επιβεβαιώσετε την εγκατάσταση της προσθήκης.

Δημιουργήστε ένα νέο έγγραφο στο Photoshop επιλέγοντας το στοιχείο μενού "Αρχείο" και την ακόλουθη επιλογή "Νέα", στη συνέχεια ρυθμίστε τον καμβά σας στα 64 × 64 εικονοστοιχεία. Γιατί; Δεδομένου ότι το τελικό μέγεθος φακού του 16 × 16 είναι τόσο μικρό, έχοντας έναν μεγαλύτερο καμβά για να δουλέψετε θα σας βοηθήσει να δημιουργήσετε το δημιουργικό σας χυμό. Στη συνέχεια, επικολλήστε το λογότυπό σας στο έγγραφο και αφήστε τη μαγική δημιουργική σας δύναμη.

Μόλις τελειώσετε, απλά επιλέξτε το μενού "Εικόνα" και την ακόλουθη επιλογή "Μέγεθος εικόνας" και μειώστε την εικόνα σε 16 × 16 εικονοστοιχεία. Θυμηθείτε να κάνετε κλικ στο "Resample Image" και να επιλέξετε "Bicubic Sharper", για να βεβαιωθείτε ότι η εικόνα δεν θα θολώσει κατά την αλλαγή μεγέθους. Εάν δεν σας αρέσει το τελικό αποτέλεσμα απλά να ακυρώσετε τις τελευταίες αλλαγές με "AltCtrl / AltCmd + Z" και να συνεχίσετε να εργάζεστε στο σχεδιασμό μέχρι να είστε ευχαριστημένοι με αυτό.

Για να ολοκληρώσετε το favicon, το μόνο που έχετε να κάνετε είναι να κάνετε κλικ στο μενού "File" και στην ακόλουθη επιλογή "Save As", εκεί θυμάστε να ονομάσετε το αρχείο σας ως "favicon.ico". Για άλλη μια φορά, δουλειά!

συμπέρασμα

Τα Favicons είναι ένα από αυτά τα μικρά πράγματα που συνήθως δεν δίνουμε μεγάλη προσοχή, αλλά η αλήθεια είναι ότι δεν είναι ασήμαντη, είναι ένα πολύ σημαντικό μέρος του ιστού, τόσο από την άποψη της διεπαφής χρήστη όσο και από το σημείο επωνυμίας - από-άποψη.

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

Δημιουργείτε favicons για τους πελάτες σας; Είναι πάρα πολύ κόπο για λίγη ανταμοιβή; Ας γνωρίσουμε τις σκέψεις σας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, bemused image μέσω Shutterstock

σχεδιασμός ιστοσελίδων branding πως να favicon συμβουλές και κόλπα

Ποιο είναι το σημείο των Favicons;