Favicon UX: Τι κάνει ένα favicon εξαιρετικό

Ένα εξαιρετικό favicon είναι ένα απλό σήμα με υψηλή αντίθεση, συνήθως το λογότυπο-σύμβολο (logomark) της επωνυμίας σας ή ένα-δύο γράμματα, που παραμένει ευανάγνωστο στα 16x16 pixel τόσο σε φωτεινές όσο και σε σκούρες καρτέλες προγράμματος περιήγησης, ταιριάζει με την επωνυμία σας και αλλάζει σπάνια. Όλα τα υπόλοιπα σε αυτόν τον οδηγό (ευθυγράμμιση pixel, χρώμα, περιθώρια, διαφάνεια, μέγεθος αρχείου) υπηρετούν αυτούς τους στόχους: να κάνετε τον ιστότοπό σας άμεσα ανιχνεύσιμο ανάμεσα σε δεκάδες ανοιχτές καρτέλες.

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

1. Αναγνωσιμότητα στα 16x16

Το κλασικό μέγεθος favicon είναι 16x16 CSS pixel. Σε μια τυπική οθόνη αυτό σημαίνει κυριολεκτικά 256 pixel· σε οθόνη retina 2x το πρόγραμμα περιήγησης συνήθως επιλέγει εικόνα 32x32 για τον ίδιο χώρο. Ό,τι σχεδιάσετε πρέπει να αντέξει αυτή τη σμίκρυνση.

Κρατήστε το απλό

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

Ευθυγράμμιση στο πλέγμα pixel

Στα 16x16, μια γραμμή που βρίσκεται μισό pixel εκτός πλέγματος εξομαλύνεται (anti-aliasing) σε δύο σειρές pixel και φαίνεται γκρίζα και μαλακή. Τοποθετήστε τις άκρες σε ακέραια όρια pixel και χρησιμοποιήστε ζυγά πλάτη όπου το σχήμα είναι συμμετρικό. Αν εξάγετε από εργαλείο διανυσματικών γραφικών, ενεργοποιήστε το pixel snapping ή ελέγξτε το σμικρυμένο αποτέλεσμα και διορθώστε το με το χέρι.

Αποφύγετε τις λεπτές γραμμές

Οι γραμμές με πάχος μικρότερο από 2 pixel στα 16x16 (περίπου 12 τοις εκατό του πλάτους του εικονιδίου) τείνουν να εξαφανίζονται ή να τρεμοπαίζουν ανάμεσα στα μεγέθη. Παχύνετε τις γραμμές, αφαιρέστε εσωτερικές λεπτομέρειες και συγχωνεύστε τα μικρά κενά. Ένα έντονο, ελαφρώς βαρύ γλύφο διαβάζεται συνήθως καλύτερα από μια πιστή μινιατούρα ενός περίπλοκου λογοτύπου.

Χειροκίνητο hinting

Τα αρχεία ICO και PNG δεν διαθέτουν hinting τύπου γραμματοσειράς, οπότε το αντίστοιχο είναι η χειροκίνητη επεξεργασία pixel: προσαρμόζετε μεμονωμένα pixel ώστε οι καμπύλες, οι διαγώνιες και οι εσωτερικοί χώροι (οι «τρύπες» σε γράμματα όπως το «a» ή το «e») να παραμένουν καθαροί. Η αυτόματη σμίκρυνση είναι ένα καλό πρώτο προσχέδιο, αλλά λίγα pixel τοποθετημένα με το χέρι κάνουν συχνά τη διαφορά ανάμεσα σε μια κηλίδα και ένα αναγνωρίσιμο γράμμα. Ο επεξεργαστής pixel του MakeFav έχει φτιαχτεί γι' αυτό: ανοίξτε τον καμβά 16x16, διορθώστε τα προβληματικά pixel και εξαγάγετε.

2. Αντίθεση σε φωτεινές και σκούρες καρτέλες

