Η αναζήτηση «διαστάσεις favicon» εξακολουθεί να δίνει λίστες δεκαπέντε αρχείων από το 2014. Στην πράξη, έξι διαστάσεις καλύπτουν πλέον καρτέλες, αποτελέσματα αναζήτησης, iOS, Android και PWA. Δείτε ποιες είναι και γιατί χρειάζονται.
Οι διαστάσεις που χρειάζεστε στην πράξη
Κάθε γραμμή αντιστοιχεί σε τεκμηριωμένη χρήση του προτεινόμενου πακέτου. Ο πίνακας προτιμά ένα μικρό, διαλειτουργικό σύνολο από μια συλλογή ιστορικών παραλλαγών.
| Αρχείο | Διαστάσεις | Χρήση |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Καρτέλες, σελιδοδείκτες, παλαιότερα προγράμματα περιήγησης, ανιχνευτές |
| favicon.svg | διανυσματικό, τετράγωνο | Σύγχρονα προγράμματα περιήγησης, ευκρίνεια σε κάθε μέγεθος, σκοτεινή λειτουργία |
| favicon-96x96.png | 96×96 | Αποτελέσματα Google σε κινητά |
| apple-touch-icon.png | 180×180 | Αρχική οθόνη iOS και iPadOS, χωρίς διαφάνεια |
| web-app-manifest-192x192.png | 192×192 | Αρχική οθόνη Android, δηλωμένο στο web manifest |
| web-app-manifest-512x512.png | 512×512 | Οθόνη εκκίνησης PWA, έκδοση «maskable» |
Γιατί τα 16, 32 και 48 συνυπάρχουν στο ίδιο .ico
Το ICO είναι μορφή περιέκτη: ένα αρχείο μπορεί να περιέχει πολλές εικόνες και το πρόγραμμα περιήγησης επιλέγει εκείνη που ταιριάζει στην εμφάνιση. Αυτό ακριβώς χρειάζεται, επειδή το ζητούμενο μέγεθος αλλάζει ανάλογα με τη χρήση.
Τα 16×16 εξυπηρετούν την καρτέλα σε τυπική οθόνη. Τα 32×32 προσφέρουν παραλλαγή για οθόνες υψηλής πυκνότητας και άλλες επιφάνειες του προγράμματος περιήγησης. Τα 48×48 συμπληρώνουν τον περιέκτη και ακολουθούν τον κανόνα πολλαπλάσιου του 48 που τεκμηριώνει η Google για τα favicon αναζήτησης.
Το συνηθέστερο λάθος είναι ένα .ico που περιέχει μόνο 16×16: σε οθόνη Retina το εικονίδιο μεγεθύνεται και φαίνεται μόνιμα θολό.
180×180 για iOS, 192 και 512 για Android
Το iOS δεν διαβάζει το web manifest για το εικονίδιο αρχικής οθόνης: αναζητά ετικέτα apple-touch-icon. Αρκεί ένα μέγεθος, 180×180, που καλύπτει κάθε πρόσφατο iPhone και iPad. Το σύστημα μειώνει μόνο του το μέγεθος για παλαιότερες συσκευές.
Το Android χρησιμοποιεί αντίθετα το web manifest. Αρκούν δύο εγγραφές: 192×192 για την αρχική οθόνη και 512×512 για την οθόνη εκκίνησης όταν ο ιστότοπος εγκαθίσταται ως εφαρμογή. Η έκδοση 512 πρέπει να δηλώνεται με purpose «maskable», δηλαδή να παραμένει σωστή όταν περικοπεί σε κύκλο ή στρογγυλεμένο τετράγωνο.
Σε εικονίδιο maskable, κρατήστε τα βασικά στοιχεία μέσα στο κεντρικό 80%. Οτιδήποτε έξω από αυτό μπορεί να περικοπεί, ανάλογα με τον κατασκευαστή του τηλεφώνου.
Από ποια αρχική εικόνα να ξεκινήσετε
Η καλύτερη αφετηρία είναι ένα SVG: κλιμακώνεται χωρίς απώλειες σε όλα τα παραπάνω μεγέθη. Διαφορετικά, χρησιμοποιήστε τετράγωνο PNG τουλάχιστον 512×512 pixel, ώστε ακόμη και το εικονίδιο εκκίνησης Android να παράγεται με σμίκρυνση και ποτέ με μεγέθυνση.
Ένα οριζόντιο λογότυπο με κείμενο δεν λειτουργεί στα 16×16: σε αυτό το μέγεθος μια λέξη γίνεται τρία θολά pixel. Απομονώστε το σύμβολο ή ξεκινήστε από ένα ή δύο γράμματα σε φόντο με αντίθεση.
Τέλος, ελέγξτε την αντίθεση τόσο σε φωτεινό όσο και σε σκοτεινό φόντο: ένα μαύρο λογότυπο χάνεται σε σκοτεινή καρτέλα. Ακριβώς γι’ αυτό υπάρχει η σκοτεινή παραλλαγή του SVG favicon.
Οι διαστάσεις που δεν χρειάζεστε πια
Παλαιότερα εργαλεία εξακολουθούν να παράγουν αρχεία για ιστορικές ενσωματώσεις, όπως πλακίδια Windows με mstile-150x150.png και browserconfig.xml. Προσθέστε τα μόνο όταν οι απαιτήσεις υποστήριξης στοχεύουν ρητά αυτές τις επιφάνειες.
Η μεγάλη σειρά apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 και 152x152 προέρχεται από την εποχή που το iOS δεν άλλαζε μέγεθος. Μία εικόνα 180×180 τις αντικαθιστά όλες.
Η αφαίρεση άχρηστων δηλώσεων απλοποιεί το αποθετήριο και την HTML. Ελέγξτε τα προγράμματα περιήγησης και τις πλατφόρμες που στοχεύετε πριν αφαιρέσετε υπάρχουσα ενσωμάτωση.
Πρωτογενείς πηγές
Συχνές ερωτήσεις
Χρειάζεται ακόμη favicon.ico;
Ναι, αλλά μόνο στη ρίζα του ιστοτόπου. Τα σύγχρονα προγράμματα περιήγησης προτιμούν SVG, όμως πολλοί ανιχνευτές, συγκεντρωτές και εφαρμογές email ζητούν ακόμη /favicon.ico χωρίς να διαβάζουν την HTML. Το αρχείο είναι λίγα kilobyte: κρατήστε το.
Ποιο μέγεθος favicon χρησιμοποιεί η Google στην αναζήτηση;
Η Google ζητά πλευρά πολλαπλάσια των 48 pixel και συνήθως εμφανίζει το εικονίδιο στα 48×48. Ένα PNG 96×96 ή SVG το καλύπτει εύκολα. Το εικονίδιο πρέπει να επιτρέπει ανίχνευση και να μην αποκλείεται από robots.txt.
Μπορεί το favicon να είναι ορθογώνιο;
Τεχνικά ναι, οπτικά όχι. Κάθε επιφάνεια εμφάνισης δεσμεύει τετράγωνο χώρο: μια ορθογώνια εικόνα παραμορφώνεται ή κεντράρεται με κενές λωρίδες. Ξεκινήστε πάντα από τετράγωνο, προσθέτοντας περιθώριο γύρω από το σύμβολο αν χρειάζεται.