Статьи

Πώς να δημιουργήσετε ένα favicon για τον ιστότοπο: χρήσιμες συμβουλές και υπηρεσίες

  1. Πώς να δημιουργήσετε ένα favicon
  2. Πώς να φτιάξετε ένα favicon στο Photoshop
  3. Πώς να αποθηκεύσετε ένα favicon
  4. Πώς να εισαγάγετε το site favicon
  5. Πώς να αντικαταστήσετε το favicon
  6. Πώς να δημιουργήσετε πιο περίπλοκα favicons

Είναι δύσκολο να μαντέψετε τι είναι ένα favicon όταν ακούτε για πρώτη φορά αυτή τη λέξη. Αυτό το εικονίδιο μικρογράφου εμφανίζεται στις καρτέλες των φυλλομετρητών, στις γραμμές διευθύνσεων και σε άλλες περιοχές, ανάλογα με το λειτουργικό σύστημα που χρησιμοποιείτε και το πρόγραμμα περιήγησης στο Internet. Μπορεί να ονομαστεί με ασφάλεια ένα από τα πιο περίπλοκα και ιδιότροπα στοιχεία του σχεδιασμού της ιστοσελίδας.

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

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

Ας ξεκινήσουμε με το σχεδιασμό του favicon. Ο καλός σχεδιασμός, παρά τη συμπαγή του μορφή, θα πρέπει να αντικατοπτρίζει την ουσία του ιστότοπού σας και να αποτελεί οργανικό στοιχείο της εταιρικής ταυτότητας. Συνήθως, το εικονίδιο είναι ένα γραφικό σύμβολο (εικονίδιο) μιας εταιρείας και όχι ένα ολόκληρο λογότυπο (εικονίδιο, κείμενο και σύνθημα).

Ως favicon, αυτοί οι ιστότοποι χρησιμοποιούν τα εικονίδια τους (ή εικόνες κοντά τους) Ως favicon, αυτοί οι ιστότοποι χρησιμοποιούν τα εικονίδια τους (ή εικόνες κοντά τους).

Το κείμενο στο favicon δεν θα πρέπει να χρησιμοποιείται, δεδομένου ότι αυτό το κείμενο θα είναι δυσανάγνωστο λόγω του μικρού μεγέθους εικόνας. Οι μόνες εξαιρέσεις σε αυτόν τον κανόνα είναι παγκοσμίως γνωστοί χαρακτήρες κειμένου που συσχετίζονται αυτόματα με ένα συγκεκριμένο εμπορικό σήμα. Για παράδειγμα, ο ηλεκτρονικός πόρος Wikipedia άφησε στο favicon το κεφαλαίο γράμμα του "W", και το Facebook - το γράμμα "F".

Σε αυτά τα favicons υπάρχουν επιστολές που συνδέονται στενά με ένα συγκεκριμένο εμπορικό σήμα
Σε αυτά τα favicons υπάρχουν επιστολές που συνδέονται στενά με ένα συγκεκριμένο εμπορικό σήμα. Για παράδειγμα, το Facebook χρησιμοποιεί το γραφικό του σύμβολο. Σημειώστε επίσης ότι τα εικονοστοιχεία είναι ορατά στην εικόνα της Disney. Αυτό οφείλεται στο γεγονός ότι το στιγμιότυπο λήφθηκε σε μια οθόνη Retina, η οποία είναι συμβατή με εικονίδια 16 × 16, ενώ οι ιστότοποι χρησιμοποιούν 32 × 32 εικονίδια.

Επειδή τα favicons είναι μικρές εικόνες, κάθε pixel παίζει σημαντικό ρόλο. Μερικές φορές, μετά τη μείωση του λογότυπου, τα μεμονωμένα εικονοστοιχεία γίνονται ορατά, εξαιτίας των οποίων η εικόνα γίνεται «θολή». Για να επιτευχθεί σαφήνεια, πρέπει να επεξεργαστείτε το εικονίδιο σε επίπεδο εικονοστοιχείων.