Τα προγράμματα περιήγησης τρέχουν πλέον συχνά σε σκοτεινή λειτουργία και πολλοί χρήστες έχουν γραμμές καρτελών που διαφέρουν από το θέμα της σελίδας. Ένα σκούρο μπλε ναυτικό εικονίδιο με διαφανές φόντο μπορεί να είναι τέλειο σε λευκή καρτέλα και σχεδόν αόρατο σε σκούρο γκρι. Δοκιμάστε πάντα και τις δύο περιπτώσεις.

Πρακτικές λύσεις

• Προσθέστε σχήμα φόντου. Ένα συμπαγές στρογγυλεμένο τετράγωνο ή κύκλος σε χρώμα της επωνυμίας εγγυάται ότι το σήμα έχει τη δική του αντίθεση, ανεξάρτητα από την καρτέλα.
• Χρησιμοποιήστε λεπτό περίγραμμα ή άλω. Μια ανοιχτότερη άκρη 1px γύρω από ένα σκούρο γλύφο (ή το αντίστροφο) διατηρεί ορατή τη σιλουέτα και στα δύο θέματα, αλλά στα 16x16 πρέπει να παραμένει καθαρή, γι' αυτό δοκιμάστε την.
• Επιλέξτε μεσαίους τόνους χρωμάτων επωνυμίας. Χρώματα όπως το έντονο μπλε, το πορτοκαλί, το πράσινο ή το ματζέντα λειτουργούν συνήθως τόσο σε λευκές όσο και σε σχεδόν μαύρες επιφάνειες. Το πολύ ανοιχτό κίτρινο ή το πολύ σκούρο ναυτικό μπλε είναι τα επικίνδυνα.
• Χρησιμοποιήστε προσαρμοστικό SVG favicon. Ένα SVG μπορεί να περιλαμβάνει media query prefers-color-scheme, ώστε το εικονίδιο να αλλάζει με το θέμα του συστήματος.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Σημειώστε ότι το media query αντικατοπτρίζει το θέμα του λειτουργικού συστήματος ή του προγράμματος περιήγησης, το οποίο συνήθως ακολουθεί η γραμμή καρτελών, αλλά όχι πάντα. Η υποστήριξη των SVG favicon διαφέρει επίσης: το Chrome και το Firefox τα χειρίζονται, ενώ το Safari ιστορικά καθυστερεί, γι' αυτό κρατάτε πάντα εναλλακτικά PNG ή ICO. Ένα σχέδιο με συμπαγές φόντο είναι η πιο στιβαρή επιλογή, επειδή δεν χρειάζεται καμία λογική θέματος.

3. Αναγνωρισιμότητα και συνέπεια επωνυμίας

Χρησιμοποιήστε το logomark (το σύμβολο ή μονόγραμμα), όχι ολόκληρο το λογότυπο με το wordmark. Το κείμενο μέσα σε εικονίδιο 16x16 δεν διαβάζεται και ένα πλατύ οριζόντιο λογότυπο που συρρικνώνεται σε τετράγωνο αφήνει μια μικροσκοπική λωρίδα στη μέση.

• Αν η επωνυμία σας έχει σύμβολο, απλοποιήστε το για μικρά μεγέθη αντί να το σμικρύνετε απλώς. Μια «έκδοση favicon» με λιγότερες λεπτομέρειες είναι καθιερωμένη πρακτική.
• Αν η επωνυμία σας είναι μόνο wordmark, πάρτε το πρώτο γράμμα ή ένα χαρακτηριστικό ζεύγος γραμμάτων και στοιχειοθετήστε το στη γραμματοσειρά της επωνυμίας σε βαριά έκδοση.
• Διατηρήστε τα χρώματα συνεπή με το λογότυπο, το εικονίδιο εφαρμογής και τα avatar στα κοινωνικά δίκτυα, ώστε ο χρήστης να αναγνωρίζει την ίδια επωνυμία παντού.

