Δημιουργία εικονιδίου favicon. Ένας καθολικός τρόπος δημιουργίας favicons. Favicon από μια ολοκληρωμένη εικόνα

22.06.2020

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

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

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

Τι είναι το favicon και γιατί χρειάζεται;

Παρά το γεγονός ότι ένα favicon είναι ένα πολύ μικρό γραφικό αντικείμενο, είναι εξαιρετικά σημαντικό στον σχεδιασμό της ιστοσελίδας και γενικότερα.

Κάντε κλικ για μεγέθυνση της εικόνας.

Πρώτα, Ένα favicon κάνει τον ιστότοπό σας πιο εξατομικευμένο και συνεπή με άλλα γραφικά στοιχεία, όπως ένα λογότυπο.

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

Τρίτος , ένα favicon επιτρέπει στον χρήστη να βρει γρήγορα τον ιστότοπό σας στον κατάλογο σελιδοδεικτών ή άλλων εικονιδίων στην επιφάνεια εργασίας.

Δημιουργία σχεδίου favicon

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

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

Μην χρησιμοποιείτε κείμενο

Θα πρέπει να αποφύγετε τη χρήση κειμένου, γιατί λόγω του μικρού μεγέθους του favicon, οι επιγραφές θα είναι δυσανάγνωστες. Τοποθετήστε 1, το πολύ 2 γράμματα στο εικονίδιο - για παράδειγμα, τα πρώτα στο όνομα της εταιρείας σας ή του πόρου Ιστού. σε αυτή την περίπτωση μπορούν ακόμα να διακριθούν.

Favicon pixelation

Τα Favicon είναι τόσο μικρά που κάθε pixel έχει σημασία. Συχνά, όταν κάνετε ένα λογότυπο πλήρους μεγέθους μικρότερο, η εικόνα εμφανίζεται θολή.

Αυτό είναι ένα κομμάτι του λογότυπου πλήρους μεγέθους του Facebook αφού μειώθηκε σε μέγεθος 32x32. Είναι εύκολο να παρατηρήσετε ότι η εικόνα "επιπλέει" γύρω από τις άκρες. Για να αποφευχθεί ένα τέτοιο ελάττωμα, η επεξεργασία θα πρέπει να γίνεται σε επίπεδο pixel.
Όταν εργάζομαι με εικονίδια, προτιμώ να χρησιμοποιώ προγράμματα επεξεργασίας εικόνων ράστερ (όπως το Photoshop ή το Pixelmator). Αρχικά, μειώνω το λογότυπο πλήρους μεγέθους σε 64x64 pixel επειδή αυτό είναι το μεγαλύτερο favicon που θα χρειαστώ. Η δουλειά είναι πολύ επίπονη, μπορεί να διαρκέσει μια ολόκληρη ώρα, ή και δύο, αλλά το αποτέλεσμα είναι απλά εξαιρετικό.
Εάν δεν έχετε τον χρόνο και τις δεξιότητες για τέτοιες λειτουργίες, είναι προτιμότερο να χρησιμοποιείτε διαδικτυακές υπηρεσίες όπως π.χ Logotizer.ru

Μέγεθος Favicon

Έχοντας λάβει ένα εικονίδιο 64x64, δημιουργώ εικονίδια 32x32, 24x24 και 16x16 pixel με τον ίδιο τρόπο. Κάθε ένα από αυτά έχει το δικό του σκοπό:

– 64×64 – «Λίστα ανάγνωσης» σε Safari και Windows
– 24×24 – Καρφιτσωμένοι ιστότοποι στον IE9.
– 32×32 – Για οθόνες υψηλής ανάλυσης.
– 16x16 – Συνήθως χρησιμοποιείται σε προγράμματα περιήγησης όπως IE, Safari, Chrome κ.λπ.

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

Μορφές Favicon

