Πώς μπορώ να δημιουργήσω ένα πακέτο favicon από ένα PNG χωρίς να εγγραφώ;

Τα επτά αρχεία που γράφει ο γεννήτορας εικονιδίων μας από ένα PNG, τι διαβάζει το καθένα, πού πηγαίνουν στον διακομιστή σας και γιατί τα διαφανή μέρη βγαίνουν συμπαγή.

August 9, 2026

Ένα favicon δεν είναι ένα αρχείο. Είναι ένα σύνολο από αυτά, επειδή μια καρτέλα προγράμματος περιήγησης, μια οθόνη αρχικής σε iOS και μια προτροπή εγκατάστασης σε Android ζητούν κάθε μία μια διαφορετική εικόνα σε διαφορετικό μέγεθος. Ρίξτε ένα PNG στον γεννήτορα εικονιδίων μας και επτά αρχεία βγαίνουν από την άλλη πλευρά. Ορίστε τι είναι το καθένα, πού πρέπει να βρίσκεται στον διακομιστή σας και ποια μπορείτε να παραλείψετε.

Όλο το πράγμα τρέχει μέσα στη σελίδα. Δεν υπάρχει διαδρομή API και καμία ενέργεια διακομιστή πουθενά σε αυτή την εφαρμογή, οπότε το λογότυπό σας διαβάζεται με το createImageBitmap, ζωγραφίζεται σε ένα OffscreenCanvas και κωδικοποιείται σε PNG από τον δικό σας περιηγητή. Καμία εγγραφή και καμία υπόσχεση να διαγραφεί το έργο σας σε μία ώρα.

Ποια είναι τα επτά αρχεία και τι κάνει το καθένα;

Επτά αρχεία, μία πηγή εικόνας. Τα μεγέθη παρακάτω προέρχονται από μια πραγματική εκτέλεση με το alpha.png, ένα διαφανές PNG 900x606 των 942,4 KB. Οι μετρήσεις byte σας θα διαφέρουν επειδή εξαρτώνται από το πόση λεπτομέρεια επιβιώνει σε κάθε μέγεθος, αλλά τα ονόματα αρχείων και οι διαστάσεις σε pixel είναι σταθερές από το εργαλείο.

Δεν χρειάζεστε όλα τα επτά. Αν σας ενδιαφέρουν μόνο οι καρτέλες επιτραπέζιου υπολογιστή, το favicon.ico από μόνο του κάνει τη δουλειά. Το αρχείο Apple αρχίζει να έχει σημασία τη στιγμή που κάποιος αποθηκεύει τον ιστότοπό σας στην αρχική οθόνη, και τα δύο PNG Android κερδίζουν τη θέση τους μόνο αν πραγματικά στείλετε το manifest.

Πού πηγαίνουν τα αρχεία και τι μπαίνει στο head;

Όλα τα επτά ανήκουν στη ρίζα του ιστού, οπότε επιλύονται ως /favicon.ico, /apple-touch-icon.png και ούτω καθεξής. Στο Next.js είναι ο δημόσιος φάκελος. Στη συνέχεια, τέσσερις ετικέτες μπαίνουν στο head σας: ένας σύνδεσμος apple-touch-icon στα 180x180, δύο rel=icon σύνδεσμοι για τα 32 και τα 16, και ένας σύνδεσμος προς το manifest. Το εργαλείο εκτυπώνει αυτό το απόσπασμα δίπλα στα αποτελέσματα με ένα κουμπί αντιγραφής.

Το site.webmanifest είναι 371 bytes JSON που περιέχει name, short_name, τα δύο εικονίδια Android, theme_color, background_color και display ρυθμισμένο σε standalone. Οι διαδρομές εικονιδίων μέσα είναι γραμμένες απόλυτα, ως /android-chrome-192x192.png, οπότε η τοποθέτηση του πακέτου σε /assets/icons/ το σπάει ήσυχα και θα χρειαστεί να επεξεργαστείτε και τις δύο τιμές src. Ένα ακόμα παγίδα: αφήστε και τα δύο πεδία name κενά στον πίνακα και το manifest αποστέλλεται με το κυριολεκτικό όνομα "My App", το οποίο είναι αυτό που θα εκτυπώσει ένα τηλέφωνο κάτω από το εικονίδιο σας.