Η ξεχωριστή εμφάνιση μετράει όσο και η πιστότητα. Κοιτάξτε μια σειρά καρτελών: αν άλλοι τρεις ιστότοποι χρησιμοποιούν επίσης έναν μπλε κύκλο, ο δικός σας δεν θα ξεχωρίζει. Ένα διαφορετικό σχήμα ή χρώμα είναι πιο χρήσιμο από μια απόλυτα πιστή σμίκρυνση.

4. Χρώμα: περιορισμένη, κορεσμένη παλέτα

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

Δανειστείτε λίγο από τη σκέψη της προσβασιμότητας. Το WCAG ζητά αντίθεση τουλάχιστον 3:1 για γραφικά αντικείμενα με νόημα (κριτήριο επιτυχίας 1.4.11, Non-text Contrast). Ένα favicon δεν καλύπτεται τυπικά, καθώς είναι στοιχείο του περιβάλλοντος του προγράμματος περιήγησης και όχι περιεχόμενο της σελίδας, αλλά το 3:1 ανάμεσα στο γλύφο και το φόντο του, καθώς και ανάμεσα στο εικονίδιο και την καρτέλα, είναι ένας υγιής στόχος. Αποφύγετε επίσης να μεταδίδετε οτιδήποτε μόνο μέσω απόχρωσης: οι κόκκινες και πράσινες παραλλαγές του ίδιου εικονιδίου δεν ξεχωρίζουν για πολλούς χρήστες με αχρωματοψία, γι' αυτό διαφοροποιήστε το σχήμα ή προσθέστε σύμβολο.

5. Σχήμα, περιθώρια και ζώνες ασφαλείας

Γεμίστε το τετράγωνο

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

Στρογγυλεμένο ή τετράγωνο;

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

Apple touch icons

Το iOS προσθέτει τις δικές του στρογγυλεμένες γωνίες στο apple-touch-icon (το συνηθισμένο μέγεθος είναι 180x180). Παρέχετε ένα τετράγωνο full-bleed χωρίς προ-στρογγυλεμένες γωνίες, διαφορετικά μπορεί να καταλήξετε με ορατές σκούρες ή λευκές λωρίδες στις γωνίες.

Maskable εικονίδια για Android και PWA

Τα maskable εικονίδια περικόπτονται από το λειτουργικό σύστημα σε κύκλους, squircle ή άλλα σχήματα. Κρατήστε όλο το σημαντικό περιεχόμενο μέσα στη ζώνη ασφαλείας: έναν κύκλο στο κέντρο του εικονιδίου με ακτίνα 40 τοις εκατό του πλάτους του εικονιδίου. Επεκτείνετε το χρώμα του φόντου μέχρι τις άκρες, ώστε κάθε μάσκα να φαίνεται σωστή. Μην επαναχρησιμοποιείτε ένα σφιχτό favicon καρτέλας από άκρη σε άκρη ως maskable εικονίδιο, επειδή η μάσκα θα το κόψει.

6. Διαφάνεια

Η διαφάνεια είναι εντάξει για τα favicon καρτελών και είναι αυτή που επιτρέπει σε ένα εικονίδιο μόνο με γλύφο να κάθεται καθαρά σε οποιοδήποτε χρώμα καρτέλας. Αποτελεί πρόβλημα για τα Apple touch icons: το iOS γεμίζει τις διαφανείς περιοχές με συμπαγές χρώμα (συνήθως μαύρο), κάτι που μπορεί να καταστρέψει το σχέδιο. Δώστε πάντα στο apple-touch-icon αδιαφανές φόντο στο χρώμα της επωνυμίας σας. Το ίδιο ισχύει για τα maskable εικονίδια και τις περισσότερες περιπτώσεις χρήσης στην αρχική οθόνη του Android, όπου το αδιαφανές φόντο δίνει προβλέψιμα αποτελέσματα.

7. Σταθερότητα: μην το αλλάζετε πολύ συχνά

