Τι είναι το favicon και γιατί έχει σημασία για την ιστοσελίδα σας;

Το favicon (συντομογραφία του «favorite icon», δηλαδή «αγαπημένο εικονίδιο») είναι η μικρή τετράγωνη εικόνα που εκπροσωπεί έναν ιστότοπο στις καρτέλες του προγράμματος περιήγησης, στους σελιδοδείκτες, στα ιστορικά περιήγησης, στα αποτελέσματα αναζήτησης της Google, στις αρχικές οθόνες των κινητών και στις εγκατεστημένες εφαρμογές ιστού. Έχει σημασία γιατί δίνει στον ιστότοπό σας ένα αναγνωρίσιμο «πρόσωπο» με την πρώτη ματιά, διευκολύνει την εύρεσή του ανάμεσα σε πολλές ανοιχτές καρτέλες, δείχνει ότι ο ιστότοπος είναι επαγγελματικός και αξιόπιστος και πλέον εμφανίζεται δίπλα στο όνομα του ιστότοπού σας στα αποτελέσματα της Google. Χωρίς favicon, οι επισκέπτες βλέπουν ένα γενικό εικονίδιο υδρογείου ή κενής σελίδας, ενώ ο διακομιστής σας γεμίζει τα αρχεία καταγραφής με σφάλματα 404. Μπορείτε να δημιουργήσετε ένα πλήρες σετ favicon δωρεάν με τη γεννήτρια favicon MakeFav.

Τι είναι το favicon;

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

Τεχνικά, το favicon είναι απλώς ένα αρχείο εικόνας που αναφέρεται στον κώδικα HTML σας (ή βρίσκεται σε μια προεπιλεγμένη θέση) και το οποίο οι user agents κατεβάζουν χωριστά από το περιεχόμενο της σελίδας. Σήμερα το «favicon» σπάνια είναι ένα μόνο αρχείο. Ένας σύγχρονος ιστότοπος συνήθως περιλαμβάνει πολλές εκδοχές του ίδιου εικονιδίου, ώστε τα προγράμματα περιήγησης, οι μηχανές αναζήτησης, το iOS και το Android να λαμβάνουν τη μορφή και το μέγεθος που τους ταιριάζει.

Σύντομη ιστορία του favicon

Το favicon ανάγεται στον Μάρτιο του 1999, όταν η Microsoft κυκλοφόρησε τον Internet Explorer 5. Το πρόγραμμα περιήγησης επέτρεπε στους χρήστες να αποθηκεύουν σελίδες σε μια λίστα «Αγαπημένα» και αναζητούσε επίσης ένα μικρό αρχείο εικονιδίου με όνομα favicon.ico στη ρίζα του ιστότοπου, για να το εμφανίσει δίπλα σε κάθε αποθηκευμένη καταχώριση. Η ιδέα ήταν απλή: αν ένας ιστότοπος παρείχε το /favicon.ico, το εικονίδιο θα εμφανιζόταν δίπλα στον σελιδοδείκτη.

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

• Αρχές της δεκαετίας του 2000: το στοιχείο <link rel="icon"> επέτρεψε στους ιστότοπους να δείχνουν σε εικονίδιο σε οποιοδήποτε URL αντί μόνο στη ρίζα, και τα αρχεία PNG και GIF άρχισαν να γίνονται δεκτά από προγράμματα περιήγησης εκτός του IE.
• Δεκαετία του 2010: η Apple εισήγαγε το apple-touch-icon για τις αρχικές οθόνες του iOS, ενώ το Android και τα Windows πρόσθεσαν τις δικές τους συμβάσεις, όπως τα εικονίδια manifest και οι εικόνες πλακιδίων.
• Σήμερα: τα favicon SVG, τα web app manifest, τα εικονίδια που προσαρμόζονται στη σκοτεινή λειτουργία και οι απαιτήσεις της Google για τα favicon στα αποτελέσματα αναζήτησης έχουν κάνει το favicon ένα μικρό αλλά ουσιαστικό μέρος της τεχνικής διαμόρφωσης ενός ιστότοπου.

Πού εμφανίζονται σήμερα τα favicon

Το favicon σας εμφανίζεται σε πολύ περισσότερα σημεία από την καρτέλα του προγράμματος περιήγησης. Τα κυριότερα είναι:

