Favicon αυτοκινήτου. Ένας καθολικός τρόπος δημιουργίας favicons. Πού να ανεβάσετε ένα favicon ώστε να είναι online

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

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

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

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

Ακολουθούν ορισμένες οδηγίες που πρέπει να λάβετε υπόψη κατά τη δημιουργία ενός Favicon.

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

#2. Μην χρησιμοποιείτε τυπικά εικονίδια. Πολλοί άνθρωποι, αφού δημιουργήσουν έναν ιστότοπο σε ένα ή άλλο CMS, εγκαταλείπουν το εικονίδιο χωρίς να αλλάξουν τίποτα. Ως αποτέλεσμα, τα αποτελέσματα της μηχανής αναζήτησης μπορεί να περιέχουν όχι έναν ιστότοπο με ένα τέτοιο εικονίδιο, αλλά πολλούς. Αυτό δεν θα κάνει τον ιστότοπό σας να ξεχωρίζει, γι' αυτό χρησιμοποιήστε μόνο μοναδικά Favicons που έχουν δημιουργηθεί ειδικά για τον ιστότοπό σας. Αυτό περιλαμβάνει επίσης την κατάσταση όταν χρησιμοποιούνται εικονίδια από διάφορες συλλογές ή στοιχεία διεπαφής άλλων τοποθεσιών. Θυμηθείτε, για να ξεχωρίσετε χρειάζεστε ένα μοναδικό Favicon.

#3. Όταν δημιουργείτε ένα εικονίδιο, προσπαθήστε να χρησιμοποιείτε φωτεινότερα και ανοιχτότερα χρώματα· κατά κανόνα, προσελκύουν περισσότερη προσοχή.

#4. Μην χρησιμοποιείτε κινούμενα εικονίδια. Πρώτον, το animation δεν υποστηρίζεται από όλα τα προγράμματα περιήγησης και, δεύτερον, η προσοχή του επισκέπτη πρέπει να εστιάζεται στο περιεχόμενο και όχι στο εικονίδιο.

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

Δημιουργία προκαθορισμένου Favicon στο Photoshop

#1. Δημιουργήστε ένα νέο έγγραφο στο Photoshop διαστάσεων 64*64 px, για να το κάνετε αυτό, μεταβείτε στο μενού "Αρχείο" >> "Νέο..." ή πατήστε τη συντόμευση πληκτρολογίου Ctrl+N. Σε γενικές γραμμές, το ίδιο το εικονίδιο θα πρέπει να είναι 16 * 16 εικονοστοιχεία, αλλά είναι καλύτερο να το δημιουργήσετε πρώτα στο ίδιο μέγεθος και στη συνέχεια να το μειώσετε στο απαιτούμενο μέγεθος.

#2. Στην περίπτωσή μου, δεν έχω κανένα λογότυπο για τον ιστότοπο, γι' αυτό αποφάσισα να χρησιμοποιήσω το σύμβολο "W" με το οποίο ξεκινά η διεύθυνση του ιστότοπου, καθώς και τα χρώματα που κυριαρχούν στην κορυφή του ιστότοπου: μπλε και κίτρινο. Έτσι, έβαλα το χρώμα στο #6A91D0 και χρησιμοποίησα το εργαλείο Bucket (G) για να δώσω στο έγγραφο που δημιουργήθηκε προηγουμένως ένα μπλε χρώμα.

#3. Μετά από αυτό, επέλεξα το Εργαλείο Τύπου (T), πρόσθεσα ένα σύμβολο "W" και του έδωσα την ακόλουθη τιμή χρώματος #FAC31D.

Για να κάνω το σύμβολο να ξεχωρίζει περισσότερο στο μπλε φόντο, πρόσθεσα μια μαύρη διαδρομή 2 εικονοστοιχείων σε αυτό. Για να το κάνετε αυτό, πρέπει να μεταβείτε στο στοιχείο μενού "Layer" >> "Layer Style" >> "Stroke", επιλέξτε το χρώμα και το μέγεθος της διαδρομής.

Μετά από αυτό πρέπει να συγχωνεύσετε τα επίπεδα, για να το κάνετε αυτό πρέπει να μεταβείτε στο στοιχείο μενού "Επίπεδο" >> "Ορατό συγχώνευση"ή πατήστε το συνδυασμό πλήκτρων Shift + Ctrl + E.