Παλαιότερα, όταν υποστηρίζονταν μόνο αρχεία ICO των Windows, μπορούσαμε να εξοικονομήσουμε χρόνο αποθηκεύοντας το favicon 16x16 ως GIF και δίνοντάς του την επέκταση .ico. Αυτή η τεχνική λειτούργησε άψογα! Αλλά τώρα αυτή η μέθοδος δεν είναι απαραίτητη καθώς τα εργαλεία για τη δημιουργία αρχείων ICO μπορούν εύκολα να βρεθούν στο Διαδίκτυο. Επιπλέον, και χρησιμοποιούνται πλέον για favicons, αλλά τα πιο συνηθισμένα εξακολουθούν να είναι μόνο τα ακόλουθα δύο.

ICO

Η παλάμη ανήκει στη μορφή ICO. Σε αντίθεση με τα αρχεία PNG, τα αρχεία ICO μπορούν να έχουν διαφορετικές αναλύσεις και βάθη bit (κάτι που είναι εξαιρετικό για Windows). Ο Internet Explorer χρησιμοποιεί favicons διαφόρων μεγεθών (για παράδειγμα, εικονίδια γραμμής εργασιών 32 pixel στα Windows 7) και επομένως η μορφή ICO είναι η μόνη επιλογή σε αυτήν την περίπτωση.

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

Υπάρχουν και άλλες επιλογές:

– Οι μορφές GIF και κινούμενων GIF δεν έχουν άλλα πλεονεκτήματα εκτός από τη συμβατότητα με πολύ παλιά προγράμματα περιήγησης.
– Δεν συνιστάται η μορφή JPG, ακόμα κι αν η εικόνα έχει τη μορφή φωτογραφίας. Αυτή η μορφή δεν έχει την ευκρίνεια του PNG και το μόνο της πλεονέκτημα είναι οι πιο ομαλές μεταβάσεις μεταξύ των χρωμάτων - μια απόχρωση που είναι εντελώς απαρατήρητη σε μια πολύ μικρή εικόνα.
– Το SVG θα μπορούσε να είναι μια εξαιρετική επιλογή εάν περισσότερα προγράμματα περιήγησης υποστήριζαν favicons σε αυτήν τη μορφή. Προς το παρόν, υπάρχει μόνο συμβατότητα με την Opera.
– Υπάρχει επίσης η λεγόμενη «υπο-μορφή» του PNG – APNG (animated PNG), η οποία υποστηρίζεται σε Firefox και Opera. Ωστόσο, η σκοπιμότητα της χρήσης του παραμένει αμφισβητήσιμη. Ένα κινούμενο favicon μπορεί να αποσπά την προσοχή και ακόμη και να ενοχλεί τον χρήστη.

Δημιουργήστε ένα online favicon – εργαλεία και διαδικτυακές υπηρεσίες

Επιλέξαμε για εσάς τις πιο χρήσιμες υπηρεσίες που θα σας βοηθήσουν να δημιουργήσετε ένα online favicon.

Logotizer

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

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

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

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

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

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

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

Μόλις επιλεγεί το σχήμα, μπορείτε να προσθέσετε το δικό σας κείμενο. Όπως έγραψα νωρίτερα, είναι καλύτερο να χρησιμοποιείτε 1 ή 2 γράμματα, όχι περισσότερα.

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

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

Αφού δημιουργήσετε ένα favicon, η υπηρεσία θα σας προτείνει να το αποθηκεύσετε. Καταχωρίστε έναν λογαριασμό (το 2017 δεν υπάρχει τρόπος χωρίς εγγραφή) και μετά από αυτό μπορείτε να κάνετε λήψη αρχείων για μια μικρή πληρωμή - 199 ρούβλια.

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

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

Το ίδιο το αρχείο favicon.ico είναι πολλαπλών μεγεθών και περιέχει εικονίδια 4 μεγεθών σε 1 αρχείο (16px, 24px, 32px, 64px). Αντίστοιχα, εάν προσθέσετε έναν ιστότοπο στους σελιδοδείκτες του προγράμματος περιήγησής σας ή ανοίξετε το ιστορικό σας, θα μπορείτε να δείτε εικονίδια διαφορετικών μεγεθών, αλλά θα εμφανίζονται καθαρά και χωρίς θάμπωμα.

