Σχετικά με αυτό το εργαλείο
Το favicon είναι το μικρό εικονίδιο που εμφανίζεται στις καρτέλες του προγράμματος περιήγησης, στους σελιδοδείκτες και στις λίστες ιστορικού. Το αρχικό favicon — ένα αρχείο ICO 16×16 στο /favicon.ico — έχει επεκταθεί σε ένα σύνθετο σύνολο εικονιδίων σε διαφορετικά μεγέθη για διαφορετικές πλατφόρμες: 16×16 και 32×32 για καρτέλες προγράμματος περιήγησης, 180×180 για τις αρχικές οθόνες iOS, 192×192 και 512×512 για Windows, διάφορα μεγέθη για Windows, Tiles. Η παραγωγή όλων αυτών από μια εικόνα μίας πηγής είναι αυτό που κάνει μια σύγχρονη γεννήτρια favicon.
Αυτό το εργαλείο παίρνει μια ενιαία εικόνα πηγής υψηλής ανάλυσης (συνήθως ένα τετράγωνο λογότυπο) και δημιουργεί το πλήρες σύνολο στοιχείων favicon συν τις ετικέτες συνδέσμων HTML που απαιτούνται για την αναφορά τους. Η έξοδος περιλαμβάνει ICO, πολλαπλά PNG και ένα manifest.json για προοδευτικά μεταδεδομένα εφαρμογών ιστού. Ρίξτε τα αρχεία που προκύπτουν στη ρίζα του ιστότοπού σας και ανατρέξτε σε αυτά μέσω του HTML που δημιουργείται.
Όλη η επεξεργασία πραγματοποιείται στο πρόγραμμα περιήγησής σας. Χωρίς μεταφόρτωση, χωρίς κλήση API, χωρίς όριο χρέωσης. Η έξοδος λειτουργεί σε κάθε σύγχρονο πρόγραμμα περιήγησης και λειτουργικό σύστημα που εμφανίζει favicons.
Γιατί να δημιουργήσετε ένα Favicon
Οι ιστότοποι χωρίς favicons φαίνονται ημιτελείς. Οι καρτέλες του προγράμματος περιήγησης εμφανίζουν ένα γενικό εικονίδιο. Οι σελιδοδείκτες δεν έχουν οπτικό αναγνωριστικό. ο ιστότοπος φαίνεται λιγότερο επαγγελματικός. Η προσθήκη ενός κατάλληλου σετ favicon είναι ένα βήμα γυαλίσματος υψηλής απόδοσης χαμηλής προσπάθειας που σηματοδοτεί την προσοχή στη λεπτομέρεια.
Οι σύγχρονες απαιτήσεις για favicon έχουν αυξηθεί πέρα από το /favicon.ico. Τα εικονίδια αρχικής οθόνης iOS, τα εικονίδια Android Chrome, τα εικονίδια πλακιδίων των Windows και οι παραλλαγές της σκοτεινής λειτουργίας χρησιμοποιούν όλα διαφορετικά αρχεία. Η δημιουργία όλων τους από μία πηγή εξασφαλίζει σταθερή επωνυμία χωρίς τη διαχείριση κάθε αρχείου με το χέρι.
Τεχνικές λεπτομέρειες
Το πλήρες σετ μοντέρνων favicon: favicon.ico (16+32+48 πολλαπλής ανάλυσης), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.pnge-251xrom mstile-150x150.png. Plus site.webmanifest για PWA, browserconfig.xml για Windows.
Κάθε PNG δημιουργείται με μείωση δειγματοληψίας σε καμβά από την πηγή. Το ICO κατασκευάζεται σε JavaScript συνδυάζοντας εκδόσεις 16/32/48 στη μορφή ICO πολλαπλής ανάλυσης χρησιμοποιώντας εγγραφές DataView.
Οι ετικέτες συνδέσμων HTML αναφέρονται σε κάθε αρχείο με τα κατάλληλα χαρακτηριστικά rel και sizes. Η γεννήτρια τα παράγει ως απόσπασμα έτοιμο για αντιγραφή-επικόλληση για το <head> του ιστότοπού σας.
Συχνές ερωτήσεις
- Τι μορφή εικόνας πρέπει να ανεβάσω;
- Το PNG με διαφανές φόντο λειτουργεί καλύτερα. Χρησιμοποιήστε μια τετράγωνη εικόνα τουλάχιστον 512x512 pixel, ώστε το εργαλείο να μπορεί να μειώσει την κλίμακα χωρίς απώλεια ποιότητας. Το SVG λειτουργεί επίσης καλά αφού κλιμακώνεται σε οποιοδήποτε μέγεθος.
- Τι μεγέθη δημιουργεί αυτό;
- 16x16 (καρτέλα προγράμματος περιήγησης), 32x32 (καρτέλα προγράμματος περιήγησης @2x), 48x48 (γραμμή εργασιών των Windows), 180x180 (εικονίδιο Apple Touch), 192x192 (αρχική οθόνη Android), 512x512 (οθόνη εκκίνησης PWA). Το αρχείο ICO περιέχει μεγέθη 16, 32 και 48 εικονοστοιχείων.
- Πού βάζω τα αρχεία favicon;
- Τοποθετήστε το favicon.ico στον ριζικό κατάλογο του ιστότοπού σας. Άλλα μεγέθη PNG πηγαίνουν στον δημόσιο φάκελο σας ή σε οποιαδήποτε προσβάσιμη διαδρομή. Προσθέστε τις ετικέτες συνδέσμου HTML στην ενότητα <head> που δείχνει σε κάθε θέση αρχείου.
- Γιατί το favicon μου δεν ενημερώνεται στο πρόγραμμα περιήγησης;
- Τα προγράμματα περιήγησης αποθηκεύουν επιθετικά τα favicon. Εκκαθαρίστε την προσωρινή μνήμη του προγράμματος περιήγησής σας, δοκιμάστε να το ανοίξετε σε ένα παράθυρο ανώνυμης περιήγησης ή προσθέστε μια συμβολοσειρά ερωτήματος έκδοσης (?v=2) στη διεύθυνση URL του favicon για να αναγκάσετε μια ανανέωση.
- Γιατί το favicon μου δεν ενημερώνεται;
- Τα προγράμματα περιήγησης αποθηκεύουν τα favicons επιθετικά, μερικές φορές για μέρες. Επιβάλετε μια ανανέωση εκκαθαρίζοντας την προσωρινή μνήμη, ανοίγοντας απευθείας τη διεύθυνση URL του εικονιδίου ή προσθέτοντας μια παράμετρο ερωτήματος έκδοσης στην ετικέτα συνδέσμου.
- Η εικόνα μου μεταφορτώνεται σε διακομιστή;
- Όχι. Η δημιουργία πραγματοποιείται στο πρόγραμμα περιήγησής σας.
- Πρέπει να χρησιμοποιήσω SVG ή PNG;
- SVG για την πηγή (ανεξάρτητο από την ανάλυση). Η γεννήτρια εξάγει PNG σε συγκεκριμένα μεγέθη. Τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν επίσης favicons SVG μέσω συνδέσμου rel=icon type=image/svg+xml.
- Τι είναι το site.webmanifest;
- Ένα μανιφέστο JSON για προοδευτικές εφαρμογές ιστού που περιγράφουν εικονίδια, χρώματα και άλλα μεταδεδομένα. Απαιτείται για εφαρμογές Ιστού με δυνατότητα εγκατάστασης. ακίνδυνο να συμπεριληφθεί ακόμη και σε τυπικούς ιστότοπους.