Ένα favicon χτίζει αναγνώριση μέσω της επανάληψης. Η συχνή αλλαγή του αναγκάζει τους χρήστες να ξαναμάθουν ποια καρτέλα είναι η δική σας και προκαλεί επίσης τεχνικούς πονοκεφάλους. Τα προγράμματα περιήγησης αποθηκεύουν επιθετικά στην κρυφή μνήμη τα favicon και η Google τα ανακτά και τα αποθηκεύει ξεχωριστά από τις σελίδες σας, οπότε ένα νέο εικονίδιο μπορεί να χρειαστεί μέρες ή εβδομάδες για να εμφανιστεί στα αποτελέσματα αναζήτησης. Η Google ζητά επίσης σταθερό URL favicon, εικονίδιο με μέγεθος πολλαπλάσιο των 48 pixel (48x48, 96x96 κ.ο.κ.) και αρχείο που μπορεί να σαρώσει (όχι αποκλεισμένο από το robots.txt). Αντιμετωπίστε την αλλαγή favicon ως απόφαση επιπέδου rebranding και όχι ως εποχική διακόσμηση.

8. Καταστάσεις ειδοποίησης και δυναμικά favicon

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

• Χρησιμοποιήστε μικρό σήμα (μια τελεία ή έναν σύντομο αριθμό) σε μια γωνία, όχι πλήρη επανασχεδίαση. Το βασικό εικονίδιο πρέπει να παραμένει αναγνωρίσιμο.
• Κρατήστε το αραιό. Επιφυλάξτε τα σήματα για γεγονότα που απαιτούν ενέργεια του χρήστη. Μην κινείτε συνεχώς το εικονίδιο.
• Θέστε όριο στους αριθμούς. Στα 16x16 είναι ευανάγνωστο μόνο ένα ή δύο ψηφία· εμφανίστε «9+» ή μια απλή τελεία αντί για «137».
• Επαναφέρετε άμεσα όταν ο χρήστης χειριστεί το στοιχείο, και επαναφέρετε το προεπιλεγμένο εικονίδιο.
• Μην βασίζεστε μόνο στο χρώμα. Μια κόκκινη τελεία θα πρέπει να υποστηρίζεται και από τον τίτλο της σελίδας, όπως «(3) Εισερχόμενα», ώστε η πληροφορία να είναι διαθέσιμη σε όλους.

Τα δυναμικά favicon συνήθως σχεδιάζονται σε canvas και αντικαθίστανται ενημερώνοντας το href του στοιχείου link του εικονιδίου. Περιορίστε τη συχνότητα των ενημερώσεων (throttle), επειδή η συνεχής αλλαγή του favicon μπορεί να καταναλώνει CPU και να αποσπά τους χρήστες.

9. Απόδοση

Τα favicon είναι μικρά, αλλά παραμένουν αιτήματα που μπορούν να γίνουν άσχημα.

• Κρατήστε τα αρχεία μικρά. Ένα PNG favicon είναι συνήθως από μερικές εκατοντάδες byte έως λίγα kilobyte. Ένα απλό SVG μπορεί να είναι κάτω από 1 KB.
• Αποφύγετε τα φουσκωμένα αρχεία ICO. Ένα ICO πολλαπλών μεγεθών με εικόνες 16, 32 και 48 pixel είναι αρκετό. Η ενσωμάτωση εικόνας 256x256 πολλαπλασιάζει το μέγεθος του αρχείου χωρίς ορατό όφελος στις καρτέλες του προγράμματος περιήγησης.
• Ορίστε κεφαλίδες caching. Σερβίρετε τα εικονίδια με μεγάλη διάρκεια Cache-Control, για παράδειγμα public, max-age=31536000, immutable, και χρησιμοποιήστε όνομα αρχείου με έκδοση ή hash όταν τα αλλάζετε.
• Δηλώστε ρητά τα εικονίδια. Τα προγράμματα περιήγησης ζητούν από προεπιλογή το /favicon.ico, οπότε παρέχετε ένα ακόμη και αν δηλώνετε άλλα εικονίδια, για να αποφύγετε τον θόρυβο 404 στα αρχεία καταγραφής σας.
• Συμπιέστε. Περάστε τα PNG από βελτιστοποιητή χωρίς απώλειες και κάντε minify στα SVG.

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

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

