Πώς να δημιουργήσετε ένα favicon.

Ανοίξτε το Favicon / ICO Generator και επιλέξτε Εικόνα (Image). Ανεβάστε ένα PNG, JPG, JPEG, WebP ή GIF, ή επιλέξτε Δοκιμή δείγματος (Try a sample). Το παράδειγμα εργασίας χρησιμοποιεί favicon-orbit.png, ένα σήμα μωβ τροχιάς 512 × 512 pixel με διαφανείς γωνίες. Η είσοδος είναι 202,491 byte.

Για ένα brand χωρίς έτοιμο λογότυπο, επιλέξτε Κείμενο (Text) στη σελίδα του εργαλείου. Εισαγάγετε ένα ή δύο γράμματα και επιλέξτε Συνέχεια (Continue). Ο επεξεργαστής προσφέρει γραμματοσειρές Modern sans, Classic serif και Monospace, καθώς και ξεχωριστά χρώματα κειμένου και φόντου. Γίνονται δεκτοί έως τρεις χαρακτήρες, αλλά οι επιπλέον χαρακτήρες μπορεί να γίνουν δύσκολοι στην αναγνώριση σε μικρά μεγέθη.

Κρατήστε το αρχικό έργο τέχνης. Η γεννήτρια δημιουργεί νέα αρχεία εικονιδίων και δεν αντικαθιστά την πηγή. Η είσοδος GIF γίνεται ένα στατικό εικονίδιο αντί για ένα κινούμενο favicon.

Για ένα μονόγραμμα, το μενού Γραμματοσειρά (Font) ξεκινά με τρία ενσωματωμένα στυλ. Επιλέξτε Χρήση γραμματοσειρών συστήματος (Use system fonts) σε υποστηριζόμενο πρόγραμμα περιήγησης επιτραπέζιου υπολογιστή και επιτρέψτε την πρόσβαση για να προσθέσετε τις γραμματοσειρές που είναι εγκατεστημένες στη συσκευή σας. Χρησιμοποιήστε τα προηγούμενα και επόμενα βέλη για να συγκρίνετε γειτονικές γραμματοσειρές, ή επιλέξτε μια οικογένεια και επιθεωρήστε τη ζωντανή προεπισκόπηση, ειδικά στα 16 pixel. Οι γραμματοσειρές παραμένουν στη συσκευή σας· τα ενσωματωμένα στυλ λειτουργούν χωρίς άδεια.

Ο επεξεργαστής εμφανίζει ανοιχτόχρωμες και σκουρόχρωμες καρτέλες προγράμματος περιήγησης καθώς και προεπισκοπήσεις σε κοινά μεγέθη εικονιδίων. Ελέγξτε πρώτα το παράδειγμα των 16 pixel· είναι το αυστηρότερο τεστ για το αν το σήμα παραμένει αναγνωρίσιμο. Η προεπισκόπηση Apple Touch αντιπροσωπεύει μια εξαγωγή 180 pixel και εμφανίζεται μικρότερη στον χώρο εργασίας.

Σε ένα τηλέφωνο, ανοίξτε τις Ρυθμίσεις (Settings). Αφήστε το Δημιουργία από (Create from) ρυθμισμένο σε Μεταφορτωμένη εικόνα (Uploaded image) και το Προσαρμογή εικόνας (Image fit) σε Εμφάνιση ολόκληρης της εικόνας (Show the whole image). Για αυτό το δείγμα, ορίστε το Διάστημα γύρω από το περιεχόμενο (Space around content) στο 0 και ενεργοποιήστε το Διαφανές φόντο (Transparent background). Η πηγή περιέχει ήδη το δικό της στρογγυλεμένο μωβ σχήμα και καθαρά περιθώρια, επομένως δεν χρειάζεται επιπλέον χρωματιστό φόντο.

Με μια διαφορετική πηγή, η Εμφάνιση ολόκληρης της εικόνας (Show the whole image) διατηρεί τις άκρες της, ενώ η Συμπλήρωση εικονιδίου (Fill the icon) μπορεί να τις περικόψει. Το Στρογγυλεμένο τετράγωνο, το Τετράγωνο και ο Κύκλος ορίζουν το εξωτερικό σχήμα. Το Διαφανές φόντο διατηρεί τις καθαρές περιοχές αλλά δεν μπορεί να αφαιρέσει ένα αδιαφανές φόντο που είναι ήδη σχεδιασμένο σε μια φωτογραφία. Ελέγχετε τη μικρότερη προεπισκόπηση μετά από κάθε αλλαγή καδραρίσματος.

Στην ενότητα Λήψη (Download), επιλέξτε Πακέτο εικονιδίων ιστότοπου (ZIP) για αυτό το παράδειγμα. Αφήστε το Όνομα ιστότοπου ως My website για το δείγμα ή αντικαταστήστε το με το πραγματικό όνομα της επωνυμίας σας για το δικό σας έργο. Αυτό το όνομα χρησιμοποιείται στο site.webmanifest· δεν προστίθεται ως κείμενο πάνω από την εικόνα.

Επιλέξτε Έναρξη (Start). Το πρόγραμμα περιήγησης δημιουργεί ένα favicon.ico επτά πλαισίων με τετράγωνες εικόνες σε 16, 24, 32, 48, 64, 128 και 256 pixel. Δημιουργεί επίσης εικονίδια PNG σε 16, 32, 48, 180, 192 και 512 pixel, ένα αρχείο manifest και οδηγίες εγκατάστασης. Το αποτέλεσμα είναι ένα αρχείο ZIP αντί για ξεχωριστό κουμπί λήψης για κάθε εικονίδιο.

Αν χρειάζεστε μόνο ένα κλασικό favicon.ico, επιλέξτε αντ' αυτού Πολυμεγέθες ICO. Αυτό είναι χρήσιμο όταν μια πλατφόρμα ιστότοπου δέχεται μεταφόρτωση ICO και δεν απαιτεί ξεχωριστό πακέτο.

Η Λήψη αποθηκεύει το website-icons.zip. Το πραγματικό παράδειγμα εργασίας περιέχει εννέα αρχεία και είναι 304,351 byte. Η παραπάνω σύγκριση δείχνει την πηγή 512 pixel δίπλα στο γνήσιο πλαίσιο 256 pixel που εξήχθη από το εξαγόμενο ICO, αντί για ένα προσομοιωμένο στιγμιότυπο οθόνης προγράμματος περιήγησης.

Αποσυμπιέστε το ZIP, ανεβάστε τα αρχεία εικονιδίων στη ρίζα του ιστότοπού σας και διαβάστε το INSTALL.txt. Περιλαμβάνει ετικέτες συνδέσμων HTML για το ICO, το εικονίδιο PNG, το εικονίδιο Apple Touch και το web manifest. Εάν τοποθετήσετε τα αρχεία σε έναν υποφάκελο, ενημερώστε τόσο τις διαδρομές HTML όσο και τις διαδρομές εικονιδίων μέσα στο site.webmanifest.

Ελέγξτε τον ιστότοπό σας σε μια νέα καρτέλα του προγράμματος περιήγησης και στις συσκευές που σας ενδιαφέρουν. Τα προγράμματα περιήγησης μπορούν να αποθηκεύσουν τα favicon στην προσωρινή μνήμη (cache), επομένως ένα παλιό εικονίδιο δεν αποδεικνύει αμέσως ότι η εγκατάσταση απέτυχε. Διατηρήστε την εικόνα προέλευσης και το πακέτο λήψης πριν ανανεώσετε το πρόγραμμα επεξεργασίας, επειδή η ανανέωση επιστρέφει στην κύρια σελίδα του εργαλείου.