Για να αποφευχθεί αυτό, πρέπει να αλλάξετε το μέγεθος του λογότυπου χρησιμοποιώντας ειδικούς επεξεργαστές όπως το Photoshop ή το GIMP
Για να αποφευχθεί αυτό, πρέπει να αλλάξετε το μέγεθος του λογότυπου χρησιμοποιώντας ειδικούς επεξεργαστές όπως το Photoshop ή το GIMP. Πρώτα πρέπει να μειώσετε το μέγεθος της εικόνας στα 64x64 εικονοστοιχεία (αυτό είναι το μεγαλύτερο μέγεθος favicon). Στη συνέχεια, θα πρέπει να επεξεργαστείτε κάθε εικονοστοιχείο χρησιμοποιώντας το εργαλείο Μολύβι μέχρι να καθαρίσει η εικόνα. Αυτή είναι μια επίπονη διαδικασία, αλλά το αποτέλεσμα αξίζει τον κόπο. Όταν το favicon 64x64 είναι έτοιμο, πρέπει να κάνετε την ίδια εργασία με την εικόνα των 16 × 16, 24 × 24 και 32 × 32 εικονοστοιχείων. Τόσα μεγέθη που χρειάζεστε για να απεικονίσετε σωστά σε όλα τα προγράμματα περιήγησης και τα gadget:

  • 64x64 - Σελιδοδείκτες του προγράμματος περιήγησης Safari.
  • 32x32 - οθόνες υψηλής ανάλυσης (αμφιβληστροειδή).
  • 24x24 - σελιδοδείκτες Internet Explorer και MicroSoft Edge.
  • 16x16 - Google Chrome και άλλα προγράμματα περιήγησης.

Πώς να φτιάξετε ένα favicon στο Photoshop

Πρώτα πρέπει να δημιουργήσετε μερικές καμβά με τις παραπάνω διαστάσεις.

Στη συνέχεια, πρέπει να προσθέσετε ένα εικονίδιο, ένα γράμμα ή μια άλλη εικόνα στον καμβά
Στη συνέχεια, πρέπει να προσθέσετε ένα εικονίδιο, ένα γράμμα ή μια άλλη εικόνα στον καμβά.

Στη συνέχεια, πρέπει να προσθέσετε ένα εικονίδιο, ένα γράμμα ή μια άλλη εικόνα στον καμβά

Πώς να αποθηκεύσετε ένα favicon

Έχοντας δημιουργήσει εικονίδια διαφόρων μεγεθών, αποθηκεύστε το κάθε ένα ως διαφανές αρχείο PNG (24 bit). Στο Photoshop, μπορείτε να χρησιμοποιήσετε τη δυνατότητα Αποθήκευση για Web διαθέσιμη στο μενού Αρχείο. Στη συνέχεια, πρέπει να συγχωνεύσετε όλα τα αρχεία PNG σε ένα αρχείο ICO. Μπορείτε να χρησιμοποιήσετε ταυτόχρονα τόσο τα αρχεία PNG όσο και τα αρχεία ICO, αλλά συχνά και το Safari και το Chrome προτιμούν μόνο τη μορφή ICO. Κατά τη γνώμη μου, είναι ευκολότερο να δημιουργήσετε ένα αρχείο ICO. Η μορφή ICO δεν είναι πολύ συνηθισμένη, αλλά ευτυχώς υπάρχουν διάφορα εργαλεία που μπορούν να σας βοηθήσουν να μετατρέψετε τα αρχεία σας σε αυτή τη μορφή. Για το σκοπό αυτό, προτιμώ να το χρησιμοποιήσω X-Icon Editor . Πρόκειται για μια δωρεάν ηλεκτρονική υπηρεσία που μετατρέπει αμέσως τις ληφθείσες εικόνες σε ένα αρχείο ICO, μετά από την οποία μπορείτε να το κατεβάσετε. Αυτό δεν είναι περίπλοκο, απλώς ακολουθήστε τις οδηγίες στην τοποθεσία. Εάν θεωρείτε τον εαυτό σας ένα απελπισμένο άτομο, μπορείτε να πειραματιστείτε με τον επεξεργαστή pixel αυτής της υπηρεσίας και να σχεδιάσετε έναν εαυτό σας favicon. (Αν και προτιμώ να επεξεργαστώ favicons σε έναν πιο επαγγελματικό συντάκτη, για παράδειγμα, στο Photoshop).

Μεταφορτώνοντας τις εικόνες σας PNG στον επεξεργαστή X-Icon, θα λάβετε ένα αρχείο ICO στην έξοδο
Μεταφορτώνοντας τις εικόνες σας PNG στον επεξεργαστή X-Icon, θα λάβετε ένα αρχείο ICO στην έξοδο.

Πώς να εισαγάγετε το site favicon