• Καρτέλες προγράμματος περιήγησης: το πιο ορατό σημείο, όπου το εικονίδιο είναι συχνά το μόνο που βλέπετε όταν υπάρχουν πολλές ανοιχτές καρτέλες.
• Σελιδοδείκτες και αγαπημένα: το εικονίδιο βρίσκεται δίπλα στον τίτλο της σελίδας στις γραμμές και στα μενού σελιδοδεικτών.
• Ιστορικό και πιο δημοφιλείς σελίδες: τα προγράμματα περιήγησης εμφανίζουν favicon στις λίστες ιστορικού και στις σελίδες νέας καρτέλας.
• Αποτελέσματα αναζήτησης Google: τόσο σε κινητά όσο και σε υπολογιστές, η Google εμφανίζει το favicon ενός ιστότοπου δίπλα στο όνομα και το URL του.
• Αρχικές οθόνες: όταν ένας επισκέπτης προσθέτει τον ιστότοπό σας στην αρχική οθόνη σε iOS ή Android, το touch icon ή το εικονίδιο του manifest γίνεται η συντόμευση τύπου εφαρμογής.
• Εγκατεστημένες PWA: μια προοδευτική εφαρμογή ιστού (PWA) χρησιμοποιεί τα εικονίδια του web app manifest για το εικονίδιο εκκίνησης, την οθόνη εκκίνησης (splash screen) και την εναλλαγή εργασιών.
• Πλακίδια Windows και καρφιτσωμένοι ιστότοποι: παλαιότερες εκδόσεις των Windows και του Edge χρησιμοποιούσαν εικόνες πλακιδίων που ορίζονταν για καρφιτσωμένους ιστότοπους· οι σύγχρονες επαναχρησιμοποιούν κυρίως τα βασικά σας εικονίδια.
• Προεπισκοπήσεις συνδέσμων σε ορισμένες εφαρμογές: ορισμένα εργαλεία συνομιλίας και παραγωγικότητας (το Slack είναι γνωστό παράδειγμα) εμφανίζουν το favicon ενός ιστότοπου δίπλα σε έναν αναπτυγμένο σύνδεσμο. Οι περισσότερες προεπισκοπήσεις βασίζονται κυρίως σε εικόνες Open Graph, αλλά το favicon συχνά παρέχει το μικρό σήμα της επωνυμίας.

Γιατί το favicon έχει σημασία για την ιστοσελίδα σας

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

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

Εμπιστοσύνη και αξιοπιστία

Η απουσία favicon κάνει έναν ιστότοπο να δείχνει ημιτελής. Ένα καθαρό, σωστά αποδοσμένο εικονίδιο αποτελεί ένα μικρό σήμα ότι κάποιος νοιάζεται για τις λεπτομέρειες, κάτι που ενισχύει την εντύπωση ότι ο ιστότοπος είναι νόμιμος. Δεν αποτελεί λειτουργία ασφαλείας και οι ιστότοποι ηλεκτρονικού ψαρέματος (phishing) μπορούν να αντιγράψουν εικονίδια, αλλά ένα κενό προεπιλεγμένο εικονίδιο σπάνια βοηθά μια επιχείρηση να φαίνεται εδραιωμένη.

Ποσοστό κλικ στα αποτελέσματα αναζήτησης

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

Ευχρηστία με πολλές ανοιχτές καρτέλες

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

Επαγγελματική εντύπωση

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

Προσβασιμότητα στην εύρεση καρτελών

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

Τι συμβαίνει αν δεν έχετε favicon

Τα προγράμματα περιήγησης ζητούν αυτόματα το /favicon.ico από τη ρίζα του τομέα σας, ακόμη κι αν ο κώδικας HTML δεν το αναφέρει. Αν το αρχείο δεν υπάρχει, συμβαίνουν διάφορα πράγματα:

• Γενικό εικονίδιο: οι επισκέπτες βλέπουν ένα προεπιλεγμένο εικονίδιο υδρογείου, εγγράφου ή κενό στην καρτέλα και στους σελιδοδείκτες, κάτι που φαίνεται ανώνυμο.
• Σφάλματα 404 στα αρχεία καταγραφής: κάθε πρόγραμμα περιήγησης που ζητά το αρχείο δημιουργεί ένα αποτυχημένο αίτημα. Σε ιστότοπους με μεγάλη κίνηση αυτό προσθέτει θόρυβο στα αρχεία καταγραφής πρόσβασης, στην παρακολούθηση σφαλμάτων και στα analytics και μπορεί να κρύψει πραγματικά προβλήματα.
• Κανένα εικονίδιο στα αποτελέσματα Google: χωρίς ένα έγκυρο favicon προσβάσιμο από τους crawlers, η Google εμφανίζει το προεπιλεγμένο σύμβολο κράτησης θέσης δίπλα στην καταχώρισή σας.
• Άσκοπα αιτήματα: τα προγράμματα περιήγησης μπορεί να επαναλαμβάνουν το αίτημα, προσθέτοντας μικρό αλλά άσκοπο φορτίο στον διακομιστή σας.

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

Οι μορφές favicon εξηγούνται

Καμία μορφή δεν καλύπτει όλες τις πλατφόρμες, γι' αυτό οι περισσότεροι ιστότοποι χρησιμοποιούν ένα μικρό σύνολο αρχείων.

