Ποια αρχεία favicon χρειάζεται μια ιστοσελίδα και τα μεγέθη τους

Μια ιστοσελίδα χρειάζεται ένα μικρό σύνολο αρχείων εικονιδίων, και οι περισσότερες αποφάσεις αφορούν το μέγεθος. Βάλτε ένα favicon.ico με εικόνες των 16, 32 και 48 pixel στη ρίζα του ιστότοπου, για τις καρτέλες του προγράμματος περιήγησης και τα Windows. Προσθέστε ένα Apple touch icon των 180 pixel για την αρχική οθόνη του iPhone και του iPad, και εικονίδια PNG των 192 και 512 pixel στο αρχείο web app manifest. Η Δημιουργός favicon φτιάχνει όλα αυτά από ένα λογότυπο και γράφει τις γραμμές HTML για να τις επικολλήσετε στις σελίδες σας.

Τα αρχεία και τα μεγέθη τους

Το ZIP που κατεβάζει η δημιουργός περιέχει και τα επτά αρχεία. Το favicon.ico φτιάχνεται από τρεις εικόνες PNG, των 16, 32 και 48 pixel, αποθηκευμένες μέσα σε ένα αρχείο. Κάθε εικονίδιο είναι το ίδιο λογότυπο σε μικρότερο μέγεθος. Η δημιουργός δουλεύει με μια έκδοση 512 pixel της εικόνας σας και φτιάχνει κάθε μέγεθος από αυτήν.

Οι γραμμές HTML

Η δημιουργός γράφει τέσσερις γραμμές για το head των σελίδων σας:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Η πρώτη γραμμή δείχνει στο favicon.ico και το δηλώνει 48 επί 48. Η δεύτερη δίνει το PNG των 32 pixel. Η τρίτη ονομάζει το Apple touch icon, και η τέταρτη δείχνει στο manifest, όπου είναι καταχωρισμένα τα εικονίδια των 192 και 512 pixel. Το PNG των 16 pixel είναι στο ZIP, αλλά όχι σε αυτές τις γραμμές. Τα προγράμματα περιήγησης ψάχνουν επίσης μόνα τους το /favicon.ico, οπότε το αρχείο βρίσκεται ακόμη κι αν λείπει η πρώτη γραμμή. Κρατήστε τις διαδρομές όπως είναι γραμμένες, εκτός αν τα αρχεία σας βρίσκονται σε άλλο φάκελο.

Γιατί τα μικρά μεγέθη θέλουν απλά σχήματα

Σε 16 επί 16 pixel, ένα εικονίδιο έχει συνολικά 256 pixel. Ένα εικονίδιο των 48 pixel έχει 2.304, και η πηγή των 512 pixel έχει 262.144. Οι περισσότερες λεπτομέρειες ενός λογότυπου χάνονται μέχρι τα 16 pixel, οπότε μια λεπτή γραμμή ή μια μικρή λέξη γίνεται θολούρα. Χρησιμοποιήστε ένα απλό σήμα, ή ένα ή δύο γράμματα με έντονη αντίθεση.

Η επιλογή γράμματος δέχεται έναν ή δύο χαρακτήρες και τους σχεδιάζει μεγάλους στη μέση του εικονιδίου, μικραίνοντάς τους αν είναι πολύ πλατιοί. Τα σχήματα είναι Τετράγωνο, Στρογγυλεμένο και Κύκλος. Η προεπισκόπηση δείχνει τα αποτελέσματα των 16, 32, 48, 180 και 512 pixel δίπλα δίπλα, και τις καρτέλες φωτεινού και σκούρου, ώστε να κρίνετε τα μικρά μεγέθη πριν κατεβάσετε. Οι προεπισκοπήσεις ενημερώνονται καθώς αλλάζετε σχήμα, περιθώριο ή φόντο, οπότε μπορείτε να δοκιμάσετε κάθε ρύθμιση πρώτα.

Περιθώριο, φόντο και το εικονίδιο Apple

Το περιθώριο έχει τρεις ρυθμίσεις: Χωρίς περιθώριο, Μικρό και Μεγάλο. Το Μικρό αφήνει κενό το 10 τοις εκατό του εικονιδίου σε κάθε πλευρά, και το Μεγάλο το 20 τοις εκατό. Στη λειτουργία εικόνας, το Χωρίς περιθώριο περικόπτει τη φωτογραφία στο κεντρικό της τετράγωνο, οπότε χάνονται τα άκρα ενός φαρδιού λογότυπου. Οι ρυθμίσεις με περιθώριο χωρούν ολόκληρη την εικόνα μέσα στο τετράγωνο.

