Ένα favicon είναι αυτή η δροσερή μικρή εικόνα δίπλα στη γραμμή διευθύνσεων στο πρόγραμμα περιήγησής σας. Είναι αυτό που ξεχωρίζει τον ιστότοπό σας στην καρτέλα σελιδοδεικτών και μπορεί να χρησιμοποιηθεί για να αυξήσει την αναγνωρισιμότητα της μάρκας. Εάν έχετε έναν ιστότοπο αλλά δεν έχετε σκεφτεί ποτέ να δημιουργήσετε ένα favicon, θα πρέπει να επανεξετάσετε την απόφασή σας. Όλο και περισσότερο, οι προγραμματιστές λογισμικού χρησιμοποιούν φαβορί για διαφορετικές πτυχές των εφαρμογών τους, όπως εικονίδια αρχικής οθόνης σε tablet. Ευτυχώς, ο σχεδιασμός, η δημιουργία και η εφαρμογή ενός favicon είναι κάτι που σχεδόν ο καθένας μπορεί να κάνει αν ακολουθήσει τα σωστά βήματα.
Βήματα
Μέθοδος 1 από 3: Σχεδιάζοντας το Favicon σας
Βήμα 1. Δημιουργήστε ένα favicon που αντιπροσωπεύει τον ιστότοπό σας
Ο τύπος του ιστότοπου που διαθέτετε θα πρέπει να καθορίζει την εμφάνιση του φαβορί σας. Προσπαθήστε να σχεδιάσετε κάτι που θα τηρεί την εικόνα της μάρκας σας και θα είναι αναγνωρίσιμο και αξέχαστο στους ανθρώπους. Το αγαπημένο σας θα είναι το πρώτο πράγμα που βλέπουν οι άνθρωποι όταν κοιτάζουν τις καρτέλες στο πρόγραμμα περιήγησής τους και θα εμφανίζεται επίσης στους σελιδοδείκτες των άλλων.
- Για παράδειγμα, εάν έχετε έναν ιστότοπο τροφίμων, επιλέγοντας ένα φαβορί που έχει φρούτα ή λαχανικά ως σχέδιο μπορεί να το κάνει πιο αξέχαστο.
- Εάν ο ιστότοπός σας είναι για δικηγορικό γραφείο ή εταιρεία επενδύσεων, το παραδοσιακό και κομψό favicon είναι το καλύτερο.
- Αν ο ιστότοπός σας απευθύνεται σε νεότερους, δοκιμάστε να δημιουργήσετε ένα παιχνιδιάρικο και πολύχρωμο φαβορί.
Βήμα 2. Αποφασίστε εάν θέλετε ένα διαφανές φόντο
Εάν δεν ορίσετε ένα φόντο, τότε θα γεμίσει λευκό, το οποίο ενδέχεται να μην τηρεί την επωνυμία σας. Ένα διαφανές φόντο θα πάρει το χρώμα του προγράμματος περιήγησης του ατόμου και θα φαίνεται πιο εξορθολογισμένο σε ορισμένες περιπτώσεις. Σε άλλες περιπτώσεις, το να έχετε ένα χρώμα για το φόντο θα κάνει τα γράμματα ή τα γραφικά στο προσκήνιο να σκάσουν. Αποφασίστε ποιο θα ήταν το καλύτερο για το σχέδιό σας και να το έχετε κατά νου καθώς το φτιάχνετε.
Το πιο βασικό φαβορί είναι ένα τετράγωνο 16x16 και έχει χρώμα φόντου
Βήμα 3. Δημιουργήστε ένα φαβορί που διαβάζεται εύκολα
Επειδή η εικόνα φαβορί που θα χρησιμοποιήσετε είναι μικρή, είναι σημαντικό να μπορείτε να μεταδώσετε την επωνυμία σας χωρίς να μπερδέψετε τους επισκέπτες σας. Ένα φαβορί που είναι δύσκολο να διαβαστεί αφήνει αρνητική εντύπωση και μπορεί να δημιουργήσει ερωτήσεις στο μυαλό του επισκέπτη σχετικά με την ποιότητα της εργασίας που μπορείτε να προσφέρετε. Οι υπερβολικά περίπλοκες εικόνες και τα λογότυπα δεν φαίνονται καλά όταν συρρικνωθούν σε 16x16 ή 32x32 pixel.
- Εάν το υπάρχον λογότυπό σας είναι πολύ περίπλοκο, τότε μπορείτε να χρησιμοποιήσετε τακτικές για να το απλοποιήσετε, ώστε να είναι αναγνωρίσιμο σε μέγεθος αγαπημένου. Χρησιμοποιήστε αρχικά αντί να εμφανίσετε ολόκληρο το όνομα της εταιρείας ή σχεδιάστε ένα απλό εικονίδιο αντί να χρησιμοποιήσετε μια εικόνα.
- Εάν έχετε ήδη ένα απλό λογότυπο, μπορείτε να συρρικνώσετε την εικόνα και να την ορίσετε ως αγαπημένο σας. Mayσως χρειαστεί να το αλλάξετε πριν το μετατρέψετε σε αρχείο εικονιδίων.
- Μπορείτε επίσης να χρησιμοποιήσετε μια εικόνα ενός αντικειμένου που περιγράφει το γενικό θέμα του ιστότοπού σας.
Βήμα 4. Δημιουργήστε ένα φαβορί αισθητικά ευχάριστο
Η δομή του φαβορί σας ονομάζεται μορφή του. Τα Favicons συνήθως παίρνουν σχήματα, όπως ένας κύκλος ή ένα τετράγωνο. Όταν σχεδιάζετε το φαβορί σας, είναι γενικά καλύτερο εάν μπορεί να χωρέσει σε μία από αυτές τις βασικές φόρμες, επειδή τα σχήματα ελεύθερης μορφής μπορεί συχνά να μπερδευτούν ή να μπερδευτούν στα 16x16 pixel. Μια άλλη σημαντική πτυχή του σχεδιασμού σας ονομάζεται αισθητική ενότητα. Η αισθητική ενότητα περιλαμβάνει τις λεπτομέρειες και τα μεγέθη των διαφορετικών εξαρτημάτων στο φαβορί σας και τον τρόπο ισορροπίας του φαβορί σας. Όσο πιο ομοιόμορφες είναι οι λεπτομέρειες, τόσο πιο συνεκτικό θα φαίνεται το φαβορί σας. Για παράδειγμα, η χρήση διαφορετικών τύπων ή μεγεθών γραμματοσειράς στο φαβορί σας δεν είναι ευχάριστη στο μάτι και μπορεί να κάνει το φαβορί σας να φαίνεται μπερδεμένο ή ακατάστατο.
- Ένα άλλο παράδειγμα αισθητικής ενότητας είναι η διατήρηση στρογγυλεμένων γωνιών σε όλα τα σχήματα στο φαβορί σας.
- Ένα καλό παράδειγμα εικονιδίου που έχει αλλάξει μορφή είναι το φαβορί της Google. Έχει αλλάξει από τετράγωνο σε κύκλο.
Βήμα 5. Χρησιμοποιήστε χρώματα που είναι συνεκτικά για την επωνυμία σας
Όταν δημιουργείτε το φαβορί σας, θα πρέπει να το δημιουργήσετε σε βάθος χρώματος 8 bit (256 χρώματα) ή 24 bit (16,7 εκατομμύρια χρώματα), καθώς αυτό θα λειτουργήσει σε σύγχρονα προγράμματα περιήγησης. Βεβαιωθείτε ότι τα χρώματα που επιλέγετε μπορούν να βρεθούν αλλού στον ιστότοπό σας ή να σχετίζονται με κάποιο τρόπο με την επωνυμία σας. Ένα φαβορί με χρώματα που δεν υπάρχουν στον ιστότοπο, το λογότυπο ή τις εφαρμογές σας δεν θα μείνει αξέχαστο και οι άνθρωποι δεν θα μπορούν να συσχετίσουν το εικονίδιο με την επωνυμία σας.
- Ορισμένες δημιουργικές χρήσεις του χρώματος favicon περιλαμβάνουν το GitHub που αλλάζει χρώματα ανάλογα με την κατάσταση του συστήματός σας και το Trello, το οποίο αλλάζει ανάλογα με το χρώμα του φόντου σας.
- Τα πιο συνηθισμένα χρώματα που χρησιμοποιούνται στα φαβορίνια είναι το κόκκινο και το μπλε.
Βήμα 6. Εξετάστε το κοινό σας όταν σχεδιάζετε ένα φαβορί
Εκτός από την αναγνώριση της επωνυμίας σας, το φαβορί σας πρέπει να φαίνεται ελκυστικό για τους επισκέπτες σας. Άτομα με διαφορετικά γούστα, ενδιαφέροντα και κοινωνικές νόρμες θα δουν διαφορετική εικονολογία από διαφορετικές οπτικές γωνίες. Οι πολιτισμικές διαφορές υπάρχουν μέσα στην κοινωνία μας και θα μπορούσαν να μπερδέψουν ή να απωθήσουν το κοινό που προσπαθείτε να προσελκύσετε.
Για παράδειγμα, το Mac Os X χρησιμοποιεί μια σφραγίδα που είναι ένα καθολικό σύμβολο για την αλληλογραφία. Η χρήση ενός γραμματοκιβωτίου δεν θα ήταν τόσο αποτελεσματική επειδή τα γραμματοκιβώτια διαφέρουν σε διαφορετικά μέρη του κόσμου
Βήμα 7. Πάρτε τη γνώμη φίλων και συναδέλφων
Παρόλο που δεν είναι απίστευτα γραφικά εντατικό, το favicon είναι ένα σημαντικό μέρος της μάρκας σας. Για παράδειγμα, σκεφτείτε τους αγαπημένους σας ιστότοπους όπως το Twitter, το Gmail, το Facebook ή το wikiHow και πόσο συσχετίζετε το favicon με τη μάρκα. Εάν δεν έχετε καλό μάτι για το σχεδιασμό ή έχετε απορίες σχετικά με το είδος του σχεδιασμού που πρέπει να έχετε για τον ιστότοπό σας, συμβουλευτείτε φίλους που έχουν το μάτι για το σχεδιασμό ή που εργάζονται στο γραφικό σχέδιο.
- Ρωτήστε στο δίκτυο φίλων σας για να δείτε αν κάποιος μπορεί να παρέχει συμβουλές σχεδιασμού δωρεάν.
- Οι μεγαλύτερες εταιρείες διαθέτουν εσωτερικούς γραφίστες που μπορούν να δημιουργήσουν την αγαπημένη εικόνα.
Μέθοδος 2 από 3: Δημιουργώντας το Favicon σας
Βήμα 1. Χρησιμοποιήστε λογισμικό επεξεργασίας φωτογραφιών για να δημιουργήσετε το αγαπημένο σας
Μπορείτε να χρησιμοποιήσετε λογισμικό επεξεργασίας φωτογραφιών όπως το Adobe Photoshop ή το Illustrator για να δημιουργήσετε την εικόνα για το αγαπημένο σας. Αυτές οι εφαρμογές λογισμικού σάς επιτρέπουν επίσης να αλλάξετε το μέγεθος και να εξάγετε την εικόνα στη σωστή μορφή. Κάποιο λογισμικό σας επιτρέπει να δημιουργήσετε το αγαπημένο σας με το χέρι.
- Υπάρχουν επίσης ειδικά προγράμματα επεξεργασίας favicon που μπορείτε να βρείτε στο διαδίκτυο.
- Χρησιμοποιήστε μια μηχανή αναζήτησης και πληκτρολογήστε "favicon editors".
- Κάντε το μέγεθος του καμβά σας 512x512 εικονοστοιχεία επειδή αυτός ο αριθμός κατανέμεται στα πιο εφαρμόσιμα μεγέθη φαβορί και εξακολουθεί να είναι αρκετά μεγάλος για να μπορείτε να επεξεργαστείτε αποτελεσματικά.
- Άλλο δημοφιλές λογισμικό επεξεργασίας φωτογραφιών περιλαμβάνει το GIMP, το PhotoScape και το Paint. NET.
- Όταν χρησιμοποιείτε αυτό το λογισμικό, δεν θα μπορείτε να επεξεργαστείτε απευθείας τα αρχεία.ico, αλλά μπορείτε να χρησιμοποιήσετε αρχεία.png,-j.webp" />
Βήμα 2. Αλλάξτε το μέγεθος και αποθηκεύστε το φαβορί σας
Το 32x32 px είναι το μέγεθος των αντικειμένων επιφάνειας εργασίας των Windows, ενώ το 16x16 px είναι το μέγεθος των φαβορίδων στην καρτέλα του προγράμματος περιήγησής σας. Αφού δημιουργήσετε το φαβορί σας σε μεγαλύτερη μορφή, είναι σημαντικό να μειώσετε το μέγεθός του, ώστε να μπορείτε να δείτε πώς θα φαίνεται στα προγράμματα περιήγησης των άλλων. Εάν δεν διαβάζεται ή δεν είναι αισθητικά ευχάριστο, ξεκινήστε από την αρχική σας σχεδίαση. Σκεφτείτε τις πλατφόρμες στις οποίες πιθανότατα θα χρησιμοποιηθεί ο ιστότοπος ή η εφαρμογή σας και στη συνέχεια δημιουργήστε ένα favicon για να καλύψετε όλες τις βάσεις σας.
- Είναι σημαντικό να σημειωθεί ότι το διαφορετικό υλικό και λογισμικό χρησιμοποιούν διαφορετικά μεγέθη favicon.
- Ορισμένα άλλα μεγέθη φαβορίνης περιλαμβάνουν 57x57px για την τυπική αρχική οθόνη iOS, 72x72px για το iPad, 96x96px για το Google TV, 128x128px για το Chrome Web Store και 195x195px για την Ταχεία κλήση της Opera.
- Εάν θέλετε να καλύψετε όλες τις βάσεις σας, μπορείτε να δημιουργήσετε εκδόσεις του φαβορί σας σε καθένα από αυτά τα μεγέθη.
- Αποθηκεύστε ξεχωριστές εκδόσεις του φαβορί σας, ώστε να μην χάσετε τη δουλειά που έχετε κάνει.
Βήμα 3. Συνδυάστε τα αρχεία σας χρησιμοποιώντας έναν μετατροπέα
Το υπέροχο με τα αρχεία.ico είναι ότι μπορείτε να συνδυάσετε περισσότερα από ένα αρχεία για να το δημιουργήσετε. Αυτό είναι χρήσιμο επειδή διαφορετικά προγράμματα περιήγησης και λογισμικό θα θέλουν ένα διαφορετικό μέγεθος favicon. Για να βεβαιωθείτε ότι το φαβορί σας φαίνεται καλό σε όλες τις διαφορετικές πλατφόρμες, μετατρέψτε τα αρχεία σας χρησιμοποιώντας έναν διαδικτυακό μετατροπέα. Πληκτρολογήστε "icon converter" στην αγαπημένη σας μηχανή αναζήτησης για να βρείτε δωρεάν διαδικτυακές εφαρμογές για να το κάνετε αυτό. Αποθηκεύστε το συγχωνευμένο αρχείο ως "favicon.ico".
- Μπορείτε επίσης να χρησιμοποιήσετε ένα πρόγραμμα όπως το GIMP που διαθέτει ενσωματωμένη λειτουργία ή να κατεβάσετε μια προσθήκη που ονομάζεται ICO FORMAT στο Adobe Photoshop.
- Δημιουργήστε έναν νέο φάκελο, ώστε να μπορείτε να αποθηκεύσετε νέα φαβορί ή έργα σε εξέλιξη.
- Πληκτρολογήστε ".ico converter" ή "favicon generator" σε μια μηχανή αναζήτησης για να βρείτε διαφορετικά εργαλεία που μπορείτε να χρησιμοποιήσετε.
Μέθοδος 3 από 3: Υλοποίηση του Favicon σας
Βήμα 1. Ανεβάστε το αγαπημένο σας αν χρησιμοποιείτε πρόγραμμα επεξεργασίας ιστότοπου
Πολλοί συντάκτες ιστότοπων διαθέτουν μια ενσωματωμένη φόρμα που σας επιτρέπει να ανεβάζετε αυτόματα το αγαπημένο σας στον ιστότοπό σας. Εάν χρησιμοποιείτε έναν επεξεργαστή ιστότοπου που έχει ενσωματωμένο αυτό, αναζητήστε επιλογές που λένε "Μεταφόρτωση Favicon" ή "Προσθήκη Favicon" στο μενού ρυθμίσεων του ιστότοπού σας. Επιλέξτε το αρχείο favicon.ico και ανεβάστε το στον ιστότοπό σας.
Εάν δεν μπορείτε να βρείτε ένα μέρος για να ανεβάσετε το αγαπημένο σας πρόγραμμα επεξεργασίας στον ιστότοπό σας, θα πρέπει να το κάνετε χειροκίνητα
Βήμα 2. Ανεβάστε το αρχείο στον ριζικό κατάλογο του ιστότοπού σας
Εάν ο ιστότοπός σας υποστηρίζει πρωτόκολλο μεταφοράς αρχείων ή FTP, τότε μπορείτε να χρησιμοποιήσετε το πρόγραμμα -πελάτη FTP για να ανεβάσετε το νέο σας αρχείο favicon.icon στον ριζικό κατάλογο (ευρετήριο). Εάν όχι, τότε θα πρέπει να μεταβείτε στη σελίδα κεντρικών υπολογιστών ιστού και να ανεβάσετε την εικόνα με μη αυτόματο τρόπο. Θυμηθείτε να αντικαταστήσετε το υπάρχον αρχείο favicon.ico με το νέο σας αρχείο.
Βήμα 3. Προσθέστε το αρχείο στην κεφαλίδα σας
Βρείτε το μέρος όπου μπορείτε να έχετε πρόσβαση στα αρχεία PHP και CSS για τον ιστότοπό σας. Μεταβείτε στο αρχείο header.php του ιστότοπού σας και επεξεργαστείτε το. Κάτω από τον τύπο της ετικέτας,"
-
. Αυτό θα πρέπει να συνδέσει τον ιστότοπό σας με το αγαπημένο σας.
Επειδή χρησιμοποιείτε PHP, σημαίνει ότι οι ιστότοποι που χρησιμοποιούν το αρχείο κεφαλίδας σας θα έχουν τώρα το ίδιο φαβορί
Δημιουργήστε το δικό σας εικονίδιο Favicon Βήμα 14 Βήμα 4. Ανανεώστε το πρόγραμμα περιήγησής σας
Μόλις ολοκληρώσετε τη μεταφόρτωση του φαβορί, μπορείτε να ανανεώσετε το πρόγραμμα περιήγησής σας για να δείτε τη νέα σας εικόνα δίπλα στη γραμμή διευθύνσεων. Για να μεταβείτε απευθείας σε μια εικόνα του ενημερωμένου φαβορί σας, πληκτρολογήστε "https://www.yourdomain.com/favicon.ico".
- Εάν το αγαπημένο σας δεν εμφανίζεται αρχικά, ίσως χρειαστεί να επαναφέρετε την προσωρινή μνήμη του προγράμματος περιήγησής σας.
- Για να διαγράψετε την προσωρινή μνήμη, μεταβείτε στις ρυθμίσεις του προγράμματος περιήγησής σας και διαγράψτε τα προσωρινά αρχεία Internet, τα cookie και το ιστορικό σας.