Οι παλαιές εικόνες πλακιδίων των Windows (που ρυθμίζονται μέσω του browserconfig.xml) χρειάζονταν για τον Internet Explorer 11 και το παλιό Edge. Σπάνια είναι απαραίτητες πλέον, εκτός αν πρέπει να υποστηρίξετε αυτά τα περιβάλλοντα.

Οδηγίες της Google για τα favicon στα αποτελέσματα αναζήτησης

Αν θέλετε το εικονίδιό σας να εμφανίζεται στην Αναζήτηση Google, ακολουθήστε τις δημοσιευμένες απαιτήσεις της Google:

• Μέγεθος: η εικόνα πρέπει να είναι τετράγωνη (1:1) και πολλαπλάσιο των 48 pixel, όπως 48x48, 96x96 ή 144x144. Στη συνέχεια η Google τη μικραίνει σε 16x16 για την εμφάνιση. Το ελάχιστο υποστηριζόμενο μέγεθος είναι 8x8, αλλά συνιστάται 48x48 ή μεγαλύτερο.
• Μορφές: λειτουργεί οποιαδήποτε μορφή υποστηρίζεται από τα προγράμματα περιήγησης, συμπεριλαμβανομένων των ICO, PNG και SVG.
• Σταθερό URL: μην αλλάζετε συχνά το URL του favicon. Μια σταθερή διεύθυνση βοηθά την Google να διατηρεί το εικονίδιό σας ενημερωμένο.
• Δυνατότητα ανίχνευσης: τόσο το αρχείο favicon όσο και η αρχική σας σελίδα πρέπει να είναι προσβάσιμα στο Googlebot. Μην τα μπλοκάρετε στο robots.txt ούτε πίσω από σύνδεση χρήστη.
• Μία δήλωση ανά ιστότοπο: το εικονίδιο συνδέεται με την αρχική σελίδα του ιστότοπου, γι' αυτό τοποθετήστε την ετικέτα <link> στο head της αρχικής σας σελίδας.
• Αντιπροσωπευτικό και κατάλληλο: το εικονίδιο πρέπει να αντικατοπτρίζει την επωνυμία σας και η Google μπορεί να αντικαταστήσει με το προεπιλεγμένο ένα εικονίδιο που είναι προσβλητικό ή παραπλανητικό.

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

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

Δεν χρειάζεστε λογισμικό σχεδίασης ούτε γραμμή εντολών. Η γεννήτρια MakeFav μετατρέπει μία εικόνα-πηγή στα αρχεία που περιγράφονται παραπάνω.

1. Προετοιμάστε το σχέδιό σας. Χρησιμοποιήστε ένα τετράγωνο λογότυπο ή σύμβολο στα 512 x 512 px ή μεγαλύτερο. Τα απλά σχήματα λειτουργούν καλύτερα, επειδή το εικονίδιο θα φαίνεται στα 16 px.
2. Ανεβάστε το στην αρχική σελίδα του MakeFav ή ανοίξτε τον επεξεργαστή για να προσαρμόσετε την εικόνα, το φόντο και το περιθώριο πριν από την εξαγωγή.
3. Κάντε προεπισκόπηση του αποτελέσματος σε μικρά μεγέθη και σε ανοιχτά και σκούρα φόντα, για να βεβαιωθείτε ότι παραμένει ευανάγνωστο.
4. Κατεβάστε το πακέτο. Περιέχει το ICO, τα μεγέθη PNG, το Apple touch icon, τα εικονίδια manifest και το απόσπασμα HTML για επικόλληση.
5. Ανεβάστε τα αρχεία στη ρίζα του ιστότοπού σας, ώστε να είναι προσβάσιμα σε διαδρομές όπως το /favicon.ico.
6. Προσθέστε το HTML στο <head> κάθε σελίδας ή στο κοινό σας layout ή template.
7. Επαληθεύστε με τον έλεγχο favicon και έπειτα καθαρίστε την προσωρινή μνήμη του προγράμματος περιήγησης και ανανεώστε τη σελίδα για να δείτε το νέο εικονίδιο.

Παράδειγμα αποσπάσματος HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Το χαρακτηριστικό sizes="48x48" στον σύνδεσμο του ICO βοηθά τα προγράμματα περιήγησης να προτιμούν το SVG όταν το υποστηρίζουν, διατηρώντας το ICO ως εναλλακτική. Το PNG των 96 px ικανοποιεί τον κανόνα της Google για πολλαπλάσια του 48.

Παράδειγμα web app manifest

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Αν εργάζεστε με build pipelines ή θέλετε να αυτοματοποιήσετε τη δημιουργία εικονιδίων, δείτε τους πόρους για προγραμματιστές.

Συμβουλές σχεδίασης για ένα favicon που λειτουργεί