Για να κάνω τις γραμμές ομαλές χωρίς σερίφ, πρόσθεσα ένα blur. Για να το κάνετε αυτό, πρέπει να μεταβείτε στο στοιχείο μενού "Filter" >> "Blur" >> "Gaussian Blur..."και ορίστε την ακτίνα στα 0,3 pixel.

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

#4. Τώρα πρέπει να αλλάξετε το μέγεθος του εικονιδίου. Για να το κάνετε αυτό, πρέπει να μεταβείτε στο μενού "Εικόνα" >> "Μέγεθος εικόνας"και ορίστε το μέγεθος σε 16*16px.

#5. Το μόνο που μένει είναι να αποθηκεύσετε το εικονίδιο. Το εικονίδιο Favicon πρέπει να έχει το όνομα favicon και την επέκταση .ico. Το θέμα είναι ότι από προεπιλογή το Photoshop δεν αποθηκεύει εικόνες σε μορφή .ico. Επομένως, αποθηκεύστε το σε μορφή .png, για να το κάνετε αυτό, μεταβείτε στο στοιχείο μενού "Αρχείο" >> "Αποθήκευση ως..." και επιλέξτε PNG από την αναπτυσσόμενη λίστα.

Μετατροπή εικόνας σε μορφή .ICO

Μετά από αυτό, το μετατρέπουμε σε μορφή .ico χρησιμοποιώντας το . Μεταβείτε σε αυτήν την υπηρεσία και χρησιμοποιήστε το κουμπί "Αναζήτηση" για να επιλέξετε ένα αρχείο που έχετε αποθηκεύσει προηγουμένως σε μορφή PNG και, στη συνέχεια, κάντε κλικ στο κουμπί "Δημιουργία favicon.ico".

Μετά από αυτό, ο σύνδεσμος "Λήψη favicon.ico!" θα εμφανιστεί στη σελίδα που έχει φορτωθεί. κάνοντας κλικ στο οποίο μπορείτε να αποθηκεύσετε το τελειωμένο εικονίδιο Favicon στον υπολογιστή σας.

Τώρα ήρθε η ώρα να προσθέσετε ένα Favicon στον ιστότοπό σας ώστε να εμφανίζεται σε όλες τις σελίδες του. Για να το κάνετε αυτό, τοποθετήστε το εικονίδιο στον ριζικό φάκελο του ιστότοπού σας. Εάν ο ιστότοπός σας φιλοξενείται ήδη, αυτός ο φάκελος συνήθως ονομάζεται "public_html". Στη συνέχεια, σε κάθε σελίδα του ιστότοπού σας, πριν από την ετικέτα κλεισίματοςπροσθέστε τις ακόλουθες γραμμές:

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

Εάν χρησιμοποιείτε WordPress, μεταβείτε στον φάκελο wp-content/themes/folder-with-your-theme/, βρείτε και ανοίξτε το αρχείο header.php και, στη συνέχεια, επικολλήστε τις απαραίτητες γραμμές και αποθηκεύστε το αρχείο.

Εάν χρησιμοποιείτε Joomla, τότε μεταβείτε στο templates/your-theme-folder/ και ανοίξτε το αρχείο index.php, επικολλήστε τις απαραίτητες γραμμές και αποθηκεύστε.

Ορισμένα θέματα στο WordPress και στο Joomla μπορεί να έχουν ήδη τις δικές τους διαδρομές προς το αρχείο favicon.ico, οπότε διαγράψτε τα και αντικαταστήστε τα με τα δικά σας.

Εάν χρησιμοποιείτε οποιοδήποτε άλλο CMS, τότε κάντε τα πάντα κατ' αναλογία.

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

Υλικό που ετοιμάστηκε από το έργο:

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

X-Icon-Editor

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

Χάρη σε ένα ειδικό πάνελ, ενώ σχεδιάζετε ένα favion θα δείτε αμέσως πώς φαίνεται στο πρόγραμμα περιήγησης Internet Explorer.

Antifavicon

Το τυπικό μέγεθος favicon (16x16) είναι, φυσικά, πολύ μικρό για κείμενο. Ωστόσο, το Antifavicon σάς επιτρέπει να χωρέσετε δύο γραμμές κειμένου σε αυτόν τον μικρό χώρο. Η γραμματοσειρά που χρησιμοποιείται σίγουρα δεν είναι τόσο υπέροχη, αλλά τι μπορείτε να κάνετε :).