10. Προσβασιμότητα

Ένα favicon δεν έχει εναλλακτικό κείμενο και οι αναγνώστες οθόνης δεν το ανακοινώνουν, οπότε τα παραδοσιακά εργαλεία προσβασιμότητας όπως τα χαρακτηριστικά alt δεν ισχύουν. Αυτό που έχει σημασία:

• Ο τίτλος της σελίδας μεταφέρει το νόημα. Γράψτε μοναδικά, περιγραφικά στοιχεία <title>. Μην βασίζεστε ποτέ στο εικονίδιο για να μεταδώσετε κατάσταση· αντικατοπτρίστε κάθε σήμα στον τίτλο.
• Ορατότητα για χρήστες με περιορισμένη όραση. Η υψηλή αντίθεση, το έντονο σχήμα και το μεγάλο σήμα βοηθούν τους χρήστες που σαρώνουν οπτικά τις καρτέλες.
• Ανεξαρτησία από το χρώμα. Φροντίστε τα σχήματα ή τα γράμματα να διακρίνουν τις καταστάσεις, όχι μόνο η απόχρωση.
• Μειωμένη όχληση. Αποφύγετε τα αναβοσβήνοντα ή κινούμενα favicon, που μπορεί να αποτελούν πρόβλημα για χρήστες ευαίσθητους στην κίνηση.

Λίστα ελέγχου Favicon UX

Λίστα ελέγχου δοκιμών

Μην εμπιστεύεστε τη μεγάλη προεπισκόπηση στο εργαλείο σχεδίασής σας. Δοκιμάστε το πραγματικό εικονίδιο σε πραγματικές συνθήκες:

1. Πολλαπλά προγράμματα περιήγησης. Ελέγξτε Chrome, Firefox, Safari και Edge, καθώς το καθένα επιλέγει εικονίδια και μεγέθη λίγο διαφορετικά.
2. Φωτεινή και σκοτεινή λειτουργία. Αλλάξτε το θέμα του ΛΣ και του προγράμματος περιήγησης και κοιτάξτε τη γραμμή καρτελών κάθε φορά.
3. Οθόνες retina και τυπικές. Ελέγξτε σε οθόνη 1x και σε οθόνη 2x ή 3x, και κάντε ζουμ στο πρόγραμμα περιήγησης.
4. Γραμμή σελιδοδεικτών. Προσθέστε τη σελίδα στους σελιδοδείκτες και δείτε αν το εικονίδιο παραμένει ευανάγνωστο δίπλα σε άλλους ιστότοπους.
5. Πολλές καρτέλες. Ανοίξτε 20 καρτέλες και δείτε αν βρίσκετε τη δική σας με μια ματιά.
6. Προεπισκόπηση SERP της Google. Ελέγξτε ένα αποτέλεσμα αναζήτησης σε κινητό αφού το εικονίδιο σαρωθεί ξανά. Θυμηθείτε ότι μπορεί να χρειαστεί χρόνος για την ενημέρωση.
7. Αρχική οθόνη. Προσθέστε τον ιστότοπο στις αρχικές οθόνες iOS και Android και επιβεβαιώστε ότι το εικονίδιο δεν κόβεται, δεν έχει μαύρες γωνίες και δεν είναι υπερβολικά μικρό μέσα στη μάσκα του.
8. Τεχνικός έλεγχος. Περάστε το domain σας από τον ελεγκτή favicon του MakeFav για να επιβεβαιώσετε ότι τα αρχεία υπάρχουν, επιστρέφουν κατάσταση 200, έχουν τα σωστά μεγέθη και δηλώνονται σωστά στο HTML σας.

Μια πρακτική ροή εργασίας

