Πώς να φτιάξετε favicon
Για να φτιάξετε favicon, προσθέστε παραπάνω το λογότυπό σας - ή πληκτρολογήστε ένα γράμμα ή emoji - ρυθμίστε την εμφάνιση και κατεβάστε το ZIP. Οι προεπισκοπήσεις δείχνουν το εικονίδιο σε κάθε πραγματικό μέγεθος και σε καρτέλα browser, σε φωτεινή και σκοτεινή λειτουργία.
- Διαλέξτε την πηγή. Ένα λογότυπο PNG ή SVG δίνει το καλύτερο αποτέλεσμα· κάθε άλλη εικόνα προσαρμόζεται μέσα σε τετράγωνο. Δεν έχετε λογότυπο; Χρησιμοποιήστε ένα γράμμα ή emoji πάνω σε χρωματιστό φόντο.
- Ρυθμίστε την εμφάνιση. Χρώμα φόντου ή διαφάνεια, σχήμα (στρογγυλεμένο, τετράγωνο ή κύκλος) και πόσο περιθώριο θα έχει η εικόνα γύρω της.
- Κατεβάστε. Το Λήψη όλων των εικονιδίων σας δίνει ολόκληρο το πακέτο· το Μόνο favicon.ico σας δίνει μόνο ένα αρχείο.
Τι περιέχει το πακέτο favicon
| Αρχείο | Μέγεθος | Χρήση |
|---|---|---|
favicon.ico | 16, 32 και 48 px | Όλοι οι browsers, Windows, αποτελέσματα αναζήτησης |
favicon-16x16.png, favicon-32x32.png | 16 και 32 px | Καρτέλες browser και σελιδοδείκτες |
apple-touch-icon.png | 180 px | Αρχική οθόνη iPhone και iPad |
android-chrome-192x192.png, -512x512.png | 192 και 512 px | Αρχική οθόνη Android, εγκατεστημένες web εφαρμογές |
site.webmanifest | - | Ορίζει τα ονόματα των εικονιδίων και τα χρώματα για Android και web εφαρμογές |
favicon-html.txt | - | Τα tags για επικόλληση στις σελίδες σας |
Το εικονίδιο της Apple έχει πάντα συμπαγές φόντο και τετράγωνες γωνίες: τα iPhone στρογγυλεύουν μόνα τους τις γωνίες και εμφανίζουν τις διαφανείς περιοχές ως μαύρες.
Προσθέστε το favicon στον ιστότοπό σας
- Αποσυμπιέστε το πακέτο και ανεβάστε τα αρχεία στον ριζικό φάκελο του ιστότοπού σας, δίπλα στην αρχική σελίδα, ώστε το
yoursite.com/favicon.icoνα ανοίγει το εικονίδιο. - Επικολλήστε τα HTML tags (εμφανίζονται παραπάνω και στο
favicon-html.txt) μέσα στο<head>των σελίδων σας. - Ανανεώστε τη σελίδα με εκκαθάριση της κρυφής μνήμης. Οι browsers θυμούνται τα παλιά favicon, οπότε ένα ιδιωτικό παράθυρο είναι ο πιο γρήγορος έλεγχος.
Στο WordPress μπορείτε αντί γι' αυτό να ορίσετε το εικονίδιο 512 px ως Εικονίδιο ιστότοπου (Site Icon) στον Προσαρμογέα, και δημιουργεί μόνο του τα υπόλοιπα μεγέθη.
Συμβουλές για καθαρό favicon
- Απλοποιήστε. Στα 16 pixel ένα λογότυπο με λεπτομέρειες θολώνει. Χρησιμοποιήστε το σύμβολο του λογοτύπου σας ή το αρχικό του γράμμα, αντί για ολόκληρο το λογότυπο με κείμενο.
- Χρησιμοποιήστε αντίθεση. Οι καρτέλες είναι φωτεινές ή σκοτεινές ανάλογα με το θέμα του browser - ελέγξτε και τις δύο προεπισκοπήσεις.
- Προσέξτε το περιθώριο. Λιγότερο περιθώριο κάνει το εικονίδιο μεγαλύτερο στην καρτέλα· λίγο περισσότερο φαίνεται καλύτερα στην αρχική οθόνη του κινητού.
Χρειάζεστε ένα μεμονωμένο αρχείο .ico με άλλο μέγεθος; Ο μετατροπέας εικόνων αποθηκεύει οποιαδήποτε εικόνα ως ICO.
Συχνές ερωτήσεις
Πώς φτιάχνω ένα favicon;
Προσθέστε το λογότυπό σας ή οποιαδήποτε τετράγωνη εικόνα στο πλαίσιο αυτής της σελίδας ή πληκτρολογήστε ένα γράμμα ή emoji. Ρυθμίστε το φόντο, το περιθώριο και το σχήμα και κατεβάστε το ZIP με όλα τα μεγέθη εικονιδίων και τον HTML κώδικα για να τον επικολλήσετε στον ιστότοπό σας.
Ποια μεγέθη χρειάζεται ένα favicon;
Ένα favicon.ico με εκδοχές 16, 32 και 48 pixel καλύπτει τους browsers και τα Windows· ένα apple-touch-icon 180 pixel καλύπτει τα iPhone και τα iPad· τα εικονίδια 192 και 512 pixel καλύπτουν το Android και τις εγκατεστημένες web εφαρμογές. Το πακέτο τα περιλαμβάνει όλα.
Πώς προσθέτω το favicon στον ιστότοπό μου;
Ανεβάστε τα αρχεία από το ZIP στον ριζικό φάκελο του ιστότοπού σας, ώστε το favicon.ico να ανοίγει στη διεύθυνση yoursite.com/favicon.ico. Έπειτα επικολλήστε τα HTML tags στην ενότητα head των σελίδων σας.
Γιατί δεν εμφανίζεται το νέο μου favicon;
Οι browsers κρατούν τα favicon στην κρυφή μνήμη (cache) για πολύ καιρό. Ανοίξτε απευθείας τη διεύθυνση του favicon, ανανεώστε τη σελίδα ή δοκιμάστε ένα ιδιωτικό παράθυρο. Στα αποτελέσματα αναζήτησης η ενημέρωση μπορεί να πάρει εβδομάδες.
Μπορώ να φτιάξω favicon από κείμενο ή emoji;
Ναι. Επιλέξτε «Γράμμα ή emoji», πληκτρολογήστε έναν ή δύο χαρακτήρες και διαλέξτε τα χρώματα. Είναι ένας γρήγορος τρόπος να αποκτήσετε ένα καθαρό εικονίδιο χωρίς λογότυπο.
Ανεβαίνει η εικόνα μου κάπου;
Όχι. Όλα τα εικονίδια δημιουργούνται στον browser σας και η εικόνα σας δεν φεύγει ποτέ από τη συσκευή σας.