• Κρατήστε το απλό. Ένα σχήμα, ένα γράμμα ή ένα έντονο μονόγραμμα υπερτερεί ενός λεπτομερούς λογοτύπου που γίνεται κουρελού στα 16 px.
• Χρησιμοποιήστε ισχυρή αντίθεση. Βεβαιωθείτε ότι το εικονίδιο είναι ορατό τόσο σε ανοιχτά όσο και σε σκούρα θέματα προγράμματος περιήγησης. Ένα έγχρωμο πλακίδιο φόντου βοηθά.
• Αποφύγετε το κείμενο. Ένα μόνο αρχικό γράμμα είναι εντάξει· οι λέξεις είναι δυσανάγνωστες σε αυτό το μέγεθος.
• Αφήστε λίγο περιθώριο για εικονίδια maskable και με στρογγυλεμένες γωνίες, ώστε να μην κοπεί κάτι σημαντικό.
• Μείνετε συνεπείς με το λογότυπο και τα χρώματα της επωνυμίας σας, ώστε το favicon να ενισχύει την αναγνωρισιμότητα.
• Δοκιμάστε σε πραγματικές συσκευές και ελέγξτε πώς φαίνεται σε μια καρτέλα, σε έναν σελιδοδείκτη και σε ένα αποτέλεσμα Google.

Συνηθισμένα προβλήματα με τα favicon

Αν το εικονίδιό σας δεν εμφανίζεται, οι συνήθεις αιτίες είναι η προσωρινή αποθήκευση (cache), οι λανθασμένες διαδρομές και τα μπλοκαρισμένα αρχεία. Τα προγράμματα περιήγησης αποθηκεύουν επιθετικά τα favicon στην cache, οπότε μια σκληρή ανανέωση ή ένα νέο ιδιωτικό παράθυρο συχνά αρκεί για να δείτε τις ενημερώσεις. Ελέγξτε ότι το URL του αρχείου επιστρέφει κατάσταση 200 και τον σωστό τύπο περιεχομένου και ότι η ετικέτα <link> βρίσκεται στο <head>. Για την αναζήτηση, βεβαιωθείτε ότι το robots.txt δεν μπλοκάρει το εικονίδιο ή την αρχική σελίδα. Ο έλεγχος του MakeFav μπορεί να σας βοηθήσει να εντοπίσετε γρήγορα αυτά τα προβλήματα.

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

Τι σημαίνει favicon;

Το favicon είναι συντομογραφία του «favorite icon» (αγαπημένο εικονίδιο). Το όνομα προέρχεται από τον Internet Explorer 5, ο οποίος το 1999 χρησιμοποίησε για πρώτη φορά ένα μικρό αρχείο εικονιδίου για να διακοσμήσει τις καταχωρίσεις της λίστας Αγαπημένων του προγράμματος περιήγησης. Ο όρος παρέμεινε, παρότι το εικονίδιο εμφανίζεται πλέον σε πολλά άλλα σημεία.

Βοηθά το favicon στο SEO;

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

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

Για την Αναζήτηση Google, χρησιμοποιήστε μια τετράγωνη εικόνα που είναι πολλαπλάσιο των 48 pixel, όπως 48x48 ή 96x96. Για ευρύτερη κάλυψη, παρέχετε επίσης ένα αρχείο ICO, ένα Apple touch icon 180x180 και εικονίδια manifest 192x192 και 512x512. Ένα SVG είναι καλή προσθήκη για κλιμάκωση.

Χρειάζομαι ακόμη το favicon.ico αν χρησιμοποιώ PNG ή SVG;

Εξακολουθεί να είναι καλή ιδέα. Τα προγράμματα περιήγησης και ορισμένα εργαλεία ζητούν από προεπιλογή το /favicon.ico και το παλαιότερο λογισμικό βασίζεται σε αυτό. Η διατήρηση ενός αρχείου ICO στη ρίζα του ιστότοπου αποτρέπει τα σφάλματα 404 και σας δίνει μια ασφαλή εναλλακτική όταν δεν υποστηρίζεται το SVG ή το PNG.

Γιατί το favicon μου δεν ενημερώνεται;

Τα προγράμματα περιήγησης και οι μηχανές αναζήτησης αποθηκεύουν τα favicon στην cache για μεγάλο διάστημα. Δοκιμάστε σκληρή ανανέωση, ιδιωτικό παράθυρο ή εκκαθάριση της cache. Βεβαιωθείτε ότι η διαδρομή του αρχείου είναι σωστή και ότι το νέο αρχείο εξυπηρετείται. Στην Αναζήτηση Google, ένα εικονίδιο που άλλαξε μπορεί να χρειαστεί μέρες ή εβδομάδες για να ανιχνευθεί ξανά και να ενημερωθεί.