Το δεδομένο πλαίσιο, φυσικά, περιορίζει. Ωστόσο, αφού δείτε μερικά παραδείγματα, μπορείτε να καταλήξετε σε κάτι αρκετά ενδιαφέρον.

Faviconist

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

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

Favicon - (από το αγγλικό ICON ΑΓΑΠΗΜΕΝΑ, μεταφρασμένο ως "εικονίδιο για τα αγαπημένα") - ένα εικονίδιο ιστότοπου μεγέθους 16x16px ή 32x32px, το οποίο εμφανίζεται από το πρόγραμμα περιήγησης στη γραμμή διευθύνσεων ή δίπλα σε έναν αποθηκευμένο σελιδοδείκτη. Παραδοσιακά, το όνομα και η επέκταση του εικονιδίου είναι favicon.ico.

Η υπηρεσία μας είναι σε θέση να μετατρέψει την επιλεγμένη σας εικόνα (μέγεθος έως 175 KB) σε εικονίδιο για το εικονίδιο του ιστότοπου (μέγεθος 16x16px ή 32x32px). Μετά τη δημιουργία, χρειάζεται απλώς να ανεβάσετε το favicon.ico στον επιθυμητό κατάλογο φιλοξενίας ιστότοπου.

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

Το Yandex διαθέτει ένα ειδικό bot που ευρετηριάζει μεμονωμένα το favicon όλων των τοποθεσιών. Η συχνότητα προσθήκης νέων εικονιδίων στην αναζήτηση κυμαίνεται από περίπου δύο εβδομάδες έως έναν μήνα.

Πού μπορώ να ανεβάσω ένα favicon για να το έχω στο διαδίκτυο;

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

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

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

Ένα άρθρο στο οποίο θα δούμε πώς να φτιάξουμε το σωστό favicon για έναν ιστότοπο.

Το favicon είναι ένα εικονίδιο που σχετίζεται με έναν συγκεκριμένο ιστότοπο ή ιστοσελίδα. Η ύπαρξη ενός favicon σε έναν ιστότοπο τον κάνει συνήθως πιο αναγνωρίσιμο. Αυτό οφείλεται στο γεγονός ότι αυτός ο ιστότοπος (κάθε σελίδα του) θα έχει ένα εικονίδιο, κοιτάζοντας το οποίο ο χρήστης θα γνωρίζει τι είδους πόρος είναι. Το εικονίδιο favicon ιστότοπου μπορεί να φανεί σε διάφορα στοιχεία του προγράμματος περιήγησης, όπως η καρτέλα, η γραμμή διευθύνσεων, το ιστορικό περιήγησης (ημερολόγιο), η γραμμή σελιδοδεικτών κ.λπ. Επιπλέον, το εικονίδιο favicon μπορεί επίσης να βρεθεί στα αποτελέσματα αναζήτησης Yandex δίπλα στο όνομα της τοποθεσίας . Το εικονίδιο favicon χρησιμοποιείται επίσης κατά την τοποθέτηση συνδέσμου (σε μια σελίδα ιστότοπου) στην κύρια οθόνη των λειτουργικών συστημάτων iOS (Safari), Android (Chrome), Windows 8 και 10.

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

Η διαδικασία εγκατάστασης ενός favicon σε έναν ιστότοπο, κατά κανόνα, ξεκινά με τη δημιουργία του. Λόγω του γεγονότος ότι οι απαιτήσεις για την ανάλυση και τη μορφή του εικονιδίου favicon σε διαφορετικές συσκευές είναι διαφορετικές, είναι καλύτερο να το προετοιμάσετε πρώτα σε μορφή vector svg (κλιμακούμενα διανυσματικά γραφικά). Αυτή η ενέργεια θα επιτρέψει, χρησιμοποιώντας μία εικόνα (svg), να αποκτήσετε ένα εικονίδιο favicon σε εξαιρετική ποιότητα με ανάλυση 16x16 pixel και 512x512.

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

Προετοιμασία εικόνας για το favicon

Ας δούμε τα βασικά βήματα για την προετοιμασία μιας εικόνας σε μορφή svg για ένα favicon.