Συνολικά η εξυπηρέτηση είναι καλή. Απλό, βολικό, τίποτα περιττό.

RealFaviconGenerator.net

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

Favicon.by

Favicon.byείναι μια άλλη δωρεάν και εύχρηστη συσκευή δημιουργίας favicon που μετατρέπει αρχεία PNG, JPG και GIF σε μορφή .ico. Ανεβάστε μια εικόνα από τον υπολογιστή σας, επιλέξτε ένα μέγεθος (16x16px ή 32x32px) και κάντε κλικ στο κουμπί "Δημιουργία". Για να αποθηκεύσετε το favicon που προκύπτει στον ιστότοπό σας, ακολουθήστε τις οδηγίες.

Η υπηρεσία καθιστά επίσης δυνατή τη σχεδίαση ενός λογότυπου pixel προς pixel, αλλά, για να είμαστε ειλικρινείς, δεν μπορούν όλοι να το κάνουν αυτό. Για παράδειγμα, δεν μπορούσα. Τόσο στραβός είμαι :)

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

Μπορείτε να προσθέσετε ένα favicon στον ιστότοπό σας κάνοντας πολλές αλλαγές στον κώδικα HTML της σελίδας του ιστότοπου.

Βήμα 1: Ανεβάστε το αρχείο "favicon.ico" στον διακομιστή φιλοξενίας σας.

Για να το κάνετε αυτό, μεταβείτε στον διακομιστή FTP χρησιμοποιώντας αυτόν τον σύνδεσμο:
ftp:// [email προστατευμένο]
Εισαγάγετε το όνομα χρήστη και τον κωδικό πρόσβασής σας. Μπορείτε να τα αποκτήσετε από τον πίνακα διαχείρισης της εταιρείας φιλοξενίας σας.
Ανεβάστε αρχεία favicon στον ριζικό κατάλογο. Ο ριζικός κατάλογος συνήθως ονομάζεται "public_html" ή "www".

Βήμα 2: Προσθήκη favicon σε HTML.

Διατηρώντας το παράθυρο του διακομιστή FTP ανοιχτό, πραγματοποιήστε λήψη του αρχείου "index.html" ή "header.php".
Στη συνέχεια, πρέπει να κατεβάσετε τον κώδικα. Ο κώδικας που κατεβάζετε εξαρτάται από τον ιστότοπό σας.
Εάν ο ιστότοπός σας είναι HTML, βρείτε την περιοχή HEAD στο αρχείο index.html και επικολλήστε τον ακόλουθο κώδικα:

Εάν ο ιστότοπός σας είναι σε WordPress, βρείτε την περιοχή HEAD στο αρχείο header.php και επικολλήστε τον ακόλουθο κώδικα:

/favicon.ico” />

Χρησιμοποιώντας αυτούς τους κωδικούς, τα προγράμματα περιήγησης θα μπορούν να βρουν τα favicon σας.
Λοιπόν, εγκαταστήσατε το favicon σας!

Πώς να προσθέσετε ένα Favicon στο WordPress και σε άλλες πλατφόρμες

Εάν ο πόρος σας βασίζεται σε WordPress ή άλλο CMS, τότε η προσθήκη ενός favicon στον ιστότοπο είναι πολύ απλή. Γενικά, ο αλγόριθμος για την προσθήκη favicon για διαφορετικές πλατφόρμες θα είναι ο ίδιος.
1. Πρέπει να μεταβείτε στην κονσόλα του ιστότοπου.
2. Βρείτε την ενότητα "Σχεδίαση" ή "Εμφάνιση".

3. Μεταβείτε στην ενότητα "Ρυθμίσεις θέματος" και βρείτε το "Favicon" εκεί.

