Πώς να δημιουργήσετε ένα εικονίδιο για μια εφαρμογή windows. Πώς να φτιάξετε ένα εικονίδιο. Δημιουργία εικονιδίου .ico για προγράμματα. Δημιουργία favicon με χρήση διαδικτυακών υπηρεσιών

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

Ανάλυση συσχέτισης

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

Έρευνα ανταγωνιστών

Όταν δημιουργείτε ένα σχέδιο εικονιδίων για μια εφαρμογή για κινητά, προσπαθήστε να μην επαναλάβετε ή να αντιγράψετε το σχέδιο άλλων εικονιδίων. Γιατί χρειάζεται αυτό; Φανταστείτε ότι ψάχνετε για έναν διαχειριστή εργασιών. Ρίξτε μια ματιά στα παρακάτω εικονίδια εφαρμογών και αναρωτηθείτε ποιο διαχειριστή θα επιλέγατε να εγκαταστήσετε στο smartphone σας;

Το εικονίδιο Wunderlist (πρώτο) συγκρίνεται ευνοϊκά με άλλα εικονίδια εφαρμογών. Πιθανότατα, ο χρήστης θα κατεβάσει το Wunderlist και έτσι η εφαρμογή θα λάβει περισσότερες εγκαταστάσεις.

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

Σκοπός του εικονιδίου

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

Για παράδειγμα, το εικονίδιο μιας εφαρμογής για κινητά θα πρέπει να εκτελεί τη λειτουργία αναγνώρισης και να το διακρίνει από άλλες εφαρμογές σε ένα smartphone. Αυτό ισχύει τόσο για τη λίστα προγραμμάτων που υπάρχουν ήδη στο smartphone όσο και στο κατάστημα εφαρμογών (App Store, Google Play).

Πρέπει επίσης να καταλάβετε ότι εστιάζοντας αποκλειστικά στο στοιχείο μάρκετινγκ του εικονιδίου, δεν πρέπει να ξεχνάμε τα σενάρια πότε θα αρχίσει να χρησιμοποιείται η εφαρμογή. Είναι πιο λογικό να κάνετε το εικονίδιο να εστιάζει όχι σε μία μόνο λήψη, αλλά στην καθημερινή χρήση του προϊόντος από έναν απλό χρήστη.

Μοναδικότητα και αναγνωρισιμότητα

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

Λιγότερη λεπτομέρεια

Όσο πιο συνοπτικό είναι το εικονίδιο, τόσο πιο εύκολο είναι να το θυμάστε και να το αναγνωρίσετε σε κάθε περίπτωση. Πολλοί σχεδιαστές προσπαθούν για την πιο αισθητική εμφάνιση του εικονιδίου, προσθέτοντας μεγάλο αριθμό λεπτομερειών που δεν εκτελούν καμία λειτουργία, εκτός από τη διακόσμηση και παρεμπιπτόντως φράζοντας το πεδίο πληροφοριών του εικονιδίου. Δεν πρόκειται για φωτογραφία, δεν χρειάζονται σχολαστικές λεπτομέρειες εδώ. Επιπλέον, σε μικρό μέγεθος, μικρά μέρη απλώς συγχωνεύονται σε μια άμορφη μάζα.

Το δεύτερο εικονίδιο εφαρμογής φαίνεται καλύτερο λόγω της απλότητας και του μινιμαλισμού του.

Δώστε προτεραιότητα στο μέγεθος

Υπάρχουν δύο προσεγγίσεις για τη δημιουργία ενός εικονιδίου.

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

Χρειάζεστε πολλά εικονίδια; Δημιουργήστε ένα σετ!

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

Μην διαθέτετε χώρο

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

Διαφορετικά εικονίδια για διαφορετικές πλατφόρμες

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

Το χρώμα είναι πολύ σημαντικό

Η επιλογή του σωστού χρώματος καθορίζει σε μεγάλο βαθμό την αντίληψη του εικονιδίου σας. Προσπαθήστε να μην χρησιμοποιείτε περισσότερα από δύο χρώματα σε αντίθεση. Παρεμπιπτόντως, η Google έχει θέσει περιορισμούς υπό όρους και έχει ακόμη καθορίσει σετ συμβατών χρωμάτων στο Material Design. Χρησιμοποιήστε τα στα σχέδιά σας.

Κάντε χωρίς κείμενο

Ένα αποτελεσματικό εικονίδιο δεν χρειάζεται λόγια για να επικοινωνήσει το περιεχόμενό του. Αφήστε το κείμενο για ιστότοπους ή διαφημίσεις banner και προσπαθήστε να το κάνετε χωρίς αυτό όταν δημιουργείτε ένα εικονίδιο. Γιατί αυτό? Επειδή όταν μειώνετε το μέγεθος του εικονιδίου, το κείμενο θα γίνει δυσανάγνωστο και θα μοιάζει με ένα κανονικό σημείο χρώματος.