Η εικόνα που θα χρησιμοποιηθεί ως favicon ιστότοπου μπορεί να σχεδιαστεί ή να ληφθεί μέσω αναζήτησης εικόνων στο Google ή στο Yandex. Συνιστάται να αναζητήσετε μια εικόνα (εικονίδιο) σε μορφή svg. Αλλά αν δεν μπορείτε να βρείτε ένα κατάλληλο εικονίδιο σε μορφή svg, τότε μπορείτε να επιλέξετε άλλη μορφή (για παράδειγμα, png ή jpg). Στη συνέχεια, στο πρόγραμμα Inkscape, χρησιμοποιώντας ένα ειδικό εργαλείο, μετατρέψτε το σε διανυσματικά γραφικά (vectorize the raster).

Για παράδειγμα, ας δούμε πώς μπορείτε να χρησιμοποιήσετε το Inkscape για να προετοιμάσετε μια εικόνα (εικονίδιο πόρτας) σε μορφή svg για ένα favicon.

Παραδείγματα προετοιμασμένων εικόνων (κόκκινο βέλος, λαμπτήρας, πεταλούδα, ρολόι, καρδιά και βιβλίο) για το favicon (για λήψη - επιλέξτε "Αποθήκευση εικόνας ως..." στο μενού περιβάλλοντος της εικόνας):

Δημιουργία favicon για όλες τις πλατφόρμες

Μπορούμε να δημιουργήσουμε εικονίδια favicon για όλες τις πλατφόρμες (iOS, Android, PC, MAC κ.λπ.) διαδικτυακά στη διεύθυνση http://realfavicongenerator.net/.

Για να το κάνετε αυτό, κάντε κλικ στο κουμπί "Επιλέξτε την εικόνα του Favicon σας" και επιλέξτε την προετοιμασμένη εικόνα (door.svg) στο παράθυρο διαλόγου.

Μετά από αυτό, πρέπει να διαμορφώσετε τα χρώματα φόντου και να εισαγάγετε το όνομα της εφαρμογής για το λειτουργικό σύστημα Android (Chrome).

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

Μετά από αυτήν την ενέργεια, η υπηρεσία realfavicongenerator.net θα δημιουργήσει ένα εικονίδιο favicon και κώδικα HTML. Το αποτέλεσμα αυτής της λειτουργίας θα εμφανιστεί στην οθόνη.

Εγκατάσταση favicon σε ιστότοπο

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

Βασικά βήματα:

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

Έλεγχος του favicon του ιστότοπου

Το favicon του ιστότοπου ελέγχεται χρησιμοποιώντας τον σύνδεσμο που παρέχεται στην παράγραφο 4 (ελέγξτε το favicon σας). Αυτή η ενέργεια μπορεί επίσης να πραγματοποιηθεί μέσω του κύριου μενού Favicon -> Favicon Checker.