4. Ανεβάστε το favicon από τον υπολογιστή σας.

5. Αποθηκεύστε και ανανεώστε τη σελίδα.

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

Αυτό το άρθρο περιγράφει απλούς και γρήγορους τρόπους δημιουργίας favicon που είναι συμβατά με σχεδόν οποιοδήποτε πρόγραμμα περιήγησης και λειτουργικό σύστημα. Αλλά όταν πρόκειται για σχεδιασμό και ανάπτυξη ιστοσελίδων, ο ουρανός είναι το όριο. Αν θέλετε να μάθετε πώς να δημιουργείτε πιο σύνθετα favicon, εικονίδια αφής για τις αρχικές οθόνες iOS, εικονίδια για τη διεπαφή του Metro στα Windows, εικονίδια για το Google TV και πολλά άλλα, σας συνιστούμε να ελέγξετε αυτά τα υλικά: φύλλο εξαπάτησης favicon. Περιέχει πλήρεις πληροφορίες για το θέμα και παρέχει καλές πηγές. Αυτή είναι μια εξαιρετική επιλογή για εκείνους τους σχεδιαστές και προγραμματιστές (συμπεριλαμβανομένου και του εαυτού μου) που αναζητούν συνεχώς να επεκτείνουν τις γνώσεις τους.

Με το Favico.js μπορείτε να δημιουργήσετε δυναμικά favicon με αριθμούς.

Μπορεί επίσης να χρειαστείτε ένα δυναμικό favicon, το οποίο έχει ένα εικονίδιο με έναν αριθμό που αλλάζει. Για να δημιουργήσετε τέτοια favicons, συνιστώ να χρησιμοποιήσετε την υπηρεσία favico.js, διαθέσιμο στο Github. Τα δυναμικά favicons δεν είναι ακόμη συμβατά με όλα τα προγράμματα περιήγησης. Αλλά για τα προγράμματα περιήγησης που τα υποστηρίζουν, αυτά τα εικονίδια μπορεί να είναι μια ενδιαφέρουσα και χρήσιμη προσθήκη.

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

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

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

Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου.

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

Επιλέξτε οποιοδήποτε έργο από τη λίστα που θα βρείτε παρακάτω.
Βρείτε το favicon σας.
Λήψη και εγκατάσταση στον ιστότοπο.

Έργα όπου μπορείτε να κατεβάσετε έτοιμα favicon δωρεάν (16×16)

1. Findicons.com.

Υπάρχουν έτοιμα favicon σαν σκουπίδια (475 χιλιάδες). Φιλική προς το χρήστη διεπαφή, υπάρχει αναζήτηση με φράσεις κλειδιά. Φροντίστε να το χρησιμοποιήσετε. Τα Favicons είναι δωρεάν, δεν χρειάζεται να πληρώσετε. Για λήψη, κάντε κλικ στο Λήψη ICO.

2. Iconj.com.

Παρόμοια με το πρώτο έργο, μόνο που δεν υπάρχει αναζήτηση. Θα πρέπει να κάνετε αναζήτηση κάνοντας κλικ στις σελίδες. Απέναντι από το favicon, κάντε κλικ στο ICO για λήψη.

3. Faviconka.ru.

Ένα απλό έργο που έχει στο οπλοστάσιό του 2118 έτοιμα εικονίδια. Ακολουθήστε τον άμεσο σύνδεσμο και αποθηκεύστε μη αυτόματα το favicon.

Αυτή είναι όλη η λίστα. Ελπίζω ότι αυτά τα 3 έργα είναι αρκετά για εσάς.

Υπάρχει ένα favicon, αλλά πώς να το εγκαταστήσω στον ιστότοπο; Φίλοι, υπάρχει ήδη ένα άρθρο στο blog όπου μίλησα για αυτό λεπτομερώς. Σας περιμένω (τελευταίο τμήμα).