Βρείτε μια ισορροπία μεταξύ πρωτοτυπίας και ευκολίας αντίληψης

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

Για την αίτησή σας, πρέπει να βρείτε κάτι παρόμοιο - τόσο πρωτότυπο όσο και απλό σε μορφή. Θα πρέπει να ληφθεί υπόψη ότι τα εικονίδια εμφανίζονται διαφορετικά στις οθόνες των κινητών συσκευών - σε μεγαλύτερα ή μικρότερα μεγέθη. Επομένως, πρέπει επίσης να βεβαιωθείτε ότι η επιλογή που δημιουργείτε φαίνεται πάντα ελκυστική.

Μην ξεχνάτε το φόντο

Στο κατάστημα εφαρμογών, τα εικονίδια εμφανίζονται συνήθως σε ανοιχτόχρωμο φόντο - λευκό ή γκρι. Όμως η ταπετσαρία της συσκευής στην οποία ο χρήστης κατεβάζει την εφαρμογή σας μπορεί να είναι οποιουδήποτε χρώματος. Επομένως, μην ξεχάσετε να ελέγξετε πόσο ελκυστικό και αξιοσημείωτο είναι το εικονίδιο σας σε ένα συγκεκριμένο φόντο.

Δεν υπάρχει θέση για τα στοιχεία διεπαφής εφαρμογής στο εικονίδιο

Μην τοποθετείτε στοιχεία της διεπαφής της εφαρμογής στο εικονίδιό της. Αυτό μπερδεύει τον χρήστη και θεωρείται κακή μορφή.

Το εικονίδιο πρέπει να είναι ενημερωτικό

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

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

Ksenia Mayevskaya,προγραμματιστής εφαρμογών Θυμηθείτε-Υπενθύμιση.

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

Χρήσιμες υπηρεσίες και πόροι για τη δημιουργία εικονιδίου

Ρωσική διαδικτυακή υπηρεσία για τη δημιουργία τόσο μεμονωμένων εικονιδίων όσο και ολόκληρων συνόλων. Μεγάλη επιλογή εικονιδίων και επιλογές για την επεξεργασία τους.

Εικονίδια γραμματοσειρών για χρήση με το Twitter Bootstrap

Εδώ μπορείτε να βρείτε τόσο υφές χωρίς ραφές όσο και έτοιμες παλέτες. Επίσης σε αυτόν τον πόρο υπάρχει ένα φόρουμ όπου διεξάγεται η επικοινωνία. Μια εξαιρετική υπηρεσία για να ταιριάζει με το χρώμα του εικονιδίου σας.

Επαγγελματική διαδικτυακή υπηρεσία που σας επιτρέπει να δημιουργήσετε έναν συνδυασμό χρωμάτων σύμφωνα με τους κανόνες χρωμάτων στον τροχό χρωμάτων.

Αυτόματη δημιουργία κλίσεων.

Ένας πόρος που είναι ιδανικός για όσους δεν μπορούν να αποφασίσουν για τα χρώματα και τις γραμματοσειρές για το έργο σας. Είναι ενδιαφέρον ότι η παλέτα και οι γραμματοσειρές μπορούν να επιλεγούν ανάλογα με την περιοχή της επιχείρησης.

Διοίκηση,αφιερωμένο στο Material Design για Android

Οδηγοί σχετικά με την ανθρώπινη διεπαφή iOS της Apple.

Οδηγίες βήμα προς βήμα για τη δημιουργία ενός εικονιδίου

Μπορείτε να δημιουργήσετε ένα εικονίδιο για έναν ιστότοπο ή μια εφαρμογή χρησιμοποιώντας προγράμματα γραφικών ή ηλεκτρονικές υπηρεσίες.

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

Μία από τις διαδικτυακές υπηρεσίες που σας επιτρέπει να δημιουργείτε γρήγορα μοντέρναεικονίδια είναι IconsFlow.

Λίγα λόγια για τις δυνατότητες της υπηρεσίας:

• Δυνατότητα εξαγωγής εικονιδίων σε φόρμες SVG (διάνυσμα), PNG και ICO.
• Μεγάλη λειτουργικότητα επεξεργασίας.
• Δυνατότητα δημιουργίας πακέτων εικονιδίων στο ίδιο στυλ.
• Δωρεάν επιλογές.

Τώρα ας προχωρήσουμε στη διαδικασία δημιουργίας ενός εικονιδίου.

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

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

Αφού επεξεργαστείτε το εικονίδιο (ή τα εικονίδια), μπορείτε να εργαστείτε στο φόντο, την κλίμακα, τις σκιές του, να προσθέσετε μια κλίση.

