Ένα αξιόπιστο favicon HTML δεν εξαρτάται από μία μαγική ετικέτα. Χρησιμοποιεί λίγα προσβάσιμα αρχεία και συνδέσμους στο head. Αυτή η διαδικασία καλύπτει σύγχρονες καρτέλες, παλαιότερους πελάτες και συντομεύσεις κινητών, χωρίς πολλαπλασιασμό ιστορικών παραλλαγών.
Προετοιμάστε τα αρχεία
Ξεκινήστε με τετράγωνο σύμβολο που παραμένει αναγνώσιμο σε πολύ μικρό μέγεθος. Τοποθετήστε favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest και τα PNG στα οποία παραπέμπει το manifest στον δημόσιο φάκελο που εξυπηρετείται από τη ρίζα του τομέα.
Μια διαδρομή όπως /favicon.svg είναι απόλυτη από τον τομέα. Παραμένει επομένως σωστή στα /products ή /blog/article, σε αντίθεση με το favicon.svg που μπορεί να επιλυθεί σχετικά με τη σελίδα.
Προσθέστε τα στοιχεία στο head
Δηλώστε πρώτα το SVG με rel icon και type image/svg+xml, έπειτα το ICO με rel icon και sizes any. Προσθέστε rel apple-touch-icon για iOS και rel manifest για εγκατάσταση διαδικτυακής εφαρμογής.
Ο τύπος πρέπει να συμφωνεί με το πραγματικό αρχείο που σερβίρεται. Μη μετονομάζετε PNG σε .ico: τα περιεχόμενα και η κεφαλίδα πρέπει να χρησιμοποιούν τη μορφή ICO.
| Σκοπός | Σχέση | Αρχείο |
|---|---|---|
| Σύγχρονο πρόγραμμα περιήγησης | icon | /favicon.svg |
| Συμβατότητα | icon | /favicon.ico |
| Αρχική οθόνη iOS | apple-touch-icon | /apple-touch-icon.png |
| Διαδικτυακή εφαρμογή | manifest | /site.webmanifest |
Δημοσίευση χωρίς σπασμένες διαδρομές
Ανοίξτε απευθείας κάθε URL αρχείου μετά τη δημοσίευση. Η απάντηση πρέπει να είναι εικόνα ή manifest με επιτυχή κατάσταση, όχι σελίδα σύνδεσης ή HTML 404 που επιστρέφεται με παραπλανητικό κωδικό κατάστασης.
Αν ο ιστότοπος βρίσκεται σε υποκατάλογο, προσαρμόστε τις διαδρομές ή τη δημόσια βάση. Εξετάστε την τελική σελίδα στα εργαλεία προγραμματιστή: το πρόγραμμα περιήγησης πρέπει να ζητά τις αναμενόμενες URL χωρίς ανακατεύθυνση σε άλλο κεντρικό υπολογιστή.
Επαληθεύστε το αποτέλεσμα
Επαναφορτώστε με απενεργοποιημένη κρυφή μνήμη και εξετάστε τα στοιχεία link στο παραγόμενο DOM. Δοκιμάστε έπειτα καρτέλα, σελιδοδείκτη και, όπου χρειάζεται, προσθήκη στην αρχική οθόνη πραγματικής συσκευής.
Το favicon αναζήτησης ακολουθεί επίσης τους κανόνες και το πρόγραμμα ανίχνευσης της μηχανής αναζήτησης. Επομένως, η εμφάνιση στο πρόγραμμα περιήγησης δεν εγγυάται άμεση ενημέρωση στα αποτελέσματα αναζήτησης.
Πρωτογενείς πηγές
Συχνές ερωτήσεις
Μπαίνει το στοιχείο favicon στο body;
Όχι. Τα στοιχεία link που περιγράφουν εικονίδια και manifest ανήκουν στο head του εγγράφου.
Αρκεί ένα favicon.ico στη ρίζα;
Είναι χρήσιμη εφεδρεία, αλλά δεν περιγράφει εικονίδιο Apple Touch ή εγκαταστάσιμα εικονίδια manifest. Δηλώστε τις μορφές που εξυπηρετούν αυτές τις χρήσεις.
Γιατί να χρησιμοποιώ διαδρομή που αρχίζει με /;
Ξεκινά από τη ρίζα του τομέα και εμποδίζει μια εσωτερική σελίδα να αναζητήσει το αρχείο στον δικό της φάκελο.