Πώς να εγκαταστήσετε ένα Favicon στο WordPress

Εδώ μπορείτε να πάτε με δύο τρόπους:

κάντε το χειροκίνητα - εμφανίστε το με κωδικό.
ή εγκαταστήστε χρησιμοποιώντας πρόσθετα.

Εγκατάσταση favicon στο WordPress με χρήση κώδικα.

Βήμα 1. Προσθέστε ένα favicon στη ρίζα του ιστότοπου. Ας κάνουμε ένα όνομα - favicon.

ΥΣΤΕΡΟΓΡΑΦΟ. Δεν μπορείτε να συνδεθείτε μέσω FTP; Γράψτε μου . Σίγουρα θα σας συμβουλεύσω.

Βήμα 2. Στις ενότητες Appearance => Editor πρέπει να βρούμε το αρχείο header.php. Σε αυτό το αρχείο πρέπει να επικολλήσετε τον ακόλουθο κώδικα (παρακάτω ):

< link rel = "shortcut icon" href="/favicon.png" />

Ολα. Το Favicon στο WordPress (με κώδικα) εγκαταστάθηκε με επιτυχία.

Εγκατάσταση favicons στο WordPress χρησιμοποιώντας ένα πρόσθετο.

Βήμα 1. Πρέπει να κατεβάσουμε το πρόσθετο Όλα σε ένα Favicon.Σύνδεσμος εδώ.

Βήμα 2. Ας πάμε στις ρυθμίσεις της προσθήκης:

Ανεβάστε το favicon και η δουλειά τελείωσε.

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

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

Με εκτίμηση, Mogish Ivan

Χαιρετισμούς, αγαπητοί επισκέπτες του ιστολογίου μου. Σήμερα ετοίμασα για εσάς μια επιλογή από 10 υπηρεσίες που θα σας βοηθήσουν να φτιάξετε ένα favicon online. Και επίσης στο τέλος του άρθρου επεσήμανα τους 5 πιο βολικούς ιστότοπους, κατά τη γνώμη μου.

Αρχικά, αξίζει να καταλάβουμε τι είναι το favicon; Νομίζω ότι πολλοί από εσάς γνωρίζετε αυτή την έννοια, αλλά θα σας το ξαναπώ. Με μια λέξη, αυτό είναι το εικονίδιο του ιστότοπού σας. Κατά την αναζήτηση στο Yandex, είδατε ένα μικρό εικονίδιο 16x16 δίπλα στον ιστότοπο, επομένως αυτό είναι ένα favicon. Μπορεί επίσης να φαίνεται στη γραμμή διευθύνσεων και σε σελιδοδείκτες σε ορισμένα προγράμματα περιήγησης.

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

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

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