Ένα από τα πλεονεκτήματα της υπηρεσίας είναι ότι εάν δημιουργήσετε ένα ολόκληρο σύνολο εικονιδίων, μπορείτε να κάνετε όλες τις παραπάνω επεξεργασίες σε παρτίδες.

Δηλαδή, κάνοντας κλικ σε ένα μέρος, αλλάζετε τη σχεδίαση όλων των εικονιδίων ταυτόχρονα: σκιές, μέγεθος, φόντο κ.λπ. Πολύ βολικό εάν χρειάζεται να δημιουργήσετε 3-5 ή περισσότερα εικονίδια.

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

Αυτό είναι όλο.

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

Το favicon είναι ένα μικρό εικονίδιο που εμφανίζεται δίπλα στο όνομα ενός ιστότοπου σε ένα παράθυρο του προγράμματος περιήγησης ή στα αποτελέσματα των μηχανών αναζήτησης. Δεν φέρει καμία λειτουργία για SEO, αλλά η χρήση του σας επιτρέπει να αυξήσετε την αναγνώριση του ιστότοπου και, ως εκ τούτου, τον δείκτη CTR. Μπορείτε επίσης να δημιουργήσετε faviconoks αμφιβληστροειδούς. Τι μέγεθος πρέπει να είναι το favicon; Συνήθως, τα favicons διατίθενται είτε σε μεγέθη 16x16px είτε 32x32px.

Σε ποια μορφή θα λάβω το favicon μου;

Αφού δημιουργήσετε ένα favicon, θα λάβετε ένα αρχείο favicon.ico για τον ιστότοπο, δηλαδή ένα αρχείο με την επέκταση * .ico. Είναι αυτός που θα χρειαστεί να χρησιμοποιηθεί στο μέλλον. Πώς να δημιουργήσετε ένα favicon στο διαδίκτυο; Χρησιμοποιήστε την ηλεκτρονική γεννήτρια favicon στον ιστότοπό μας. Μπορείτε όχι μόνο να δημιουργήσετε ένα favicon από μια εικόνα, αλλά και να χρησιμοποιήσετε το ενσωματωμένο πρόγραμμα επεξεργασίας που σας επιτρέπει να δημιουργήσετε οποιοδήποτε εικονίδιο για τον ιστότοπο.

Πώς να τοποθετήσετε ένα favicon στον ιστότοπο

Πρέπει να ανεβάσετε το favicon στον ριζικό κατάλογο του ιστότοπου για να λάβετε μια διεύθυνση όπως http://sitename.ru/favicon.ico. Αυτή είναι η διαδρομή προς την εικόνα. Στη συνέχεια, πρέπει να βάλετε τον κωδικό στην ετικέτα. Θα πρέπει να μοιάζει με αυτό:

 ...
 
 
 ...

Γιατί να καθορίσετε τη διαδρομή προς το favicon;

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

Το Favicon θα εμφανιστεί στα SERP;

Η Google δεν εμφανίζει favicons. Το Yandex διαθέτει τα λεγόμενα favicons ευρετηρίασης, αυτή η διαδικασία διαρκεί από μια εβδομάδα έως ένα μήνα.

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

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

Fasticona 1.0 δωρεάν φορητό

Δεν έχω δει πιο απλό πρόγραμμα για τη δημιουργία εικονιδίων. Δεν απαιτεί καν εγκατάσταση. Το δωρεάν φορητό Fasticona 1.0 δεν επιτρέπει τη σχεδίαση εικονιδίων, τα κάνει από έτοιμες εικόνες. Μπορείτε να δημιουργήσετε ένα εικονίδιο από οποιαδήποτε εικόνα (ακόμα και από τη δική σας φωτογραφία) το πρόγραμμα υποστηρίζει μια ποικιλία μορφών. Με απλά λόγια, είναι απλώς ένας μετατροπέας εικόνας.

Πριν δημιουργήσετε ένα εικονίδιο από μια εικόνα, φορτώστε την εικόνα στο πρόγραμμα χρησιμοποιώντας το κουμπί "Άνοιγμα αρχείου". Επιλέξτε τις απαιτούμενες παραμέτρους: μέγεθος, βάθος χρώματος (χρώματα και bits ανά δείγμα), φάκελος αποθήκευσης (διαδρομή εξόδου, από προεπιλογή, ο φάκελος όπου αποθηκεύεται το αρχείο εκκίνησης) και το όνομα του αρχείου εικονιδίων (εξαγωγή του ονόματος).

Το αρχείο που προκύπτει αποθηκεύεται σε μορφή * .ico. Και μόνο σε αυτό.

Seanau Icon Tool Kit 6.0

