Γεννήτρια Favicon

Τι είναι αυτό το εργαλείο

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

Η γεννήτρια favicon δημιουργήθηκε για να απαλλάξει τους προγραμματιστές και τους σχεδιαστές από τη βαρετή εργασία της προετοιμασίας εικόνων. Οι σύγχρονες συσκευές έχουν διαφορετικές απαιτήσεις ανάλυσης: από παλιές οθόνες μέχρι οθόνες retina σε smartphones και tablets. Η δημιουργία κάθε μεγέθους χειροκίνητα σε ένα πρόγραμμα επεξεργασίας γραφικών είναι πολύ χρονοβόρα, οπότε η αυτοματοποίηση αυτής της διαδικασίας είναι η βέλτιστη λύση.

Το εργαλείο είναι κατάλληλο τόσο για ιδιοκτήτες απλών landing pages όσο και για προγραμματιστές σύνθετων διαδικτυακών εφαρμογών. Επιτρέπει τη μετατροπή ενός ποιοτικού αρχείου προέλευσης σε ένα ολόκληρο σύνολο εικονιδίων που θα εμφανίζονται σωστά σε Chrome, Safari, Firefox και στα εικονίδια επιφάνειας εργασίας iOS ή Android.

Δυνατότητες

• Υποστήριξη διανυσματικής μορφής SVG, που εξασφαλίζει τέλεια ευκρίνεια των εικονιδίων σε οποιαδήποτε κλίμακα.
• Εργασία με ψηφιδωτές εικόνες, αν δεν έχετε διανυσματικό λογότυπο.
• Δημιουργία ειδικών maskable εικονιδίων για Android, που προσαρμόζονται σε διάφορα σχήματα συστημικών μασκών (κύκλος, τετράγωνο, στρογγυλεμένο τετράγωνο).
• Ρύθμιση χρώματος φόντου για εικονίδια Apple Touch, ώστε το λογότυπο να μην φαίνεται κομμένο σε σκούρα ή φωτεινή οθόνη.
• Δυνατότητα ορισμού theme color, που αλλάζει το χρώμα της γραμμής του περιηγητή σε κινητές συσκευές σύμφωνα με το στυλ της επωνυμίας σας.
• Δημιουργία πλήρους συνόλου αρχείων, συμπεριλαμβανομένου του κλασικού favicon.ico και σύγχρονων παραλλαγών PNG.
• Παραγωγή έτοιμου κώδικα HTML, που απλώς αντιγράφετε στην ενότητα head του εγγράφου σας.

Πώς να το χρησιμοποιήσετε

1. Ως πρώτο βήμα, ανεβάστε την εικόνα προέλευσης. Συνιστάται η χρήση SVG, καθώς αυτό εγγυάται την απουσία θολούρας κατά τη δημιουργία μεγάλων εικονιδίων για smartphones. Αν χρησιμοποιείτε PNG ή JPG, βεβαιωθείτε ότι η εικόνα έχει τετράγωνο σχήμα και επαρκή ανάλυση.
2. Μεταβείτε στις ρυθμίσεις εμφάνισης. Εδώ μπορείτε να καθορίσετε το όνομα της εφαρμογής σας, που θα εμφανίζεται κάτω από το εικονίδιο αν ο χρήστης προσθέσει τον ιστότοπο στην αρχική οθόνη του τηλεφώνου. Επίσης, επιλέξτε theme color. Αυτό είναι το χρώμα που θα γεμίσει το πάνω μέρος του περιηγητή σε Android Chrome, δημιουργώντας την αίσθηση μιας ολοκληρωμένης εφαρμογής.
3. Ρυθμίστε το φόντο για ειδικές μορφές. Για τα εικονίδια Apple και maskable είναι σημαντικό το λογότυπο να είναι κεντραρισμένο και να έχει επαρκή απόσταση από τις άκρες. Αν το λογότυπό σας είναι διαφανές, επιλέξτε ένα χρώμα φόντου που αναδεικνύει καλύτερα τα γραφικά.
4. Πατήστε το κουμπί Δημιουργία favicon. Το σύστημα θα επεξεργαστεί την εικόνα σας και θα δημιουργήσει όλες τις απαραίτητες παραλλαγές σε δευτερόλεπτα.
5. Επιλέξτε τον τρόπο λήψης του αποτελέσματος. Μπορείτε να κατεβάσετε κάθε αρχείο ξεχωριστά, αν χρειάζεστε μόνο ένα μέγεθος, ή να κατεβάσετε ολόκληρο το πακέτο σε ένα αρχείο ZIP για εύκολη μεταφορά στον διακομιστή.
6. Το τελικό βήμα είναι η ενσωμάτωση. Αντιγράψτε το παρεχόμενο HTML-snippet και επικολλήστε το στο block head του ιστότοπού σας. Αυτό θα ενημερώσει τους περιηγητές πού να αναζητήσουν τα εικονίδια και πώς να τα χρησιμοποιήσουν σε διαφορετικές συσκευές.