- Μπορείτε να δημιουργήσετε ένα από μια εικόνα ή να το σχεδιάσετε μόνοι σας.
- Μετά τη δημιουργία, εμφανίζεται ένα παράδειγμα σύνδεσης για προσθήκη στον ιστότοπο.
- Όλα είναι στα αγγλικά.
- Άσχημο σχέδιο.
- Είναι αδύνατο να περικόψετε μια εικόνα κατά τη δημιουργία της.
3 www.Chami.com
- Όμορφη φιλική προς το χρήστη διεπαφή.
- Είναι δυνατό να φτιάξετε ένα favicon από μια εικόνα ή να το σχεδιάσετε μόνοι σας.
- Μεγάλη παλέτα χρωμάτων για σχέδιο.
- Καμιά προεπισκόπηση.
- Όλα είναι στα αγγλικά.
- Δεν υπάρχει γκαλερί με έτοιμα εικονίδια.
- Φιλική προς το χρήστη διεπαφή.
- Τίποτα επιπλέον.
- Δεν υπάρχει γκαλερί με έτοιμα εικονίδια.
- Αδύνατον να ζωγραφίσεις μόνος σου.
- Δεν μπορείτε να περικόψετε την εικόνα κατά τη δημιουργία.
- Βολική όμορφη διεπαφή.
- Τίποτα επιπλέον.
- Είναι δυνατό να το σχεδιάσετε μόνοι σας ή να το δημιουργήσετε από μια εικόνα.
- Υπάρχει μια συλλογή με έτοιμα εικονίδια.
- Μπορείτε να διατηρήσετε το μέγεθος του εικονιδίου όταν το δημιουργείτε ή να το συμπιέσετε.
- Προεπισκόπηση.
- Μπορείτε να δημιουργήσετε ένα κινούμενο εικονίδιο.
- Ένας τεράστιος αριθμός χρωμάτων για ζωγραφική.
- Όλα είναι στα αγγλικά.
- Υπάρχει δυνατότητα επιλογής μεγεθών εικονιδίων 16×16 και 32×32.
- Δεν υπάρχουν πρόσθετες λειτουργίες, μόνο η δημιουργία ενός favicon από μια εικόνα.
- Καμιά προεπισκόπηση.
- Προεπισκόπηση.
- Μεγάλη συλλογή από έτοιμα εικονίδια.
- Είναι δυνατή η περικοπή της εικόνας.
- Όλα είναι στα αγγλικά.
- Υπάρχουν σφάλματα στον ιστότοπο.
- Άβολη διεπαφή.
- Μπορείτε να επιλέξετε το μέγεθος του εικονιδίου από 16×16, 32×32, 48×48 και 64×64.
- Όλα είναι στα αγγλικά.
- Τίποτα επιπλέον.
- Είναι δυνατό να επιλέξετε το μέγεθος του εικονιδίου.
- Μπορείτε να το σχεδιάσετε μόνοι σας ή να φτιάξετε ένα favicon στο διαδίκτυο από μια εικόνα.
- Δεν υπάρχει επιλογή περικοπής της εικόνας.
- Καμιά προεπισκόπηση.

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

Και τώρα, όπως υποσχέθηκα, οι TOP 5 βολικές και υψηλής ποιότητας υπηρεσίες, κατά τη γνώμη μου.

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

ΥΣΤΕΡΟΓΡΑΦΟ. Εάν δεν έχετε βρει ακόμα ένα favicon για τον εαυτό σας, φροντίστε να ελέγξετε τον ιστότοπο Faviconka.ru. Πάνω του θα βρείτε περισσότερα από 2.000 έτοιμα εικονίδια για κάθε γούστο. Ελπίζω ότι το άρθρο σας ήταν χρήσιμο και βρήκατε την υπηρεσία σας για να φτιάξετε ένα favicon στο διαδίκτυο.

Τι είναι το favicon;

Για όσους δεν ξέρουν τι είναι το favicon, θα σας δώσουμε μερικές πληροφορίες που θα σας βοηθήσουν να ενημερωθείτε. Το favicon είναι ένα μικρό εικονίδιο διαστάσεων 16x16 ή 32x32 pixel, που συνήθως περιέχει ένα λογότυπο, το πρώτο γράμμα μιας επωνυμίας ή μια χαρακτηριστική εικόνα που αντικατοπτρίζει τον τύπο της επιχείρησης ή το θέμα του ιστότοπου.

Γιατί είναι σημαντικό ένα favicon;

Το favicon εκτελεί τις ακόλουθες λειτουργίες:

Επωνυμία.

Αναγνώριση του ιστότοπου από τον χρήστη (ευκολία χρήσης).

Δίνει στον ιστότοπο μια επαγγελματική εμφάνιση.

Ας ρίξουμε μια πιο προσεκτική ματιά στα κύρια πλεονεκτήματα της χρήσης favicons.

Αναγνώριση μάρκας

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

Αυτοπεποίθηση

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

Επαναλαμβανόμενες επισκέψεις

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

Εξοικονομεί χρόνο χρήστη

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

Οφέλη SEO

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

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

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

