Τι είναι το favicon και γιατί το χρειάζεται η ιστοσελίδα σας
Το favicon είναι το μικρό εικονίδιο της ιστοσελίδας σας. Είναι μικρό σε μέγεθος, αλλά το βλέπουν οι επισκέπτες σε κάθε καρτέλα, σελιδοδείκτη και αποτέλεσμα αναζήτησης.
Παρακάτω θα δείτε τι ακριβώς είναι, πού εμφανίζεται, γιατί μετράει για το brand και την αναζήτηση, ποια μεγέθη και μορφές χρειάζεστε και πώς το προσθέτετε στο WordPress ή σε custom site.
Το favicon είναι το εικονίδιο που αντιπροσωπεύει την ιστοσελίδα σας στις καρτέλες του browser, στους σελιδοδείκτες και δίπλα στο site σας στα αποτελέσματα της Google. Χρειάζεται τετράγωνη εικόνα, ιδανικά μεγαλύτερη από 48x48 pixel, και μια ετικέτα link στην αρχική σελίδα. Στο WordPress το ορίζετε ως εικονίδιο ιστότοπου, χωρίς κώδικα.
Θέλετε μια ιστοσελίδα σωστή σε κάθε λεπτομέρεια;
Από το favicon μέχρι τη φόρμα επικοινωνίας, πείτε μας τι χρειάζεται η επιχείρησή σας και θα σας προτείνουμε την ιστοσελίδα που της ταιριάζει.
Τι είναι το favicon
Το favicon, από το «favorite icon», είναι ένα εικονίδιο που συνδέεται με μια ιστοσελίδα. Αρχικά χρησιμοποιήθηκε για τους σελιδοδείκτες και σήμερα είναι η μικρότερη μορφή της οπτικής ταυτότητας ενός site.
Τεχνικά, είναι ένα αρχείο εικόνας που δηλώνεται στον κώδικα της σελίδας με την ετικέτα <link rel="icon">. Ο browser διαβάζει αυτή την ετικέτα και δείχνει το εικονίδιο. Στο WordPress το ίδιο πράγμα λέγεται εικονίδιο ιστότοπου (Site Icon).
Ένα καλό favicon έχει τρία χαρακτηριστικά. Είναι απλό, ώστε να διαβάζεται σε πολύ μικρό μέγεθος. Είναι αναγνωρίσιμο, γιατί χρησιμοποιεί το σύμβολο ή τα χρώματα που ήδη βλέπει ο πελάτης στο λογότυπο και στο κατάστημα. Και είναι ίδιο παντού, από την καρτέλα του browser μέχρι το εικονίδιο στο κινητό.
Πού εμφανίζεται
Το favicon εμφανίζεται σε περισσότερα σημεία απ' όσα φαντάζεται κανείς:
- Καρτέλες του browser. Όταν κάποιος έχει πολλές καρτέλες ανοιχτές, το εικονίδιο είναι συχνά το μόνο που ξεχωρίζει την ιστοσελίδα σας.
- Σελιδοδείκτες και ιστορικό. Δίπλα στο όνομα της σελίδας που αποθήκευσε ο επισκέπτης.
- Αποτελέσματα της Google. Δίπλα στο όνομα του site σας, όταν τηρούνται οι οδηγίες της Google.
- Αρχική οθόνη του κινητού. Όταν ο χρήστης προσθέτει το site στην αρχική οθόνη, τα εικονίδια της εφαρμογής ιστού ορίζονται στο web app manifest.
Επειδή εμφανίζεται σε τόσα διαφορετικά σημεία, το favicon δουλεύει σαν μικρή υπογραφή της επιχείρησης. Ο επισκέπτης που επιστρέφει βρίσκει πιο εύκολα την καρτέλα ή τον σελιδοδείκτη σας, χωρίς να διαβάσει τον τίτλο.
Γιατί μετράει για το brand και την αναζήτηση
Το favicon βοηθά τον χρήστη να βρει γρήγορα την ιστοσελίδα σας ανάμεσα σε άλλες. Γι' αυτό η Google ζητά να αντιπροσωπεύει οπτικά το brand του site, ώστε να το αναγνωρίζουν όσοι κοιτάζουν τα αποτελέσματα αναζήτησης.
Ένα site χωρίς favicon δείχνει στη θέση του ένα γενικό εικονίδιο του browser και φαίνεται ημιτελές. Είναι μία από τις λεπτομέρειες που αξίζει να υπάρχουν από την αρχή, μαζί με όσα περιγράφει ο οδηγός για το τι χρειάζεται για την κατασκευή ιστοσελίδας. Αν σχεδιάζετε τώρα το site σας, η κατασκευή ιστοσελίδων από ομάδα που φροντίζει αυτές τις λεπτομέρειες γλιτώνει διορθώσεις αργότερα.
Συμβουλή: μην βάλετε ολόκληρο το λογότυπο με το όνομα της εταιρείας. Στο μέγεθος της καρτέλας τα γράμματα δεν διαβάζονται. Κρατήστε μόνο το σύμβολο ή το αρχικό γράμμα.
Μεγέθη και μορφές αρχείου
Το favicon πρέπει πρώτα απ' όλα να είναι τετράγωνο. Μετά, αρκετά μεγάλο ώστε να φαίνεται καθαρό σε οθόνες υψηλής ανάλυσης:
- Για τη Google: τουλάχιστον 8x8 pixel, με σύσταση να είναι μεγαλύτερο από 48x48 pixel.
- Για το WordPress: το εικονίδιο ιστότοπου πρέπει να είναι τουλάχιστον 512x512 pixel και η προτεινόμενη μορφή είναι PNG.
- Μορφή αρχείου: η Google υποστηρίζει κάθε έγκυρη μορφή favicon, όπως ICO, PNG και SVG.
- Σταθερή διεύθυνση: το URL του αρχείου δεν πρέπει να αλλάζει συχνά.
Η Google δείχνει ένα favicon ανά hostname. Ένα subdomain μπορεί να έχει δικό του εικονίδιο, ενώ οι υποφάκελοι παίρνουν αυτό του domain. Επίσης, η Google βάζει προεπιλεγμένο εικονίδιο στη θέση όσων θεωρεί ακατάλληλα.
Πριν ανεβάσετε το αρχείο, δοκιμάστε το σε ανοιχτό και σε σκούρο φόντο. Πολλοί χρήστες χρησιμοποιούν σκοτεινό θέμα στον browser, οπότε ένα μαύρο σύμβολο χωρίς περίγραμμα μπορεί να χαθεί. Ένα διάφανο φόντο με καθαρό, έντονο σχήμα συνήθως λύνει το πρόβλημα.
Πώς το προσθέτετε
Ο τρόπος εξαρτάται από το πώς είναι φτιαγμένη η ιστοσελίδα. Αν δεν είστε σίγουροι, δείτε τη διαφορά ανάμεσα σε WordPress και custom site.
- Ετοιμάστε την εικόνα. Φτιάξτε τετράγωνο εικονίδιο από το σύμβολο του brand σας, αρκετά μεγάλο για να μικραίνει χωρίς να χάνει καθαρότητα.
- Ανεβάστε το αρχείο. Στο WordPress, από την έκδοση 6.5 και μετά, πηγαίνετε στις Ρυθμίσεις, Γενικά, και επιλέγετε εικονίδιο ιστότοπου. Σε παλιότερες εκδόσεις η ρύθμιση είναι στην Εμφάνιση, Προσαρμογή. Σε custom site ανεβάστε το αρχείο σε σταθερή διεύθυνση.
- Δηλώστε το στην αρχική σελίδα. Σε custom site προσθέστε στην κεφαλίδα της αρχικής την ετικέτα
<link rel="icon" href="/favicon.png">με τη δική σας διαδρομή. Στο WordPress αυτό γίνεται αυτόματα. - Ελέγξτε το αποτέλεσμα. Ανοίξτε το site σε νέα καρτέλα και ζητήστε από τη Google νέα ευρετηρίαση της αρχικής με το εργαλείο Επιθεώρησης URL.
Η Google ενημερώνει το favicon όταν ξαναδιαβάσει την αρχική σελίδα, κάτι που μπορεί να πάρει μερικές μέρες ή περισσότερο. Ακόμη κι αν τηρούνται όλες οι οδηγίες, δεν είναι εγγυημένο ότι θα εμφανιστεί. Η Google πρέπει να μπορεί να διαβάσει τόσο την αρχική σελίδα όσο και το ίδιο το αρχείο του εικονιδίου, οπότε μην το αποκλείετε από την πρόσβαση των crawlers. Βεβαιωθείτε επίσης ότι το εικονίδιο φαίνεται καθαρό σε κινητό και tablet, όπως κάθε στοιχείο ενός responsive design.
Συχνές ερωτήσεις
Τι μέγεθος πρέπει να έχει το favicon;
Το favicon πρέπει να είναι τετράγωνο. Η Google ζητά τουλάχιστον 8x8 pixel και προτείνει μεγαλύτερο από 48x48, ενώ το WordPress θέλει για το εικονίδιο ιστότοπου τουλάχιστον 512x512 pixel, ώστε να βγάζει από αυτό τα μικρότερα μεγέθη.
Τι είναι το favicon.ico;
Είναι το εικονίδιο της ιστοσελίδας σε μορφή αρχείου ICO. Δεν είναι η μόνη επιλογή: η Google υποστηρίζει κάθε έγκυρη μορφή favicon, ενώ το WordPress προτείνει PNG για το εικονίδιο ιστότοπου.
Πώς φτιάχνω favicon;
Ξεκινήστε από το σύμβολο ή το αρχικό γράμμα του λογοτύπου σας, σε τετράγωνο καμβά και με λίγα, έντονα στοιχεία. Μπορείτε να το φτιάξετε σε πρόγραμμα σχεδίασης ή με ένα εργαλείο δημιουργίας favicon και μετά το ανεβάζετε στην ιστοσελίδα.
Πώς βάζω favicon στο WordPress;
Από την έκδοση 6.5 και μετά, πηγαίνετε στις Ρυθμίσεις, Γενικά, και επιλέγετε εικονίδιο ιστότοπου. Σε παλιότερες εκδόσεις η ρύθμιση βρίσκεται στην Εμφάνιση, Προσαρμογή. Η εικόνα πρέπει να είναι τετράγωνη και τουλάχιστον 512x512 pixel.
Γιατί δεν εμφανίζεται το favicon στη Google;
Συνήθως δεν τηρούνται οι οδηγίες της Google: λείπει η ετικέτα link από την αρχική σελίδα, η εικόνα δεν είναι τετράγωνη, η διεύθυνση του αρχείου αλλάζει ή το αρχείο δεν είναι προσβάσιμο στους crawlers. Οι αλλαγές θέλουν μερικές μέρες ή και περισσότερο, και η εμφάνιση του εικονιδίου δεν είναι εγγυημένη.
Τι είναι το site icon;
Είναι ο όρος του WordPress για το favicon. Με τη λειτουργία Site Icon δεν χρειάζεται να φτιάξετε μόνοι σας αρχείο ICO ούτε να αλλάξετε τα αρχεία του θέματος.
ΠΗΓΕΣ
- Google Search Central, Define a favicon to show in search results. https://developers.google.com/search/docs/appearance/favicon-in-search
- WordPress.org, Create a Favicon. https://wordpress.org/documentation/article/create-a-favicon/
- MDN Web Docs, HTML attribute: rel. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel
- MDN Web Docs, icons (web app manifest). https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/icons
Πείτε μας για την ιστοσελίδα σας
Συμπληρώστε τη φόρμα και η ομάδα της Aboutnet θα επικοινωνήσει μαζί σας για να δούμε τι χρειάζεται η δική σας ιστοσελίδα.
& Γονατά Στυλιανού 2,
Περιστέρι 121 33
Ζητήστε προσφορά για ιστοσελίδα
Διαβάστε επίσης: one-page ή πολυσέλιδη ιστοσελίδα και τι είναι το UX/UI.