Γιατί δεν είναι το favicon.ico σε αυτό το απόσπασμα;

Επειδή οι περιηγητές το ζητούν χωρίς να τους το πείτε. Καμία ετικέτα δεν χρειάζεται. Η ενότητα rel=icon της προδιαγραφής HTML περιγράφει τη σύμβαση /favicon.ico: όταν ένα έγγραφο δεν δηλώνει καμία σύνδεση εικονιδίου, ο περιηγητής προσπαθεί αυτή τη ρίζα μόνος του. Γι' αυτό το .ico λειτουργεί χωρίς καμία markup, και είναι επίσης γιατί το αρχείο πρέπει να βρίσκεται στη ρίζα. Ένα αντίγραφο που βρίσκεται σε /images/ δεν ζητείται ποτέ. Αν πραγματικά το χρειάζεστε αλλού, προσθέστε μια ρητή σύνδεση εικονιδίου που να δείχνει στη διαδρομή σας και η μαντεψιά σταματά.

Τι υπάρχει πραγματικά μέσα στο favicon.ico;

Ένα .ico είναι ένα δοχείο. Το δικό μας περιέχει τρία PNG, αποδομένα σε 16, 32 και 48 pixels, πίσω από μια κεφαλίδα 6 byte συν μία είσοδο καταλόγου 16 byte ανά εικόνα, που είναι 54 bytes δομής τυλιγμένη γύρω από τα δεδομένα εικόνας. Έτσι, ένα μόνο αρχείο 4,6 KB καλύπτει τρία μεγέθη: ο περιηγητής διαβάζει τον κατάλογο, στη συνέχεια τραβά την είσοδο που ταιριάζει με αυτό που σχεδιάζει. Η διάταξη byte αυτού του καταλόγου, και γιατί τίποτα μεγαλύτερο από 256 δεν χωράει σε αυτό, είναι ένα κομμάτι του δικού του. Τα Windows έχουν κατανοήσει τα φορτία PNG μέσα στο .ico από το Vista και οι τρέχοντες περιηγητές τα διαχειρίζονται χωρίς παράπονα.

Γιατί το διαφανές PNG μου βγήκε με συμπαγές φόντο;

Επειδή κάθε καμβάς εικονιδίου γεμίζει πριν προσγειωθεί το λογότυπό σας πάνω του. Ο έλεγχος φόντου είναι ένας input type=color, ο οποίος δεν μεταφέρει κανένα κανάλι alpha, οπότε η πλήρωση είναι πάντα αδιαφανής και η προεπιλογή είναι #ffffff. Οποιαδήποτε διαφάνεια είχε η πηγή σας ισοπεδώνεται σε αυτή τη χρώμα. Δεν υπάρχει διαφανής επιλογή εδώ. Επιλέξτε το χρώμα που ταιριάζει με την επιφάνεια στην οποία θα καθίσει το σήμα πριν πατήσετε το generate.

Το σχήμα έχει σημασία επίσης. Το alpha.png είναι 900x606 και τα εικονίδια είναι τετράγωνα, οπότε το έργο προσαρμόζεται μέσα στο τετράγωνο με τον μακρύ άξονα σε πλήρες πλάτος, και το χρώμα φόντου γεμίζει τις ζώνες πάνω και κάτω από αυτό. Αν αυτές οι ζώνες σας ενοχλούν, τετραγωνίστε την εικόνα πρώτα στον cropper, που δέχεται ένα αρχείο έως 10 MB και προσφέρει μια προεπιλογή 1:1 ανάμεσα στις οκτώ αναλογίες διαστάσεων του. Ο ρυθμιστής περιθωρίου στον πίνακα εικονιδίων κυμαίνεται από 0 έως 30% και εισάγει το έργο ομοιόμορφα και στις τέσσερις πλευρές.

Είναι 196 KB πολύ μεγάλο για ένα αρχείο εικονιδίου;

