Μετατρέψτε PNG σε ICO για ένα ευκρινές favicon
Ένα favicon είναι η μικροσκοπική εικόνα που δίνει σε έναν ιστότοπο τη οπτική του υπογραφή. Το βλέπετε στην καρτέλα του browser δίπλα στον τίτλο της σελίδας, στη λίστα σελιδοδεικτών σας, στο αναδιπλούμενο μενού ιστορικού περιήγησης στη γραμμή διευθύνσεων, και μερικές φορές δίπλα σε αποτελέσματα αναζήτησης. Είναι μικρό, αλλά κάνει πολλή δουλειά: ένα αναγνωρίσιμο favicon βοηθά τους χρήστες να βρουν την καρτέλα σας ανάμεσα σε μια ντουζίνα άλλες και σηματοδοτεί ότι ένας ιστότοπος είναι ολοκληρωμένος και φροντισμένος. Η κλασική μορφή για αυτό το μικρό εικονίδιο είναι το ICO, και ο ευκολότερος τρόπος να φτιάξετε ένα είναι να ξεκινήσετε από ένα καθαρό τετράγωνο PNG και να το μετατρέψετε.
Αυτό το εργαλείο παίρνει μια εικόνα PNG και τη μετατρέπει σε favicon ICO ακριβώς μέσα στον browser σας. Η μετατροπή γίνεται τοπικά χρησιμοποιώντας τη δική σας συσκευή, οπότε η εικόνα που επιλέγετε δεν ανεβαίνει ποτέ σε server. Αυτό έχει σημασία όταν το εικονίδιό σας είναι ένα λογότυπο ή στοιχείο επωνυμίας που δεν θα προτιμούσατε να παραδώσετε σε τρίτο. Όταν το αρχείο είναι έτοιμο, απλώς το κατεβάζετε.
Τι είναι η μορφή ICO και γιατί κρατά πολλά μεγέθη
Το ICO είναι μια μορφή container εικονιδίων που προήλθε από τα Microsoft Windows, όπου αποθηκεύει τα εικονίδια που χρησιμοποιούνται για προγράμματα, συντομεύσεις και φακέλους. Το χαρακτηριστικό του γνώρισμα, και ο λόγος που έγινε το πρότυπο για τα favicon του web, είναι ότι ένα μόνο αρχείο ICO μπορεί να κρατήσει την ίδια εικόνα σε πολλές αναλύσεις ταυτόχρονα. Αντί για ένα σταθερό bitmap, το αρχείο πακετάρει ένα μικρό σύνολο τετράγωνων εικόνων και αφήνει τον browser ή το λειτουργικό σύστημα να επιλέξει όποιο μέγεθος ταιριάζει στο σημείο που χρειάζεται να σχεδιάσει το εικονίδιο.
Αυτό είναι γνησίως χρήσιμο. Μια καρτέλα browser χρειάζεται ένα μικροσκοπικό εικονίδιο, μια μπάρα σελιδοδεικτών μπορεί να χρησιμοποιεί ένα ελαφρώς μεγαλύτερο, και μια καρφιτσωμένη συντόμευση στην επιφάνεια εργασίας μπορεί να ζητά κάτι ακόμα μεγαλύτερο. Με ένα ICO πολλαπλών μεγεθών, κάθε πλαίσιο αρπάζει την έκδοση που του ταιριάζει, οπότε το εικονίδιό σας παραμένει ευκρινές αντί να κλιμακώνεται από ένα μόνο μικρό bitmap και να γίνεται θολό. Το ICO διατηρεί επίσης τη διαφάνεια, κάτι που κρατά τις γωνίες ενός στρογγυλού ή ακανόνιστου λογότυπου καθαρές πάνω σε οποιοδήποτε χρώμα καρτέλας.
Συνιστώμενα μεγέθη favicon
Για ένα favicon ιστότοπου, τα τρία μεγέθη που αξίζει να συμπεριλάβετε είναι 16x16, 32x32 και 48x48 pixel. Η έκδοση 16 pixel είναι αυτή που εμφανίζουν οι περισσότεροι browser στην καρτέλα και τη γραμμή διευθύνσεων. Η έκδοση 32 pixel χρησιμοποιείται σε οθόνες υψηλότερης ανάλυσης και σε ορισμένες προβολές σελιδοδεικτών και ιστορικού, οπότε διατηρεί την ευκρίνεια σε σύγχρονες οθόνες. Η έκδοση 48 pixel καλύπτει μεγαλύτερα πλαίσια όπως συντομεύσεις ιστότοπων Windows. Επειδή όλα ζουν μέσα σε ένα αρχείο ICO, ναυλώνετε ένα μόνο στοιχείο και αφήνετε κάθε επιφάνεια να επιλέξει αυτό που χρειάζεται.
Ξεκινήστε από ένα τετράγωνο PNG ώστε τίποτα να μην τεντωθεί. Αν η πηγαία εικόνα σας είναι ορθογώνια ή υπερμεγέθης, περικόψτε ή κλιμακώστε την σε ένα καθαρό τετράγωνο πρώτα με τον αλλαγέα μεγέθους εικόνας μας, και μετά εκτελέστε τη μετατροπή. Ένα απλό, υψηλής αντίθεσης σχέδιο διαβάζεται πολύ καλύτερα στα 16 pixel από μια λεπτομερή εικονογράφηση, οπότε προτιμήστε τολμηρά σχήματα από λεπτό κείμενο.
Πώς να προσθέσετε το favicon στον ιστότοπό σας
Μόλις έχετε το αρχείο ICO σας, ανεβάστε το στον ιστότοπό σας, παραδοσιακά στη ρίζα του ιστότοπου ως favicon.ico. Πολλοί browser θα το βρουν εκεί αυτόματα, αλλά είναι καλή πρακτική να το δηλώσετε ρητά στην κεφαλή του HTML σας ώστε να μην υπάρχουν εικασίες. Προσθέστε μια ετικέτα link όπως αυτή:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Τοποθετήστε αυτή τη γραμμή μέσα στην ενότητα <head> των σελίδων σας. Το χαρακτηριστικό rel="icon" λέει στον browser ότι αυτός ο πόρος είναι το εικονίδιο σελίδας, και το href δείχνει όπου αποθηκεύσατε το αρχείο. Αν χρησιμοποιείτε μια σχετική με τη ρίζα διαδρομή όπως η παραπάνω, η ίδια δήλωση λειτουργεί σε κάθε σελίδα του ιστότοπού σας. Μετά την ανάπτυξη, μπορεί να χρειαστεί να κάνετε σκληρή ανανέωση ή εκκαθάριση της προσωρινής μνήμης πριν εμφανιστεί το νέο εικονίδιο, αφού οι browser κρατούν τα favicon επίμονα.
Ιδιωτική μετατροπή στον browser σας
Τα πάντα συμβαίνουν στη συσκευή σας. Το PNG που επιλέγετε διαβάζεται, αποκωδικοποιείται και επανακωδικοποιείται ως ICO τοπικά, και τίποτα δεν εγκαταλείπει το μηχάνημά σας κατά τη διαδικασία. Δεν υπάρχει λογαριασμός, ουρά αναμονής, ή αποθήκευση στον server, κάτι που το καθιστά βολικό ακόμα και για αδημοσίευτα λογότυπα ή εργασία πελατών υπό συμφωνία. Για περισσότερους τρόπους προετοιμασίας και τακτοποίησης γραφικών, περιηγηθείτε στο πλήρες σύνολο εργαλείων εικόνας μας.
Συχνές ερωτήσεις
Ανεβαίνει η εικόνα μου κάπου;
Όχι. Το PNG μετατρέπεται σε ICO εξ ολοκλήρου στον browser σας, στη δική σας συσκευή. Τίποτα δεν αποστέλλεται σε server και τίποτα δεν αποθηκεύεται, οπότε η εικόνα σας παραμένει ιδιωτική.
Ποια μεγέθη πρέπει να περιλαμβάνει το favicon μου;
Τα πιο χρήσιμα μεγέθη είναι 16x16, 32x32 και 48x48 pixel. Η εικόνα 16 pixel εμφανίζεται σε καρτέλες browser, ενώ οι μεγαλύτερες διατηρούν το εικονίδιο ευκρινές σε οθόνες υψηλής ανάλυσης και συντομεύσεις επιφάνειας εργασίας.
Γιατί να χρησιμοποιήσω ICO αντί απλώς PNG;
Το ICO είναι η διαχρονική μορφή favicon και μπορεί να αποθηκεύσει πολλά μεγέθη μέσα σε ένα αρχείο. Οι browser και το λειτουργικό σύστημα επιλέγουν την ανάλυση που ταιριάζει σε κάθε πλαίσιο, οπότε το εικονίδιο παραμένει ευκρινές αντί να κλιμακώνεται από ένα μόνο bitmap.
Διατηρεί το ICO τη διαφάνεια από το PNG μου;
Ναι. Η μορφή ICO υποστηρίζει διαφάνεια, οπότε οι διαφανείς περιοχές του PNG σας διατηρούνται και το εικονίδιο συνδυάζεται καθαρά με οποιοδήποτε χρώμα καρτέλας ή φόντου.
Πώς προσθέτω το favicon στον ιστότοπό μου;
Ανεβάστε το αρχείο ICO στον ιστότοπό σας, συνήθως ως favicon.ico στη ρίζα, και προσθέστε μια ετικέτα link στην κεφαλή του HTML σας όπως link rel icon type image x-icon href slash favicon.ico. Μετά καθαρίστε την προσωρινή μνήμη του browser σας για να το δείτε.
Η πηγαία εικόνα μου δεν είναι τετράγωνη. Τι πρέπει να κάνω;
Περικόψτε ή κλιμακώστε την σε τετράγωνο πρώτα ώστε να μην τεντωθεί. Μπορείτε να χρησιμοποιήσετε τον αλλαγέα μεγέθους εικόνας μας για να φτιάξετε ένα καθαρό τετράγωνο, και μετά να το μετατρέψετε σε ICO για το καλύτερο δυνατό favicon.