Για να το κάνετε αυτό, ακολουθήστε τις οδηγίες βήμα προς βήμα:

Βήμα 5: Δημιουργήστε ένα favicon

Τώρα που έχετε ένα λογότυπο, κάντε κλικ στην επιλογή "Δημιουργία favicon με αυτό το λογότυπο" στη σελίδα με το λογότυπο.

Βήμα 6. Επιλέξτε το επιθυμητό σχέδιο favicon

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

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

Μπορείτε να βρείτε έμπνευση για favicons στους παρακάτω ιστότοπους:

Βήμα 7. Κατεβάστε το favicon

Μπορείτε να αγοράσετε το favicon ξεχωριστά για 9,99 $ ή να αγοράσετε ένα πακέτο σχεδίασης που περιλαμβάνει όχι μόνο το favicon, αλλά και ένα λογότυπο, επαγγελματική κάρτα, φάκελο και επιστολόχαρτο. Μπορείτε να μάθετε πώς να αγοράσετε ένα πακέτο σχεδίασης.

Μετά την πληρωμή, μπορείτε να κατεβάσετε το favicon σε μορφή ico και png.

Πού μπορώ να χρησιμοποιήσω ένα favicon;

Μπορείτε να χρησιμοποιήσετε το favicon:

Στο site?

Κινητές συσκευές. Ο χρήστης μπορεί να προσθέσει ένα favicon στην αρχική οθόνη της συσκευής του (κάτι σαν σελιδοδείκτη) - Android, IOS, Windows Phone κ.λπ.

Προγράμματα και εφαρμογές για PC/Mac.

Πώς να εγκαταστήσετε ένα favicon σε έναν ιστότοπο;

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

Βήμα 1.Πρέπει να ανεβάσετε το αρχείο favicon.ico στον διακομιστή. Για να το κάνετε αυτό, πρέπει να κάνετε λήψη και εγκατάσταση ενός προγράμματος-πελάτη ftp, όπως το FileZilla. Στη συνέχεια, πληκτρολογήστε το όνομα χρήστη και τον κωδικό πρόσβασής σας και κάντε λήψη του αρχείου. Μπορείτε να διαβάσετε πιο λεπτομερείς οδηγίες για το πώς να ανεβάσετε ένα αρχείο favicon.

Βήμα 2.Τώρα πρέπει να επεξεργαστείτε τη σελίδα HTML του ιστότοπού σας για να βοηθήσετε τα προγράμματα περιήγησης να βρουν την εικόνα favicon σας. Με ανοιχτό το παράθυρο FTP, βρείτε και πραγματοποιήστε λήψη του αρχείου index.html ή header.php από τον διακομιστή.

Ανοίξτε το αρχείο index.html σε ένα πρόγραμμα επεξεργασίας κειμένου - Σημειωματάριο, Σημειωματάριο++, Sublime Text.

Εάν ο ιστότοπός σας περιέχει καθαρό HTML, επικολλήστε τον ειδικό κώδικα στην περιοχή HEAD του αρχείου index.html.

Ο κώδικας μπορεί να αντιγραφεί στη σελίδα favicon στον ιστότοπο του Logaster.

Εάν χρησιμοποιείτε WordPress, επικολλήστε τον παρακάτω κώδικα στην περιοχή HEAD του αρχείου header.php.

Μόλις το κάνετε αυτό, κάντε λήψη του αρχείου πίσω στο σημείο που το πήρατε. Ετοιμος! Επαναλάβετε τη φόρτωση της σελίδας του ιστότοπού σας για να δείτε το favicon.

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

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

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

Σε ποια μορφή πρέπει να αποθηκεύσω το favicon;