196 KB για το android-chrome-512x512.png φαίνεται ανησυχητικό δίπλα σε ένα αρχείο 521-byte 16px. Δύο πράγματα αποφορτίζουν την πίεση. Αυτό το εικονίδιο δεν ανακτάται σε μια κανονική προβολή σελίδας, καθώς η καρτέλα θέλει πάντα μόνο το μικρό, και το PNG που βγαίνει απευθείας από έναν κωδικοποιητή καμβά δεν είναι βελτιστοποιημένο: convertToBlob γράφει ένα έγκυρο αρχείο χωρίς καμία από τη δουλειά φίλτρου και παλέτας που κάνει ένας ειδικευμένος βελτιστοποιητής. Είναι ο ίδιος κωδικοποιητής περιηγητή που διαμορφώνει τα μεγέθη αρχείων στις μετρήσεις JPG σε PDF.

Μπορείτε να το μειώσετε τρέχοντας το PNG ξανά μέσω του συμπιεστή. Σε αυτό το ίδιο 942,4 KB alpha.png, η λειτουργία χωρίς απώλειες (oxipng level 3) κατέληξε στα 383,9 KB, μειωμένο κατά 59% χωρίς να αλλάξει κανένα pixel. Η λειτουργία μικρότερου αρχείου (imagequant) έφτασε τα 98,3 KB, μειωμένο κατά 90%, μειώνοντας την εικόνα σε μια παλέτα. Ένα επίπεδο λογότυπο με μια χούφτα χρωμάτων είναι ακριβώς όπου μια παλέτα δεν σας κοστίζει τίποτα που να μπορείτε να δείτε. Κρατήστε το χωρίς απώλειες αν το εικονίδιο σας είναι φωτογραφικό.

Πρέπει να εγγραφώ και ανεβαίνει το λογότυπό μου;

Καμία εγγραφή και τίποτα να ανεβάσετε. Δεν υπάρχουν διαδρομές API και καμία ενέργεια διακομιστή σε αυτή τη βάση κώδικα, και οι μόνοι αιτήσεις που κάνει η σελίδα είναι fetches ίδιου προορισμού για τα δικά της περιουσιακά στοιχεία. Ανοίξτε τον πίνακα δικτύου σας ενώ δημιουργείτε και παρακολουθήστε να παραμένει ήσυχος. Η σελίδα απορρήτου μας το εκφράζει με λιγότερες λέξεις από αυτή την παράγραφο.

Οι περιορισμοί είναι ένα αρχείο τη φορά και 10 MB, και η ζώνη αποθέματος δέχεται PNG, JPEG, WebP, AVIF, GIF και SVG. Ένα SVG ραστεροποιείται πρώτα στο μεγαλύτερο από τις δικές του διαστάσεις ή 512 pixels, οπότε ακόμη και μια πηγή 64px αποδίδει καθαρό 512 εικονίδιο. Αυτή η απόδοση φορτώνει το αρχείο σε ένα <img> στοιχείο, την ίδια περιορισμένη διαδρομή που απορρίπτει εξωτερικές γραμματοσειρές και συνδεδεμένα bitmap από ένα SVG. Όλα κατεβαίνουν ως ένα favicon-package.zip που περιέχει όλα τα επτά αρχεία. Αν το λογότυπό σας ήρθε ως υπερβολική εξαγωγή, μεγέθυνση πρώτα ώστε να μην τροφοδοτείτε μια 20 megapixel σημαία σε ένα 16 pixel τετράγωνο.

Κάντε αυτό το επόμενο: ανοίξτε τον γεννήτορα εικονιδίων, ρίξτε το λογότυπό σας, ρυθμίστε το χρώμα φόντου ώστε να ταιριάζει με το πού θα καθίσει το εικονίδιο, δημιουργήστε, αποσυμπιέστε στη ρίζα του ιστού σας, επικολλήστε τις τέσσερις ετικέτες στο head σας και προσθέστε "start_url": "/" στο site.webmanifest. Στη συνέχεια, κάντε σκληρή ανανέωση της σελίδας και κοιτάξτε την καρτέλα. Αν η έκδοση 16px διαβάζεται ως μια θολή κηλίδα, επιστρέψτε και απλοποιήστε το σήμα πριν αλλάξετε οτιδήποτε άλλο. Οι σημειώσεις της Apple για την Διαμόρφωση Ιστοσελίδων αξίζουν μια ανάγνωση αν η αρχική οθόνη iOS είναι η προτεραιότητά σας.