Τα Favicons αντικαθιστούν το εικονίδιο υδρόγειο στη γραμμή διευθύνσεων.
Πίστωση εικόνας: r0mu/iStock/Getty Images
Το favicon είναι ένας δημιουργικός, πρακτικός τρόπος για να προσθέσετε διακριτική οπτική αίσθηση στην παρουσία του ιστότοπού σας. Τα Favicons είναι μικρές εικόνες που χρησιμοποιούν τα προγράμματα περιήγησης Ιστού στις καρτέλες σελίδων και στις γραμμές διευθύνσεων. Εμφανίζουν ένα λογότυπο ή μια εικόνα που σχετίζεται με τον ιστότοπο που λειτουργεί ως οπτικό αναγνωριστικό επωνυμίας δίπλα στον τίτλο ή τη διεύθυνση URL. Τα Favicons είναι ιδιαίτερα χρήσιμα αναγνωριστικά ιστότοπου στην περιήγηση με καρτέλες, επειδή ο διαθέσιμος χώρος κειμένου που χρησιμοποιείται για τους τίτλους σελίδων μειώνεται σχεδόν καθόλου καθώς ο χρήστης ανοίγει περισσότερες καρτέλες.
Βήμα 1
Σχεδιάστε το εικονίδιο που θέλετε να χρησιμοποιήσετε σε ένα πρόγραμμα επεξεργασίας φωτογραφιών ή γραφικών. Μπορείτε να πάρετε ένα υπάρχον λογότυπο ή εικόνα που σχετίζεται με τον ιστότοπο ή την επωνυμία σας και να το προσαρμόσετε ώστε να συμμορφώνεται με τα πρότυπα favicon. Τα Favicons χρησιμοποιούν πάντα τετράγωνες διαστάσεις και έχουν μέγιστο υποστηριζόμενο μέγεθος 256 επί 256 pixel. Περικόψτε και το μέγεθος της εικόνας ώστε να χωράει σε ένα τετράγωνο 256 επί 256 εικονοστοιχείων, εάν πρόκειται να χρησιμοποιήσετε ένα εργαλείο συσκευασίας εικονιδίων για την υποστήριξη πολλαπλών μεγεθών. Εάν πρόκειται να κάνετε απλώς μία έκδοση, χρησιμοποιήστε ένα μέγεθος 16 επί 16 εικονοστοιχείων.
Το βίντεο της ημέρας
Βήμα 2
Εξάγετε το γραφικό εικονίδιο ως αρχείο εικόνας PNG από το πρόγραμμα γραφιστικής σχεδίασης. Το PNG είναι η τυπική μορφή εικόνας του W3C για τα favicons. Ορισμένα προγράμματα περιήγησης ενδέχεται να εμφανίζουν αρχεία JPG ως favicons, αλλά το πρότυπο δεν υποστηρίζεται επίσημα. Επιπλέον, τα προγράμματα συσκευασίας εικονιδίων ενδέχεται να μην λειτουργούν με εικόνες σε άλλες μορφές. Τα Favicons υποστηρίζουν επίσης αρχεία GIF και ICO.
Βήμα 3
Συσκευάστε το εξαγόμενο αρχείο PNG σε ένα αρχείο ICO με ένα πρόγραμμα μετατροπέα ICO. Ένα πρόγραμμα μετατροπέα εικονιδίων επεξεργάζεται ένα favicon PNG, το μορφοποιεί για πολλά διαφορετικά μεγέθη favicon που υποστηρίζονται ευρέως και τα ενσωματώνει σε ένα μόνο αρχείο. Τα αρχεία ICO παρέχουν favicon υψηλότερης ανάλυσης από 16 επί 16 pixel για συσκευές που τα υποστηρίζουν.
Βήμα 4
Συνδεθείτε στην υπηρεσία φιλοξενίας του ιστότοπού σας και ανεβάστε το αρχείο PNG ή ICO στον διακομιστή πολυμέσων του ιστότοπού σας. Αντιγράψτε τη διεύθυνση URL του μεταφορτωμένου αρχείου. θα το χρειαστείτε για να επισυνάψετε το favicon στον ιστότοπο.
Βήμα 5
Ανοίξτε το πρόγραμμα επεξεργασίας του ιστότοπού σας και προσθέστε τον ακόλουθο κώδικα, τροποποιημένο με τη διεύθυνση URL του αρχείου favicon, όπως υποδεικνύεται, στην ενότητα του ιστότοπού σας.
Για αρχεία PNG:
Για αρχεία ICO:
Αν δεν χρησιμοποιείτε έναν ιστότοπο που ελέγχεται από το CMS ή δεν περιλαμβάνει μια ενότητα που βασίζεται σε αρχείο, θα πρέπει να προσθέσετε τον κώδικα σε κάθε σελίδα που θέλετε να εμφανίζεται το εικονίδιο. Το favicon εμφανίζεται αφού αποθηκεύσετε και ενημερώσετε τις σελίδες του ιστότοπου.
Υπόδειξη
Τα προγράμματα επεξεργασίας φωτογραφιών όπως το Photoshop και το Corel Draw λειτουργούν καλά για το σχεδιασμό και τη μορφοποίηση του εικονιδίου. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε δωρεάν προγράμματα όπως το Paint.net και το Pixlr.
Προειδοποίηση
Ορισμένα προγράμματα περιήγησης συσχετίζουν αυτόματα ένα αρχείο εικόνας που βρίσκεται στον κατάλογο /favicon ως favicon. Ωστόσο, ο οργανισμός του W3C αποθαρρύνει αυτήν την πρακτική επειδή δεν είναι ένα καθολικά υποστηριζόμενο πρότυπο και αντίκειται στις αρχές της αρχιτεκτονικής του Ιστού. Επιπλέον, πολλές υπηρεσίες φιλοξενίας Ιστού και συστήματα CMS δεν επιτρέπουν στον χρήστη να τοποθετεί περιεχόμενο πολυμέσων εκτός καταλόγων αρχείων πολυμέσων, καθιστώντας αυτή την πρακτική αδύνατη.