Όλα εξαρτώνται από το πρόγραμμα περιήγησης. Για Microsoft Explorerκατάλληλη μορφή εικονιδίου ICO. Έχουμε ήδη συναντήσει αυτήν τη μορφή όταν φτιάξαμε τον κέρσορα. Για άλλα προγράμματα περιήγησης από Google Chromeπριν Apple Safariτακτική θα κάνει GIFή PNG. Faviconμπορεί να είναι ημιδιαφανές. Για να το κάνετε αυτό, πρέπει να το αποθηκεύσετε σε ημιδιαφανές PNG, και στη συνέχεια μετατρέψτε τη μορφή ICO. Αυτό μπορεί να γίνει σε ένα καλό πρόγραμμα IcoFX.Ωστόσο, υπάρχουν πολλοί ιστότοποι τρίτων για τη δημιουργία favicon, και το πιο προφανές από αυτά είναι το www.favicon.ru

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

Πώς να είσαι σίγουρος ότι faviconθα λειτουργήσει; Πρέπει να πληρούνται 4 προϋποθέσεις.

Το αρχείο θα πρέπει να ονομάζεται - favicon.
Μέγεθος Favicon 16 επί 16 εικονοστοιχεία
Το βέλτιστο μέρος για ένα favicon είναι ο ριζικός φάκελος του ιστότοπου.
Γράψτε τη διεύθυνση του εικονιδίου στις μετα-ετικέτες hederστο ευρετήριο του ιστότοπου.

Στην έκφραση HTML μοιάζει με αυτό:

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

Δημιουργήστε ένα favicon στο Photoshop

Δημιουργώ faviconπολύ απλό. Θέλετε να φτιάξετε ένα τέτοιο; faviconόπως το VKontakte ή το Odnoklassniki; Καλός faviconδεν μπορεί να γίνει με τη μείωση μεγάλων εικόνων σε κάθε είδους «γεννήτριες» favicon, οι οποίες είναι γεμάτες από αυτές στο Διαδίκτυο. Το favicon είναι πολύ μικρό. Στην πραγματικότητα είμαστε κάπως pixel art, που έχει τα δικά του χαρακτηριστικά. Δεν μπορείτε να γράψετε ένα γράμμα και απλώς να το μειώσετε σε 16 εικονοστοιχεία .

Αρέσει faviconθα είναι θολή και δυσδιάκριτη, καθώς οι άκρες του γράμματος θα επικαλύπτονται κατά πολλά pixel κατά την αλλαγή μεγέθους. Θα αποδειχθεί κάπως αντι-ψευδώνυμο, το οποίο είναι συνήθως καλό, αλλά στην περίπτωση της τέχνης pixel τέτοιες μεταβάσεις απλώς δεν χρειάζονται. Από την άλλη πλευρά, θα πρέπει να αποφύγετε το υπερβολικό «τρίψιμο» στη στρογγυλότητα, διαφορετικά θα καταλήξετε με hello 1999 gif.

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

Σχεδιάζοντας το φόντο

Γιατί στην εισαγωγή αυτού του μαθήματος βλέπετε μια τεράστια λεία και γλείφη favicon? Γιατί το μεγάλωσα για την εισαγωγή για το μάθημα. Πώς κατάφερα να μεγεθύνω ποιοτικά την εικόνα; 16 εικονοστοιχεία? Πολύ απλά, δουλεύω πάντα σε vector αν είναι δυνατόν να το χρησιμοποιήσω και αν έχει νόημα. Και το διάνυσμα αντέχει εύκολα κάθε μεταμόρφωση και δεν χάνει ποιότητα.

Επιλέξτε ένα εργαλείο Εργαλείο στρογγυλεμένο ορθογώνιο. Στον πίνακα ρυθμίσεων, επιλέξτε λειτουργία, η οποία θα σας επιτρέψει να σχεδιάσετε διάνυσμα. Στο αναπτυσσόμενο μενού του πίνακα υπάρχει ένα σημάδι επιλογής - Snap To Pixels. Αυτό είναι απαραίτητο ώστε οι διανυσματικές διαδρομές να αποσπώνται σε pixel και να μην τραβούν «ανάμεσα» τους.

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