Το Seanau Icon Tool Kit 6.0 θα πρέπει να εγκατασταθεί στον υπολογιστή σας, αλλά θα καταλαμβάνει πολύ λίγο χώρο. Η λειτουργικότητά του είναι πιο προηγμένη. Αυτό το πρόγραμμα σάς επιτρέπει να δημιουργήσετε ένα εικονίδιο από μια εικόνα και να το σχεδιάσετε μόνοι σας. Για αυτό, έχει μια μεγάλη γκάμα εργαλείων.

Το Icon Tool Kit υποστηρίζει εργασία με επίπεδα, σας επιτρέπει να προσαρμόσετε το βάθος χρώματος, τη διαφάνεια, υπάρχουν διάφορα φίλτρα. Το αρχείο εξόδου μπορεί να ληφθεί σε * .ico, * .png, * .bmp, * .jpg ή * .gif. Αξίζει να σημειωθεί ότι αυτό το λογισμικό σάς επιτρέπει να εφαρμόζετε στυλ στα εικονίδια που δημιουργούνται, για παράδειγμα, Mac, Vista και άλλα. Η λήψη του προγράμματος για τη δημιουργία εικονιδίων συνιστάται για όσους θέλουν να ενσωματώσουν περισσότερο δημιουργικές ιδέες στη διεπαφή.

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

Νομίζω ότι ο καθένας από εσάς παρατήρησε το favicon όταν επισκεπτόταν τους αγαπημένους σας ιστότοπους. Μοιάζει με αυτό (στο πρόγραμμα περιήγησης Google Chrome):

Και για σύγκριση, η εμφάνιση του εικονιδίου στο πρόγραμμα περιήγησης Internet Explorer:

Πώς να φτιάξετε ένα εικονίδιο για έναν ιστότοπο

Μπορείτε να δημιουργήσετε ένα favicon τόσο χρησιμοποιώντας τις τυπικές δυνατότητες του Photoshop (ή άλλο πρόγραμμα επεξεργασίας γραφικών) όσο και χρησιμοποιώντας όλα τα είδη υπηρεσιών web.

Σχεδιάζοντας ένα favicon χρησιμοποιώντας μια υπηρεσία web

Ο ευκολότερος τρόπος για να δημιουργήσετε ένα favicon είναι να χρησιμοποιήσετε την υπηρεσία www.favicon.cc. Μοιάζει με αυτό:

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

Δημιουργήστε ένα favicon από μια εικόνα που έχει αποδοθεί

Για να μετατρέψετε ένα έτοιμο εικονίδιο σε μορφή .png (το οποίο, παρεμπιπτόντως, μπορεί επίσης να χρησιμοποιηθεί για να ορίσετε ένα favicon), μπορείτε να χρησιμοποιήσετε μια άλλη υπηρεσία web: favicon.ru.

Εγκαταστήστε το Favicon στον ιστότοπο

Όταν το εικονίδιο είναι έτοιμο, μπορείτε να το κατεβάσετε σε μορφή .ico... Για να προσθέσετε ένα favicon σε έναν ιστότοπο, τοποθετήστε το αρχείο favicon.ico στον ριζικό κατάλογο του ιστότοπου και προσθέστε μεταξύ ετικετών γραμμή:

Από προεπιλογή, εάν το εικονίδιο για τον ιστότοπο δεν καθορίζεται ρητά, το πρόγραμμα περιήγησης προσπαθεί να φορτώσει το αρχείο favicon.ico από τη ρίζα. Αλλά είναι καλύτερα να το παίξετε με ασφάλεια.

(για Internet Explorer).

Το μέγεθος του favicon μπορεί να είναι 16x16, 32x32.

Χρήσιμη σημείωση

Ένα αρχείο εικονιδίων μπορεί να έχει όχι μόνο την επέκταση .ico, αλλά και .png, και συνιστάται η χρήση της τελευταίας επιλογής. Αυτό οφείλεται στο γεγονός ότι οι συσκευές με οθόνη υψηλής ανάλυσης (για παράδειγμα, iPhone, iPad, iPod) έχουν από προεπιλογή μέγεθος εικονιδίου 57x57. Για να γίνει αυτό, είναι καλύτερο να δημιουργήσετε τη δεύτερη έκδοση του εικονιδίου (σε υψηλότερη ανάλυση) και να προσθέσετε μια πρόσθετη γραμμή:

Πρέπει όμως να σημειωθεί ότι σε αυτή την περίπτωση το εικονίδιο θα στρογγυλεθεί στις γωνίες και θα τοποθετηθεί πάνω του μια λάμψη (αυτό γίνεται αυτόματα από την ίδια τη συσκευή). Για να αποφευχθεί αυτό, αντί για apple-touch-εικονίδιοχρειάζεται να γράψω apple-touch-icon-precomposed.