Για να ξεκινήσετε την επικύρωση του favicon του ιστότοπου, επιλέξτε το πρωτόκολλο τοποθεσίας (http:// ή https://) στη φόρμα που παρέχεται, εισαγάγετε το όνομα τομέα και κάντε κλικ στο κουμπί «Έλεγχος Favicon».

Μετά από αυτό, βεβαιωνόμαστε ότι το favicon του ιστότοπου έχει δοκιμαστεί από την υπηρεσία realfavicongenerator.net και εμφανίζεται σωστά σε όλες τις πλατφόρμες.

Ευρετηρίαση favicon ιστότοπου από τις μηχανές αναζήτησης

Η διαδικασία δημιουργίας ευρετηρίου ενός εικονιδίου διαρκεί διαφορετικούς χρόνους για διαφορετικές μηχανές αναζήτησης. Για παράδειγμα, στο Yandex αυτή η διαδικασία μπορεί να διαρκέσει αρκετούς μήνες.

Χρησιμοποιώντας τις ακόλουθες διευθύνσεις URL, μπορείτε να ελέγξετε πώς τα ρομπότ αναζήτησης βλέπουν το εικονίδιο favicon σε έναν ιστότοπο:

• Yandex - https://favicon.yandex.net/favicon/domain_name
• Google - https://www.google.com/s2/favicons?domain=domain_name

Αντί για όνομα_τομέα, πρέπει να καθορίσετε το όνομα τομέα (για παράδειγμα, ιστότοπος).

Σημείωση: Η χρήση κινούμενων εικόνων (gif) ως favicon υποστηρίζεται μόνο από ορισμένα προγράμματα περιήγησης (Firefox). Άλλα προγράμματα περιήγησης θα χρησιμοποιούν μια στατική εικόνα ως favicon.

Το θέμα του σημερινού άρθρου είναι πώς να δημιουργήσετε ένα online favicon για έναν ιστότοπο ή ένα blog στο WordPress. Εάν για κάποιο λόγο δεν γνωρίζετε ακόμη τι είναι και γιατί χρειάζεται αυτό το αρχείο, τότε σας συνιστώ να διαβάσετε τα άρθρα που έχω ήδη γράψει σχετικά με αυτό το θέμα:

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

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

Λοιπόν, τώρα θα προσπαθήσω να σας πω πού, τι και πώς να φτιάξετε ένα favicon. Αλλά πρώτα πρέπει να ξέρετε τι μέγεθος πρέπει να είναι ένα favicon για έναν ιστότοπο;

Faviconείναι μια εικόνα σε μορφές ICO, JPEG, PNG, BMP και GIF, η οποία μπορεί να έχει διαφορετικά μεγέθη, ξεκινώντας από 16x16 pixel. Ένα εικονίδιο ακριβώς αυτού του μεγέθους πρέπει να μεταφορτωθεί στον ιστότοπο για ευρετηρίαση από το ρομπότ Yandex.

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

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

Ο ευκολότερος τρόπος είναι να σχεδιάσετε ένα favicon στο Photoshop ή σε οποιοδήποτε άλλο πρόγραμμα επεξεργασίας γραφικών. Μπορείτε να το κάνετε ακόμα πιο απλά και να τραβήξετε μια έτοιμη φωτογραφία ή φωτογραφία και απλά να τη μετατρέψετε στην απαιτούμενη μορφή και μέγεθος. Δεδομένου ότι ένα τέτοιο εικονίδιο είναι πολύ μικρό, θα είναι δύσκολο να φανούν μικρές λεπτομέρειες της εικόνας. Επομένως, είναι καλύτερο να κάνετε το favicon σας όσο το δυνατόν πιο απλό, αλλά ταυτόχρονα, ελκυστικό και μοναδικό. Σε τελική ανάλυση, αυτή είναι η επαγγελματική κάρτα του πόρου Ιστού σας.

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

Υπηρεσίες ηλεκτρονικής δημιουργίας favicon - δημιουργία διαδικτυακού favicon

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

Όταν μόλις ξεκινάτε το blog ή τον ιστότοπο της εταιρείας σας και δεν έχετε ακόμη λογότυπο, η υπηρεσία Logaster θα είναι μια εξαιρετική λύση για εσάς. Με τη βοήθειά του, μπορείτε να δημιουργήσετε ένα λογότυπο και, στη συνέχεια, με βάση αυτό το λογότυπο, η γεννήτρια θα δημιουργήσει πολλά favicons της επιλογής σας. Η ευκολία είναι ότι το λογότυπο και το favicon θα δημιουργηθούν με το ίδιο στυλ, έτσι ο ιστότοπός σας θα φαίνεται πιο επαγγελματικός.

Απλές γεννήτριες favicon

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

Το www.favicongenerator.com είναι ίσως η πιο μινιμαλιστική υπηρεσία. Τίποτα επιπλέον - επιλέξτε μια εικόνα, κάντε κλικ στο «Δημιουργία Favicon! » και κατέβασε το εικονίδιο που δημιουργήθηκε.

tools.dynamicdrive.com/favicon- μια απλή και κατανοητή υπηρεσία όπου μπορείτε να φτιάξετε ένα favicon σε τρία μεγέθη. Για να κάνετε λήψη των ληφθέντων αρχείων, πρέπει να κάνετε κλικ στο κουμπί «Λήψη FavIcon» κάτω από αυτά.

Οι www.cy-pr.com/tools/favicon και www.favicon.co.uk είναι παρόμοιες υπηρεσίες με την προηγούμενη. Στο πρώτο, μπορείτε να κάνετε το μέγεθος favicon 16x16 και 32x32, και στο δεύτερο, επιπλέον 48x48 και 64x64.

www.genfavicon.com - η όλη διαδικασία δημιουργίας ενός εικονιδίου περιλαμβάνει τρία βήματα:

1. Επιλέξτε ένα αρχείο (JPEG, GIF, PNG) στον υπολογιστή σας ή απλώς εισαγάγετε τη διεύθυνση URL της εικόνας και κάντε κλικ στο " Μεταφόρτωση εικόνας“;
2. Επιλέξτε το μέγεθος (16×16, 32×32, 48×48, 64×64 ή 128×128) και την απαιτούμενη περιοχή της εικόνας εάν θέλετε να δημιουργήσετε μόνο μέρος της εικόνας κάνοντας κλικ στο « Λήψη και εικόνα“;
3. Κοιτάμε το αποτέλεσμα και, αν όλα είναι ικανοποιητικά, κατεβάζουμε το αρχείο.

Δημιουργία κινούμενου favicon για έναν ιστότοπο χρησιμοποιώντας ηλεκτρονικές γεννήτριες

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

www.favicon.by - υπηρεσία στα ρωσικά. Το μόνο που απαιτείται είναι να επιλέξετε ένα αρχείο, να εισαγάγετε το κείμενο στα Λατινικά (αν χρειάζεται) και να κάνετε κλικ στο κουμπί "Δημιουργία Favicon". Παρακάτω μπορείτε να δείτε το αποτέλεσμα και να κατεβάσετε το αρχείο με τα αρχεία.

www.favicon.com.mx - μια υπηρεσία εντελώς πανομοιότυπη με την προηγούμενη, μόνο στα αγγλικά.

Πού να φτιάξετε ένα favicon από την αρχή - διαδικτυακοί επεξεργαστές favicon

antifavicon.com - αυτή η υπηρεσία, για κάποιο λόγο με το πρόθεμα anti, είναι ενδιαφέρουσα γιατί σας επιτρέπει να δημιουργήσετε μόνοι σας το αρχείο favicon.ico, αλλά όχι ως εικόνα, αλλά ως κείμενο σε έγχρωμο φόντο. Το μόνο που χρειάζεται να κάνετε είναι να εισάγετε τα κατάλληλα γράμματα και να επιλέξετε χρώματα. Παρεμπιπτόντως, έφτιαξα το favicon μου εδώ. Σκέφτηκα ότι θα το άλλαζα αργότερα, αλλά τώρα το έχω συνηθίσει.

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

Το favicon.ru είναι μια δημοφιλής ρωσική διαδικτυακή γεννήτρια όπου μπορείτε να δημιουργήσετε favicon από εικόνες και να τις σχεδιάσετε. Μπορείτε επίσης να παραγγείλετε τη δημιουργία favicon από ειδικούς για 20 $. Αναρωτιέμαι αν κάνει κανείς παραγγελίες εκεί;

Το www.favicon.cc είναι μια άλλη δημοφιλής γεννήτρια, παρόμοια με την προηγούμενη. Ένα ενδιαφέρον χαρακτηριστικό αυτής της υπηρεσίας είναι ότι μπορείτε να δημιουργήσετε κινούμενα σχέδια καρέ-καρέ με διάρκεια έως και 20 δευτερόλεπτα.

Μπορείτε να δείτε το κινούμενο favicon και να το κατεβάσετε στο παράθυρο προεπισκόπησης.

www.degraeve.com/favicon - άλλη μια ηλεκτρονική συσκευή δημιουργίας favicon. Αυτό το πρόγραμμα επεξεργασίας, όπως και τα προηγούμενα, σας επιτρέπει να δημιουργήσετε ένα διαφανές φόντο εικονιδίων.

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

Κι όμως, φύλαξα μια άλλη ηλεκτρονική δημιουργία εικονιδίων για τον ιστότοπο για αργότερα. Αυτή η υπηρεσία αξίζει μια ξεχωριστή ανάρτηση, όπου θα σας πω πώς να δημιουργήσετε ένα favicon για προγράμματα περιήγησης iPhone, iPod Touch και iPad και θα ασχοληθώ με περισσότερες λεπτομέρειες σχετικά με την εγκατάσταση εικονιδίων κινούμενων εικόνων στον ιστότοπο. Επιπλέον, θα σας παρουσιάσω την υπηρεσία Favicon Validator, όπου μπορείτε να ελέγξετε και να δείτε όλα τα εικονίδια favicon.ico εάν αυτό το αρχείο περιέχει περισσότερες από μία εικόνες.. Γεια σε όλους!