Έτσι, έχετε ήδη ένα αρχείο ICO. Τώρα πρέπει να το προσθέσετε στην ιστοσελίδα. Μετονομάστε το αρχείο στο favicon.ico και τοποθετήστε το στο ριζικό φάκελο της ιστοσελίδας σας (όπου αποθηκεύονται το αρχείο index.html και άλλα τυποποιημένα αρχεία). Μετά την επιτυχή προσθήκη, μπορείτε να την δείτε στην ιστοσελίδα σας .com / favicon.ico. Σχεδόν όλα τα προγράμματα περιήγησης αναζητούν το αρχείο favicon.ico στο ριζικό φάκελο. Επομένως, είναι σημαντικό να κατεβάσετε το favicon σε αυτό το φάκελο. Για συμβατότητα με διαφορετικά προγράμματα περιήγησης, είναι προτιμότερο να μην προσθέσετε στοιχεία HTML ή συνδέσμους που να υποδεικνύουν τη θέση της. Αυτό το τέχνασμα λειτουργεί για όλα τα προγράμματα περιήγησης, μέχρι το IE6. Επίσης, αν έχετε έναν ιστότοπο WordPress, τότε σε πολλά θέματα μπορείτε να προσθέσετε ένα favicon στις ρυθμίσεις θέματος. Αυτή η μέθοδος μπορεί επίσης να χρησιμοποιηθεί.

Πώς να αντικαταστήσετε το favicon

Για κάποιο ανεξήγητο λόγο, τα προγράμματα περιήγησης τα προσθέτουν στην κρυφή μνήμη. Επομένως, όταν ανεβάζετε ένα νέο αρχείο ICO, το πρόγραμμα περιήγησης ενδέχεται να συνεχίσει να εμφανίζει το παλιό σας φάκελο. Τι να κάνετε σε αυτή την περίπτωση; Μπορείτε να προσθέσετε ένα προσωρινό αρχείο HTML που υποδεικνύει τη θέση του νέου σας favicon. Επίσης στο τέλος της διεύθυνσης URL θα πρέπει να προσθέσετε μια σύντομη συμβολοσειρά ερωτήματος:

<link rel = "εικονίδιο συντόμευσης" href = "ο ιστότοπός σας .com / favicon.ico? v = 2" />

Έτσι, το πρόγραμμα περιήγησης θα θεωρήσει ότι πρόκειται για ένα μοναδικό URL και, ως εκ τούτου, θα αναγκαστεί να εμφανίσει ένα νέο εικονίδιο. Μετά την ενημέρωση του favicon, αυτός ο κώδικας HTML μπορεί να καταργηθεί εντελώς. Εάν πρέπει να κάνετε αλλαγές στο favicon, χρησιμοποιήστε την ίδια τεχνική, κάθε φορά που αυξάνετε τον αριθμό μετά το "v" της συμβολοσειράς ερωτήματος. Έτσι, το πρόγραμμα περιήγησης θα θεωρεί κάθε φορά αυτό το URL ως μοναδικό και θα εμφανίζει τη νέα του έκδοση. Και μην ξεχάσετε να διαγράψετε τον κώδικα HTML μετά από μια επιτυχημένη ενημέρωση.

Πώς να δημιουργήσετε πιο περίπλοκα favicons

Σε αυτό το άρθρο, ήθελα να περιγράψω έναν καθολικό και εύκολο τρόπο δημιουργίας favicons που θα λειτουργούν σε σχεδόν οποιαδήποτε πλατφόρμα. Αλλά στον σχεδιασμό και στην ανάπτυξη ιστοσελίδων δεν υπάρχει όριο στην τελειότητα. Αν θέλετε να μάθετε πώς μπορείτε να δημιουργήσετε πιο σύνθετα εικονίδια, μπορείτε να δοκιμάσετε να χρησιμοποιήσετε την υπηρεσία favico.js . Σας επιτρέπει να δημιουργείτε δυναμικές εικόνες με διαφορετικούς αριθμούς. Χάρη σε αυτό το εικονίδιο, μπορείτε να δείτε τον αριθμό των μη αναγνωσμένων μηνυμάτων, ακόμη και όταν η αντίστοιχη καρτέλα δεν είναι ενεργή. Εάν θέλετε να δημιουργήσετε online κινούμενες εικόνες, μπορείτε να δοκιμάσετε τη χρήση μιας γεννήτριας favicon favicon.cc .

Περισσότερες γεννήτριες στο διαδίκτυο μπορείτε να βρείτε εδώ .

Εάν θέλετε να μοιραστείτε τις συμβουλές σας σχετικά με τη δημιουργία favicons ή να θέσετε μια ερώτηση, σας περιμένω στα σχόλια!

2011.11.19
Карта