1. Ξεκινήστε από το logomark σας και απλοποιήστε το σε ένα σχήμα ή γράμμα.
2. Δημιουργήστε τετράγωνο καμβά με συμπαγές ή διαμορφωμένο φόντο που λειτουργεί και στα δύο θέματα.
3. Εξαγάγετε τα μεγέθη 32x32 και 16x16 και βελτιώστε τη μικρή έκδοση με το χέρι στον επεξεργαστή pixel.
4. Δημιουργήστε το πλήρες σετ (ICO, PNG, apple-touch-icon, εικονίδια manifest) με τη γεννήτρια.
5. Προσθέστε τα link tags, ορίστε κεφαλίδες cache, κάντε deploy και επαληθεύστε με τον ελεγκτή.

Ένα favicon είναι ένα από τα μικρότερα στοιχεία του ιστότοπού σας και ένα από τα πιο συχνά ορατά. Λίγες προσεκτικές αποφάσεις για την αντίθεση, την απλότητα και τη συνέπεια το κάνουν να λειτουργεί σε κάθε καρτέλα, θέμα και συσκευή.

Συχνές ερωτήσεις

Τι μέγεθος πρέπει να έχει ένα favicon;

Σχεδιάστε για 16x16 και 32x32 για τις καρτέλες του προγράμματος περιήγησης (το πρόγραμμα περιήγησης χρησιμοποιεί 32x32 σε οθόνες υψηλής πυκνότητας), παρέχετε ένα apple-touch-icon 180x180 για το iOS, και PNG 192x192 και 512x512 για Android και PWA. Για τα αποτελέσματα αναζήτησης της Google, χρησιμοποιήστε τετράγωνο εικονίδιο με μέγεθος πολλαπλάσιο των 48 pixel, όπως 48x48 ή 96x96. Μια πηγή SVG κλιμακώνεται σε όλα αυτά.

Πρέπει να χρησιμοποιήσω ολόκληρο το λογότυπό μου ως favicon;

Συνήθως όχι. Τα πλήρη λογότυπα με wordmark είναι υπερβολικά λεπτομερή και υπερβολικά πλατιά για ένα τετράγωνο εικονίδιο 16x16. Χρησιμοποιήστε το logomark ή ένα μονόγραμμα ενός ή δύο γραμμάτων και απλοποιήστε το ώστε να παραμένει αναγνωρίσιμο όταν είναι μικροσκοπικό.

Πώς κάνω ένα favicon να λειτουργεί στη σκοτεινή λειτουργία;

Η ασφαλέστερη προσέγγιση είναι να δώσετε στο εικονίδιο το δικό του σχήμα συμπαγούς φόντου ή ένα αντιθετικό περίγραμμα, ώστε να μην εξαρτάται από το χρώμα της καρτέλας. Εναλλακτικά, χρησιμοποιήστε SVG favicon με media query prefers-color-scheme για εναλλαγή χρωμάτων και κρατήστε εναλλακτικά PNG ή ICO για προγράμματα περιήγησης που δεν υποστηρίζουν εικονίδια SVG. Δοκιμάζετε πάντα και στα δύο θέματα, φωτεινό και σκούρο.

Γιατί δεν εμφανίζεται το νέο μου favicon;

Τα προγράμματα περιήγησης αποθηκεύουν τα favicon στην κρυφή μνήμη για μεγάλο διάστημα και η Google αποθηκεύει δικό της αντίγραφο, το οποίο ανανεώνει με δικό της πρόγραμμα, συχνά μέσα σε μέρες ή εβδομάδες. Κάντε hard refresh στη σελίδα, καθαρίστε την κρυφή μνήμη του προγράμματος περιήγησης, χρησιμοποιήστε νέο όνομα αρχείου με έκδοση και βεβαιωθείτε ότι τα link tags και ένα /favicon.ico στη ρίζα δείχνουν στο σωστό αρχείο. Μπορείτε να επαληθεύσετε τη ρύθμιση με τον ελεγκτή του MakeFav.

Είναι καλή ιδέα να εμφανίζω σήματα ειδοποίησης σε ένα favicon;

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