Τυπικά σενάρια

Δημιουργία εταιρικού ιστότοπου. Η εταιρεία έχει λογότυπο σε μορφή SVG. Με τη βοήθεια του εργαλείου δημιουργούν ένα πλήρες πακέτο εικονιδίων, ώστε η επωνυμία να φαίνεται επαγγελματική τόσο στον περιηγητή σε υπολογιστή όσο και στους σελιδοδείκτες σε iPhone.

Εκκίνηση Progressive Web App (PWA). Για τέτοιες εφαρμογές είναι κρίσιμο να έχουν maskable εικονίδια. Ο προγραμματιστής ανεβάζει το λογότυπο, ορίζει το χρώμα φόντου και το όνομα της εφαρμογής, και στη συνέχεια λαμβάνει αρχεία που επιτρέπουν στον ιστότοπο να φαίνεται σαν εγγενής εφαρμογή σε Android.

Ενημέρωση παλιού έργου. Ο ιδιοκτήτης του ιστότοπου παρατήρησε ότι το εικονίδιό του φαίνεται θολό σε νέες οθόνες. Ανεβάζει το ποιοτικό πρωτότυπο στη Γεννήτρια favicon, λαμβάνει ένα σύγχρονο σύνολο PNG και ενημερώνει τον κώδικα HTML, ώστε ο ιστότοπος να συμμορφώνεται με τα σύγχρονα πρότυπα εμφάνισης.

Συμβουλές και συνηθισμένα λάθη

Ένα από τα πιο συνηθισμένα λάθη είναι η χρήση υπερβολικά λεπτομερών εικόνων. Θυμηθείτε ότι το favicon στην καρτέλα του περιηγητή έχει μέγεθος 16 επί 16 pixel. Μικρά κείμενα ή σύνθετα μοτίβα θα μετατραπούν σε μια δυσδιάκριτη κηλίδα. Χρησιμοποιήστε μια απλοποιημένη έκδοση του λογοτύπου, για παράδειγμα, μόνο το πρώτο γράμμα του ονόματος ή ένα λιτό σύμβολο.

Προσέξτε τις ασφαλείς ζώνες. Κατά τη δημιουργία maskable εικονιδίων για Android, μην τοποθετείτε σημαντικά στοιχεία γραφικών πολύ κοντά στην άκρη. Το σύστημα μπορεί να κόψει τις γωνίες ή να κάνει το εικονίδιο στρογγυλό, οπότε το κύριο σύμβολο πρέπει να είναι στο κέντρο.

Μην ξεχνάτε την αντίθεση. Αν το λογότυπό σας είναι λευκό και δεν έχετε ορίσει χρώμα φόντου για το εικονίδιο Apple Touch, μπορεί απλώς να ενωθεί με το λευκό φόντο του συστήματος. Πάντα να ελέγχετε πώς φαίνεται το εικονίδιο σε διαφορετικά χρώματα.

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