Πώς να φτιάξετε favicon
Τα μεγέθη, οι μορφές και ο κώδικας που χρειάζεστε για ένα favicon που εμφανίζεται παντού.
Το favicon είναι το μικρό εικονίδιο στην καρτέλα του προγράμματος περιήγησης, στους σελιδοδείκτες και δίπλα στον ιστότοπό σας στα αποτελέσματα αναζήτησης της Google στο κινητό. Ένας ιστότοπος χωρίς favicon δείχνει ημιτελής, και ένα θολό favicon δείχνει ακόμη χειρότερα. Για να φτιάξετε ένα καλό χρειάζονται λίγα λεπτά.
Ξεκινήστε από το σωστό σχέδιο
Ένα favicon εμφανίζεται ακόμη και σε μέγεθος 16 επί 16 pixel, οπότε ένα πλήρες λογότυπο με το όνομα της εταιρείας δεν θα διαβάζεται. Χρησιμοποιήστε ένα απλό σήμα: το σύμβολο του λογότυπού σας, ένα αρχικό γράμμα ή ένα έντονο σχήμα στο χρώμα της επωνυμίας σας. Δοκιμάστε το μικραίνοντάς το στο ένα τέταρτο του μεγέθους στην οθόνη: αν εξακολουθείτε να καταλαβαίνετε τι είναι, θα λειτουργήσει.
Ξεκινήστε από μια τετράγωνη εικόνα τουλάχιστον 512 επί 512 pixel, ιδανικά ένα PNG με διάφανο φόντο. Αν το λογότυπό σας δεν είναι τετράγωνο, περικόψτε το σε τετράγωνο με την αναλογία κλειδωμένη στο 1:1.
Τα αρχεία που χρειάζεστε
| Αρχείο | Μέγεθος | Χρησιμοποιείται από |
|---|---|---|
| favicon.ico | Περιέχει εκδόσεις 16, 32 και 48 pixel | Προγράμματα περιήγησης, παλαιότερα συστήματα, το προεπιλεγμένο αίτημα για /favicon.ico |
| Ένα εικονίδιο PNG | 32 επί 32 και 192 επί 192 | Σύγχρονα προγράμματα περιήγησης, αρχικές οθόνες Android |
| apple-touch-icon.png | 180 επί 180 | Σελιδοδείκτες στην αρχική οθόνη iPhone και iPad |
Η Αναζήτηση Google χρησιμοποιεί το favicon σας και στα αποτελέσματα. Πρέπει να είναι τετράγωνο, τουλάχιστον 48 επί 48 pixel, και προσβάσιμο από τον ανιχνευτή της στον ιστότοπό σας.
Δημιουργία του αρχείου ICO
Ρίξτε το τετράγωνο PNG σας στον μετατροπέα PNG σε ICO. Δημιουργεί ένα πραγματικό αρχείο .ico με τα μικρά μεγέθη που ζητούν τα προγράμματα περιήγησης. Για τις εκδόσεις PNG, κάντε αλλαγή μεγέθους της ίδιας τετράγωνης εικόνας σε 180, 192 και 32 pixel.
Προσθήκη στον ιστότοπό σας
Ανεβάστε το favicon.ico στον ριζικό φάκελο του ιστότοπού σας, ώστε να είναι προσβάσιμο στη διεύθυνση yoursite.com/favicon.ico, και προσθέστε αυτές τις γραμμές μέσα στο head των σελίδων σας:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/el/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/el/apple-touch-icon.png">
Στο WordPress, μεταβείτε στα Appearance, Customize, Site Identity και ανεβάστε μια τετράγωνη εικόνα ως Site Icon· το WordPress δημιουργεί τα μεγέθη για εσάς. Τα Shopify, Wix και Squarespace έχουν το καθένα μια ρύθμιση favicon στις ρυθμίσεις του ιστότοπου ή του θέματος.
Όταν το νέο favicon δεν εμφανίζεται
Τα προγράμματα περιήγησης κρατούν πεισματικά τα favicon στην κρυφή μνήμη. Ανοίξτε τον ιστότοπο σε ιδιωτικό παράθυρο ή επισκεφθείτε απευθείας τη διεύθυνση yoursite.com/favicon.ico και ανανεώστε. Η Google μπορεί να χρειαστεί μέρες ή εβδομάδες για να ενημερώσει το εικονίδιο στα αποτελέσματα αναζήτησης, αφού ανιχνεύσει ξανά την αρχική σας σελίδα.
Συνηθισμένα λάθη
- Χρήση του πλήρους λογότυπου με μικρό κείμενο, που γίνεται μουτζούρα στα 16 pixel.
- Λευκό εικονίδιο σε διάφανο φόντο, που εξαφανίζεται στις ανοιχτόχρωμες καρτέλες.
- Μόνο ένα μικροσκοπικό αρχείο 16 pixel, που φαίνεται θολό σε οθόνες υψηλής ανάλυσης.
- Ξεχασμένο αρχείο στη διεύθυνση /favicon.ico, την οποία ορισμένα προγράμματα περιήγησης και ανιχνευτές ζητούν ό,τι κι αν λέει η σελίδα.