Οι επιλογές φόντου είναι Διαφανές, Λευκό και Προσαρμογή, και το προεπιλεγμένο είναι το Διαφανές. Το Apple touch icon είναι πάντα αδιαφανές. Στη λειτουργία εικόνας, οι διαφανείς περιοχές του παίρνουν το επιλεγμένο φόντο, ή λευκό αν το φόντο είναι Διαφανές. Στη λειτουργία γράμματος παίρνουν το χρώμα φόντου του γράμματος. Οι διαφανείς περιοχές ενός Apple touch icon μπορεί να εμφανιστούν μαύρες σε iPhone και iPad, γι' αυτό η δημιουργός τις γεμίζει. Τα άλλα μεγέθη κρατούν τη διαφάνεια που επιλέξατε. Το γιατί ένα διαφανές PNG γίνεται μαύρο εξηγεί την αιτία.

Ένα favicon είναι τετράγωνο, οπότε ένα φαρδύ λογότυπο χρειάζεται πρώτα τετράγωνο πλαίσιο. Η Τετράγωνη φωτογραφία χωρά ολόκληρη την εικόνα μέσα σε πλαίσιο 1:1, με θολό, λευκό, μαύρο ή προσαρμοσμένο περιθώριο, ώστε τίποτα να μην κοβεί. Η Αλλαγή μεγέθους εικόνας ορίζει ακριβή pixel. Με ενεργό το Διατήρηση αναλογιών και συμπληρωμένες και τις δύο πλευρές, η εικόνα χωρά μέσα στο πλαίσιο χωρίς παραμόρφωση. Το Οι αναλογίες διαστάσεων των φωτογραφιών εξηγημένες καλύπτει τα συνηθισμένα σχήματα.

Αλλαγές που θέλουν χρόνο για να φανούν

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

Πώς να το κάνετε με το fixmint

1. Επιλέξτε Εικόνα και σύρετε το λογότυπό σας στο πλαίσιο, ή επιλέξτε Γράμμα και γράψτε έναν ή δύο χαρακτήρες.
2. Ορίστε το Περιθώριο σε Κανένα, Μικρό ή Μεγάλο, και το Φόντο σε Διαφανές, Λευκό ή Προσαρμοσμένο χρώμα.
3. Ελέγξτε τα εικονίδια των 16, 32 και 48 px στις καρτέλες φωτεινού και σκούρου, και τις προεπισκοπήσεις των 180 και 512 px.
4. Πατήστε Λήψη ZIP για και τα επτά αρχεία, ή Λήψη favicon.ico για αυτό μόνο το αρχείο.
5. Πατήστε Αντιγραφή HTML και επικολλήστε τις γραμμές από το HTML για το head σας στο head κάθε σελίδας.

Ειδικές περιπτώσεις

• Η εικόνα σας μένει στη συσκευή σας. Η δημιουργός φτιάχνει τα εικονίδια στο πρόγραμμα περιήγησής σας, και τίποτα δεν ανεβαίνει.
• Δύο γράμματα. Τα δύο γράμματα γίνονται δεκτά και σχεδιάζονται μικρότερα ώστε να χωρούν και τα δύο, κάτι που τα κάνει πιο δύσκολα αναγνώσιμα στα 16 pixel από ένα μόνο γράμμα.
• Ονόματα αρχείων. Κρατήστε τα ονόματα που χρησιμοποιεί το HTML, γιατί οι σύνδεσμοι δείχνουν σε αυτά.
• Αναγνώσιμα αρχεία. Αν μια εικόνα δεν μπορεί να μετατραπεί σε εικονίδια, η δημιουργός εμφανίζει το μήνυμα «Δεν ήταν δυνατή η δημιουργία εικονιδίων από αυτή την είσοδο. Δοκιμάστε μια άλλη εικόνα.» και καθαρίζει τα αποτελέσματα. Δοκιμάστε διαφορετικό αρχείο, ή αποθηκεύστε ξανά την εικόνα σε κοινή μορφή.