Ένα μαύρο λογότυπο σε διαφανές φόντο φαίνεται τέλειο σε φωτεινή καρτέλα και εξαφανίζεται σε σκοτεινή. Το ICO δεν προσαρμόζεται, αλλά το SVG favicon μπορεί: περιέχει κανόνα CSS που αλλάζει τα χρώματα ανάλογα με το θέμα του προγράμματος περιήγησης.
Το πρόβλημα: ένα αρχείο, δύο φόντα
Καθώς τα προγράμματα περιήγησης ακολουθούν το θέμα του συστήματος, η γραμμή καρτελών της ίδιας σελίδας μπορεί να είναι σχεδόν λευκή για έναν επισκέπτη και σχεδόν μαύρη για άλλον. Ένα μονόχρωμο favicon σχεδιασμένο για τη μία περίπτωση γίνεται δυσανάγνωστο στην άλλη.
Πολλοί ιστότοποι παρακάμπτουν το πρόβλημα με αδιαφανές έγχρωμο φόντο. Λειτουργεί, αλλά το εικονίδιο γίνεται μια βαριά κηλίδα, ενώ οι μεγάλες επωνυμίες προτιμούν ένα σύμβολο χωρίς φόντο.
Η σωστή λύση είναι να επιλέγει το πρόγραμμα περιήγησης, και αυτό γίνεται χωρίς JavaScript και χωρίς εντοπισμό στην πλευρά του διακομιστή.
Πώς λειτουργεί το προσαρμοζόμενο SVG
Ένα αρχείο SVG είναι έγγραφο, όχι επίπεδη εικόνα: μπορεί να περιλαμβάνει ετικέτα style και επομένως media queries. Ένας κανόνας prefers-color-scheme: dark μέσα σε αυτήν επαναορίζει το χρώμα γεμίσματος των διαδρομών όταν χρησιμοποιείται σκοτεινό θέμα.
Στην πράξη, το SVG δηλώνει ένα προεπιλεγμένο χρώμα για το φωτεινό θέμα και έπειτα κανόνα που το αντικαθιστά στη σκοτεινή λειτουργία. Το πρόγραμμα περιήγησης εφαρμόζει το κατάλληλο κατά την απόδοση και ενημερώνει αμέσως την καρτέλα αν ο επισκέπτης αλλάξει θέμα.
Ο ίδιος μηχανισμός ξεπερνά την απλή αντιστροφή: μπορείτε να εμφανίζετε εντελώς διαφορετικό σχέδιο, για παράδειγμα σύμβολο χωρίς φόντο στη φωτεινή λειτουργία και γεμάτο σήμα στη σκοτεινή.
Δήλωση του SVG μαζί με το .ico
Δηλώστε το SVG με link rel="icon" type="image/svg+xml" href="/favicon.svg". Τα προγράμματα περιήγησης που το κατανοούν το προτιμούν, ενώ τα υπόλοιπα χρησιμοποιούν εφεδρικά το favicon.ico στη ρίζα.
Επομένως δεν αφαιρείτε τίποτα: τα δύο αρχεία συνυπάρχουν, καλύπτοντας διαφορετικούς πελάτες. Είναι προοδευτική βελτίωση εφαρμοσμένη σε εικονίδιο 32 pixel.
Μία προϋπόθεση: το SVG favicon πρέπει να είναι αυτοτελές. Εξωτερική γραμματοσειρά, απομακρυσμένη εικόνα ή script δεν φορτώνεται σε αυτή τη χρήση. Το κείμενο πρέπει να μετατρέπεται σε διανυσματικά περιγράμματα.
Τι δεν καλύπτει η σκοτεινή λειτουργία
Η σκοτεινή παραλλαγή εφαρμόζεται στο favicon του προγράμματος περιήγησης υπολογιστή. Δεν επηρεάζει το εικονίδιο Apple Touch, που είναι σταθερό αδιαφανές PNG, ούτε τα εικονίδια web manifest, που το Android αποδίδει στο δικό του φόντο.
Η υποστήριξη δεν είναι επίσης καθολική: τα προγράμματα βασισμένα σε Chromium και το Firefox διαβάζουν το προσαρμοζόμενο SVG, ενώ το Safari υστερεί ανάλογα με την έκδοση. Αυτό καλύπτεται, αφού η εφεδρική χρήση .ico είναι αυτόματη.
Σχεδιάστε λοιπόν το φωτεινό εικονίδιο ως προεπιλεγμένη περίπτωση που θα βλέπει κάθε επισκέπτης και αντιμετωπίστε τη σκοτεινή παραλλαγή ως βελτίωση για τα προγράμματα που τη διαβάζουν.
Πρωτογενείς πηγές
Συχνές ερωτήσεις
Μπορεί το favicon.ico να χειριστεί σκοτεινή λειτουργία;
Όχι. Το ICO αποθηκεύει σταθερές εικόνες raster χωρίς έννοια θέματος. Μόνο το SVG μπορεί να περιέχει media query, γι’ αυτό το σύγχρονο σύνολο περιλαμβάνει και τα δύο.
Χρειάζονται δύο SVG, ένα φωτεινό και ένα σκοτεινό;
Όχι, αρκεί ένα αρχείο. Οι δύο παραλλαγές βρίσκονται στο ίδιο SVG, διαχωρισμένες με media query prefers-color-scheme, αποφεύγοντας επιπλέον αίτημα και κώδικα εντοπισμού.
Πώς δοκιμάζετε την εμφάνιση σκοτεινού θέματος;
Αλλάξτε το θέμα του λειτουργικού συστήματος και επαναφορτώστε την καρτέλα. Στο εργαλείο, οι προεπισκοπήσεις φωτεινής και σκοτεινής καρτέλας βρίσκονται δίπλα δίπλα, γλιτώνοντας τις εναλλαγές.