Χρειάζομαι ακόμα ένα favicon.ico ή είναι αρκετό το PNG;
Το ICO είναι μια μορφή καταλόγου που περιλαμβάνει 16, 32 και 48 σε ένα αρχείο 4,6 KB. Τι περιέχει, γιατί το PNG δεν το αντικαθιστά και τα επτά αρχεία που πρέπει να παραδοθούν.
Κάθε λίγα χρόνια κάποιος δηλώνει ότι το favicon.ico είναι νεκρό. Έπειτα, ένας αναγνώστης RSS ή μια παλιά συντόμευση των Windows ζητάει το /favicon.ico, παίρνει ένα 404 και δείχνει ένα κενό εικονίδιο σελίδας. Η αποστολή του ICO κοστίζει 4,6 KB. Αυτό είναι το όλο επιχείρημα και είναι ο λόγος που ο γεννήτρια εικονιδίων μας εξακολουθεί να γράφει ένα.
Δώστε του το alpha.png, μια εικόνα 900x606 με διαφάνεια, και βγαίνουν επτά αρχεία: favicon.ico στα 4,6 KB, favicon-16x16.png στα 521 B, favicon-32x32.png στα 1,4 KB, apple-touch-icon.png στα 28,4 KB και δύο PNG android-chrome στα 31,9 KB και 196 KB, συν ένα site.webmanifest στα 371 B. Ο δικός σας περιηγητής γράφει και τα επτά. Το κατασκευάσαμε έτσι γιατί αυτή η εφαρμογή δεν έχει καθόλου API routes, κάτι που καμία ιστοσελίδα favicon από server-side δεν μπορεί να πει για τον εαυτό της.
Τι περιέχει πραγματικά ένα αρχείο .ico;
Το ICO είναι μια μορφή καταλόγου. Το αρχείο ανοίγει με έξι bytes: μια δεσμευμένη λέξη που είναι 0, μια λέξη τύπου που είναι 1 για εικονίδια και μια μέτρηση του πόσες εικόνες ακολουθούν. Μετά από αυτό έρχεται μία είσοδος 16 bytes ανά εικόνα, που περιέχει πλάτος, ύψος, αριθμό χρωμάτων, ένα δεσμευμένο byte, επίπεδα χρώματος, bits ανά pixel, το μήκος byte των δεδομένων της εικόνας και την απόστασή του από την αρχή του αρχείου. Έπειτα οι payloads, συνδεδεμένοι. Το αρχείο εικονιδίων της Microsoft από το 1995 καταγράφει αυτές τις δύο δομές ως ICONDIR και ICONDIRENTRY, και δεν έχουν αλλάξει.
Το πλάτος και το ύψος παίρνουν από ένα byte, γι' αυτό το 256x256 πρέπει να αποθηκευτεί ως 0 και γιατί τίποτα μεγαλύτερο από το 256 δεν χωράει καθόλου στον κατάλογο. Ο κωδικοποιητής μας γράφει 1 επίπεδο χρώματος και 32 bits ανά pixel για κάθε είσοδο, και κάθε payload είναι μια απλή PNG. Η προδιαγραφή του 1995 περιγράφει ένα DIB ακολουθούμενο από μια μάσκα 1-bit AND για διαφάνεια, γι' αυτό οι αρχαίοι εικονίδια είχαν αυτές τις σκληρές κοφτές άκρες. Τρεις εικόνες σημαίνουν 6 bytes κεφαλίδας συν 48 bytes καταλόγου. Αυτό είναι 54 bytes λογιστικής, και όλα τα υπόλοιπα στα 4,6 KB είναι δεδομένα PNG.
Γιατί ένα favicon.ico περιέχει 16, 32 και 48;
Αυτές είναι οι τρεις διαστάσεις που περιλαμβάνει το δικό μας, και δεν είναι αυθαίρετες. Το ίδιο έγγραφο της Microsoft λέει στους προγραμματιστές να συμπεριλαμβάνουν 16x16, 32x32 και 48x48 σε κάθε πόρο εικονιδίου, και στη συνέχεια καθορίζει τον κανόνα επιλογής: η εικόνα που είναι πιο κοντά στο ζητούμενο μέγεθος κερδίζει. Η καρτέλα ζητάει 16. Σε μια οθόνη 2x, αυτή η ίδια θέση 16 CSS pixel θέλει 32 πραγματικά pixels, και μια συντόμευση επιφάνειας εργασίας των Windows ζητάει 48. Αν το ICO σας είχε μόνο το 16, μια συντόμευση θα έπαιρνε μια εικόνα 16 px τεντωμένη σε 48, και θα φαινόταν ακριβώς έτσι.
Αν οι περιηγητές διαβάζουν PNG, γιατί να στείλουμε το ICO καθόλου;
Γιατί οι δύο ανακαλύπτονται με διαφορετικούς τρόπους. Το απόσπασμα τεσσάρων γραμμών που σας δίνει το εργαλείο μας ονομάζει τα αρχεία PNG με ρητές υποδείξεις τύπου και μεγέθους, και οποιοσδήποτε πελάτης που αναλύει το `<head>` θα τα πάρει. Η αναφορά `<link>` της MDN δείχνει την ίδια μορφή, αρκετούς συνδέσμους εικονιδίων των οποίων τα χαρακτηριστικά επιτρέπουν στον περιηγητή να επιλέξει. Το HTML Standard επιτρέπει επίσης σε έναν χρήστη να αναζητήσει το /favicon.ico μέσω της διαδρομής όταν δεν έχει δηλωθεί κανένας σύνδεσμος εικονιδίου, και πολλά πράγματα που ανακτούν το URL σας δεν διαβάζουν ποτέ την αναγραφή σας. Τα SVG favicons είναι δελεαστικά εδώ, και το caniuse τους δίνει 90,49% παγκόσμια υποστήριξη με το Safari να τα αναγνωρίζει μόνο στην έκδοση 26.0. Αυτό αφήνει μια πραγματική ουρά.
Ποια είναι τα επτά αρχεία και πόσο ζυγίζουν;
| Αρχείο | Pixels | Μέγεθος | Τι το διαβάζει |
|---|---|---|---|
| favicon.ico | 16, 32 και 48 συσκευασμένα | 4,6 KB | η διαδρομή /favicon.ico fallback, συντομεύσεις Windows |
| favicon-16x16.png | 16x16 | 521 B | καρτέλα στα 1x, μέσω ετικέτας συνδέσμου |
| favicon-32x32.png | 32x32 | 1,4 KB | καρτέλα στα 2x, μέσω ετικέτας συνδέσμου |
| apple-touch-icon.png | 180x180 | 28,4 KB | οθόνη αρχικής iOS, μέσω ετικέτας συνδέσμου |
| android-chrome-192x192.png | 192x192 | 31,9 KB | ο πίνακας εικονιδίων του manifest |
| android-chrome-512x512.png | 512x512 | 196 KB | ο πίνακας εικονιδίων του manifest |
| site.webmanifest | n/a | 371 B | η προτροπή εγκατάστασης |
Το 512 κυριαρχεί. Προσθέστε το ICO, και τα δύο μικρά PNG, το apple-touch-icon και το 192 μαζί και είστε κάτω από 67 KB συνολικά, σε σύγκριση με 196 KB για αυτό το ένα αρχείο. Αξίζει να γνωρίζετε ποιο από αυτά σας κοστίζει κάτι σε μια προβολή σελίδας, γιατί μόνο το ICO και τα δύο μικρά PNG είναι σε παιχνίδι εκεί.
Γιατί το διαφανές λογότυπό μου κάθεται σε ένα λευκό τετράγωνο;
Γιατί ο γεννήτρια ζωγραφίζει τον καμβά πριν σχεδιάσει το έργο σας, και η προεπιλεγμένη πλήρωση είναι #ffffff. Αυτή η ρύθμιση είναι μια είσοδος χρώματος, έτσι υπάρχει πάντα κάποιο χρώμα από κάτω. Ρυθμίστε το στο hex της μάρκας σας και ολόκληρο το σύνολο ταιριάζει με τον ιστότοπό σας. Το alpha.png μπήκε με ένα κανάλι alpha και κάθε μία από τις επτά εικόνες βγήκε αδιαφανής, κάτι που εκπλήσσει τους ανθρώπους που περιμένουν ένα διαφανές favicon.
Ο ρυθμιστής περιθωρίου κυμαίνεται από 0 έως 30 τοις εκατό και εισάγει το έργο σας κατά αυτό το ποσοστό της άκρης κάθε εικονιδίου, έτσι ώστε στο 10 τοις εκατό ένα εικονίδιο 32 px να διατηρεί ένα περιθώριο 3 px σε κάθε πλευρά. Αυτό είναι ένα ορατό ποσό σε αυτή την κλίμακα. Οι μη τετράγωνες πηγές αποκτούν letterboxed: ένα λογότυπο 900x606 διατηρεί την αναλογία του και αποκτά φόντο πάνω και κάτω. Τετραγωνίστε το πρώτα αν αυτό σας ενοχλεί. Ο κόφτης έχει μια προεπιλογή 1:1, δέχεται ένα αρχείο τη φορά μέχρι 10 MB και επανακωδικοποιεί τις χαμηλής ποιότητας μορφές σε σκληρά καθορισμένη ποιότητα 92. Αν προτιμάτε να αλλάξετε μέγεθος παρά να κόψετε, ο ρυθμιστής μεγέθους έχει προεπιλογές ποσοστού στο 25, 50 και 75 με καλύμματα, περιεχόμενο και τρόπους τεντώματος.
Πώς μπορώ να μετατρέψω ένα ICO πίσω σε PNG;
Χρησιμοποιήστε ICO to PNG. Αναλύει το κοντέινερ, περπατάει τις καταχωρίσεις του καταλόγου και κρατάει αυτή με το μεγαλύτερο πλάτος, έπειτα το γράφει ως PNG. Στοχεύστε το αρχείο 4,6 KB παραπάνω και θα λάβετε μια εικόνα 48x48, γιατί το 48 είναι το μεγαλύτερο πράγμα που είναι συσκευασμένο εκεί. Δεν μπορεί να ανακτήσει λεπτομέρειες που δεν υπήρχαν ποτέ στο αρχείο. Αν χρειάζεστε κάτι μεγαλύτερο, ο αναβαθμιστής τρέχει το Real-ESRGAN στον περιηγητή σας και πάντα εξάγει PNG. Η δοκιμή μας με το small.png στα 400x269 επέστρεψε ως 800x538 στην ρύθμιση 2x. Είτε η ανακατασκευή είτε η απλή παρεμβολή είναι το σωστό εργαλείο εξαρτάται από το τι είναι το εικονίδιο. Αξίζει να γνωρίζετε: το μοντέλο παράγει μόνο 4x εσωτερικά, έτσι το 2x είναι μια μείωση που εφαρμόζεται αργότερα. Ο μετατροπέας μας καλύπτει 24 ζεύγη σε 11 μορφές και γράφει ICO για καμία από αυτές. Τα εικονίδια προέρχονται από τον γεννήτρια εικονιδίων.
Είναι ένα εικονίδιο 196 KB πολύ μεγάλο;
Αυτό είναι το android-chrome-512x512.png, και είναι το βαρύτερο πράγμα στο σύνολο κατά πολύ. Ανακτάται όταν κάποιος εγκαθιστά τον ιστότοπό σας ως εφαρμογή, κάτι που διέπει η προδιαγραφή του W3C Web App Manifest, έτσι δεν κάθεται στον κρίσιμο δρόμο μιας κανονικής φόρτωσης σελίδας. Μπορείτε ακόμα να το μειώσετε. Ο συμπιεστής μας προσφέρει δύο τρόπους PNG που συμπεριφέρονται εντελώς διαφορετικά: "PNG χωρίς συμπίεση" τρέχει το oxipng στο επίπεδο 3 και παραμένει χωρίς απώλειες, ενώ "PNG μικρότερο μέγεθος αρχείου" ποσοτικοποιεί σε μια παλέτα 256 χρωμάτων με το imagequant. Στο alpha.png, 942,4 KB στην πηγή, η χωρίς απώλειες διαδικασία έδωσε 383,9 KB και η παλέτα έδωσε 98,3 KB. Ένα επίπεδο λογότυπο συνήθως επιβιώνει με 256 χρώματα χωρίς να το παρατηρήσει κανείς. Η συμπίεση επίσης αφαιρεί κάθε κομμάτι μεταδεδομένων, συμπεριλαμβανομένων των EXIF και ICC, που για ένα εικονίδιο είναι ακριβώς αυτό που θέλετε.
Ακολουθεί το επόμενο συγκεκριμένο βήμα. Ανοίξτε τον γεννήτρια εικονιδίων, ρίξτε μέσα την μεγαλύτερη τετράγωνη πηγή που έχετε (δέχεται JPEG, PNG, WebP, AVIF, GIF και SVG μέχρι 10 MB, ένα αρχείο), ρυθμίστε το χρώμα φόντου στο hex της μάρκας σας, αφήστε το περιθώριο στο 0 και δημιουργήστε. Αντιγράψτε τις τέσσερις ετικέτες σύνδεσης στο `<head>`, ανεβάστε το favicon.ico στη ρίζα του ιστότοπού σας και είστε έτοιμοι. Αν θέλετε να επιβεβαιώσετε ότι τίποτα δεν έφυγε από τη μηχανή σας, παρακολουθήστε την καρτέλα δικτύου ενώ εκτελείται, ή διαβάστε τη σελίδα απορρήτου μας. Πού ανήκει το καθένα από τα επτά αρχεία στον διακομιστή σας έχει γραφτεί πλήρως ξεχωριστά.