Δημιουργία favicon
Βάλτε το λογότυπό σας και αποκτήστε ένα πλήρες σύνολο αρχείων favicon, από το εικονίδιο της καρτέλας του προγράμματος περιήγησης 16 εικονοστοιχεία έως το εικονίδιο της εφαρμογής 512 εικονοστοιχεία, καθώς και το HTML για επικόλληση. Όλα συμβαίνουν στο πρόγραμμα περιήγησής σας, επομένως η εικόνα σας δεν μεταφορτώνεται ποτέ.
Qwyzzle
Summit Roasters
Fox EsportsΡίξτε το λογότυπό σας εδώ
PNG, JPG, WebP ή SVG. Το τετράγωνο λειτουργεί καλύτερα, 512 px ή μεγαλύτερο.
Κατασκευάστηκε στο πρόγραμμα περιήγησής σας. Η εικόνα σας δεν μεταφορτώνεται ποτέ.
Τι είναι το favicon και πού εμφανίζεται
Το favicon είναι το μικρό τετράγωνο εικονίδιο που αντιπροσωπεύει τον ιστότοπό σας. Το όνομα είναι σύντομο για το "αγαπημένο εικονίδιο": το πρώτο πρόγραμμα περιήγησης που εμφανίστηκε το έβαλε δίπλα στους σελιδοδείκτες σας, τους οποίους ονόμασε Αγαπημένα.
Το βλέπετε στις καρτέλες του προγράμματος περιήγησης, δίπλα στον τίτλο της σελίδας, πλάτος 16 εικονοστοιχεία ή 32 σε πιο ευκρινή οθόνη. Επισημαίνει τον ιστότοπό σας στους σελιδοδείκτες και το ιστορικό περιήγησης επίσης. Όταν κάποιος αποθηκεύει τον ιστότοπό σας στην αρχική οθόνη ενός τηλεφώνου, μετατρέπεται σε εικονίδιο εφαρμογής. Και το Google το εμφανίζει δίπλα στο όνομα του ιστότοπού σας στα αποτελέσματα αναζήτησης.
Παντού, η δουλειά του είναι η ίδια: να αναγνωρίζεται με μια ματιά ανάμεσα σε άλλα εικονίδια.
Γιατί ένα favicon γίνεται ένα σύνολο αρχείων
Κάθε ένα από αυτά τα μέρη ήρθε σε διαφορετική στιγμή και ζητά το δικό του αρχείο. Η παραπάνω γεννήτρια favicon τα κάνει όλα από μία εικόνα.
Οι καρτέλες του προγράμματος περιήγησης, οι σελιδοδείκτες και το ιστορικό χρησιμοποιούν το favicon.ico, ένα αρχείο με εκδόσεις 16, 32 και 48 εικονοστοιχεία μέσα. Είναι η παλαιότερη μορφή: όταν μια σελίδα ονομάζει κανένα εικονίδιο, τα προγράμματα περιήγησης εξακολουθούν να αναζητούν το favicon.ico στον ριζικό φάκελο του ιστότοπου.
Αν ξεκινήσετε με SVG, θα λάβετε και favicon.svg για τα προγράμματα περιήγησης που υποστηρίζουν εικονίδια SVG. Αποτελείται από σχήματα αντί για εικονοστοιχεία και παραμένει καθαρό σε κάθε οθόνη.
Τα iPhone και τα iPad χρησιμοποιούν apple-touch-icon.png, τετράγωνο 180 εικονοστοιχεία, όταν κάποιος προσθέτει τον ιστότοπό σας στην αρχική οθόνη. Ένα iPhone γεμίζει διαφανείς περιοχές με μαύρο, έτσι αυτό το εικονίδιο έχει πάντα ένα σταθερό φόντο: το χρώμα σας ή λευκό, αν επιλέξατε διαφανές.
Τα τηλέφωνα Android και οι ιστότοποι που είναι εγκατεστημένοι ως εφαρμογές από ένα πρόγραμμα περιήγησης, χρησιμοποιούν τα icon-192.png και icon-512.png. Τα βρίσκουν μέσω του site.webmanifest, ενός μικρού αρχείου κειμένου που λέει στα προγράμματα περιήγησης το όνομα του ιστότοπού σας, εάν πληκτρολογήσατε ένα στο εργαλείο και πού βρίσκονται τα μεγαλύτερα εικονίδια του.
Τα χαλαρά PNG από 16 έως 48 εικονοστοιχεία είναι ανταλλακτικά για υπηρεσίες που θέλουν PNG. Για αποτελέσματα αναζήτησης, το Google διαβάζει τους συνδέσμους εικονιδίων στο HTML της αρχικής σας σελίδας.
Πώς να προσθέσετε τα αρχεία favicon στον ιστότοπό σας
Εάν εσείς ή ο προγραμματιστής σας επεξεργαστείτε τα αρχεία του ιστότοπου, απαιτούνται δύο βήματα.
Αρχικά, αποσυμπιέστε τη λήψη και τοποθετήστε τα αρχεία στον ριζικό φάκελο του ιστότοπού σας, τον επάνω φάκελο όπου βρίσκεται η αρχική σελίδα. Για έλεγχο, προσθέστε το /favicon.ico στη διεύθυνση του ιστότοπού σας: το εικονίδιο πρέπει να ανοίξει.
Δεύτερον, επικολλήστε τις γραμμές HTML από το README (το εργαλείο τις δείχνει επίσης) στην κεφαλή των σελίδων σας: το τμήμα στο επάνω μέρος του HTML που περιέχει τον τίτλο της σελίδας. Υπάρχει μια γραμμή για το αρχείο ICO, το εικονίδιο αφής Apple και το μανιφέστο, καθώς και το SVG, αν έχετε.
Συνήθως κάθε σελίδα μοιράζεται ένα πρότυπο, επομένως τα επικολλάτε μόνο μία φορά. Διαγράψτε πρώτα τυχόν παλαιότερες γραμμές εικονιδίων, διαφορετικά τα προγράμματα περιήγησης ενδέχεται να συνεχίσουν να επιλέγουν το παλιό εικονίδιο.
Σε ένα εργαλείο δημιουργίας τοποθεσιών, μπορείτε να παραλείψετε και τα δύο βήματα: μεταφορτώστε το icon-512.png στη ρύθμιση εικονιδίων τοποθεσίας και το πρόγραμμα δημιουργίας προσθέτει το HTML για εσάς.
Πώς να κάνετε ένα λογότυπο να λειτουργεί στα 16 εικονοστοιχεία
Στο 16 επί 16, ολόκληρο το εικονίδιο σας είναι 256 μικροσκοπικά τετράγωνα χρώματος. Τα περισσότερα λογότυπα δεν σχεδιάστηκαν για αυτό.
Ξεκινήστε από το σύμβολο και όχι από το όνομα. Σε ένα όνομα οκτώ γραμμάτων που χωρά σε 16 εικονοστοιχεία, κάθε γράμμα παίρνει μόλις δύο. Αν δεν υπάρχει σύμβολο, χρησιμοποιήστε το πρώτο γράμμα, μεγάλο και έντονο. Οι χοντρές γραμμές παραμένουν ευανάγνωστες σε μικρότερα μεγέθη από τις λεπτές.
Στη συνέχεια, βγάλτε τις λεπτομέρειες. Πολύ λεπτές γραμμές και μικρά κενά θολώνουν το περιβάλλον τους και ένα σλόγκαν μετατρέπεται σε μουντζούρα.
Αυτό που μετράει είναι το φως ενάντια στο σκοτάδι, όχι τα ίδια τα χρώματα. Οι καρτέλες είναι ανοιχτόχρωμες ή σκούρες ανάλογα με το θέμα και ένα εικονίδιο ναυτικού εξαφανίζεται σε μια σκοτεινή γραμμή καρτελών. Εάν το σημάδι σας είναι σκούρο, δώστε του ένα ανοιχτό φόντο στο εργαλείο ή το αντίστροφο.
Το περιθώριο, ο χώρος ανάμεσα στο λογότυπό σας και την άκρη του τετραγώνου, είναι ένα συμβιβασμό. Πάρα πολύ και το λογότυπο συρρικνώνεται στην καρτέλα. Πολύ λίγο και ένα iPhone, που ολοκληρώνει τα εικονίδια της αρχικής οθόνης, κόβει τις γωνίες του λογότυπου.
Τέλος, ελέγξτε τις προεπισκοπήσεις ανοιχτής και σκοτεινής καρτέλας παραπάνω στο πραγματικό τους μέγεθος, χωρίς να κάνετε μεγέθυνση. Το δωρεάν έλεγχος λογότυπου προχωρά περαιτέρω: συρρικνώνει το λογότυπό σας στα 32 εικονοστοιχεία και μετρά πόσες λεπτομέρειες επιβιώνουν.
Πότε να ξανασχεδιάσετε το σημάδι αντί να το συρρικνώσετε
Μερικές φορές τίποτα δεν το σώζει. Σε μια λεπτομερή απεικόνιση ή μια τρισδιάστατη εμφάνιση που βασίζεται σε σκίαση, η λεπτομέρεια είναι η σχεδίαση και στα 16 εικονοστοιχεία έχει φύγει. Αυτό το εργαλείο μπορεί να αλλάξει το μέγεθος του λογότυπού σας, αλλά δεν μπορεί να το επανασχεδιάσει.
Αυτό δεν το κάνει κακό λογότυπο, μόνο ένα φτιαγμένο για μεγαλύτερα μέρη. Σχεδιάστε μια μικρή έκδοση επίτηδες: ένα απλοποιημένο σύμβολο ή το αρχικό σας στη γραμματοσειρά της επωνυμίας σας. Κρατήστε τα χρώματά σας και κάτι από το σχήμα, και οι άνθρωποι θα τα συνδέσουν. Θα παίρναμε ένα καθαρό αρχικό πάνω από μια θολή μινιατούρα κάθε φορά.
Χρειάζεστε νέο σήμα; Το εργαλείο δημιουργίας λογότυπου με AI σχεδιάζει ένα από το εμπορικό σήμα σας, συν μια σύντομη περιγραφή, αν θέλετε. Τα λογότυπα από τα πρότυπα λογότυπων μας συνοδεύονται από το σύμβολο ως ξεχωριστό αρχείο όταν διαθέτουν, και κάθε λογότυπο που αγοράζετε από εμάς περιλαμβάνει τα αρχεία favicon του.
Ερωτήσεις Favicon
Είναι δωρεάν, χωρίς εγγραφή και χωρίς υδατογράφημα. Η εικόνα σου μένει μαζί σου επίσης. Το εργαλείο λειτουργεί εξ ολοκλήρου στο πρόγραμμα περιήγησής σας: κάνει κάθε μέγεθος και το zip απευθείας στη συσκευή σας και η εικόνα δεν αποστέλλεται ποτέ στους διακομιστές μας. Αυτό καθιστά εντάξει τη χρήση σε ένα λογότυπο που δεν έχετε δείξει ακόμη σε κανέναν.
Τετράγωνο και τουλάχιστον 512 εικονοστοιχεία σε κάθε πλευρά. Το μεγαλύτερο εικονίδιο στο σετ είναι 512 εικονοστοιχεία, επομένως ένα μικρότερο PNG, JPG ή WebP πρέπει να τεντωθεί για να το γεμίσει και τα μεγάλα εικονίδια να βγαίνουν απαλά. Το εργαλείο σας λέει πότε συμβαίνει αυτό. Ένα SVG δεν έχει τέτοιο όριο: είναι φτιαγμένο από σχήματα, όχι από εικονοστοιχεία, έτσι ώστε να παραμένει ευκρινές σε κάθε μέγεθος. Ένα φαρδύ λογότυπο γεμίζει μόνο μια λεπτή λωρίδα ενός τετραγώνου, οπότε ξεκινήστε από το σύμβολο ή το αρχικό σας.
Χρειάζεστε όλα τα αρχεία, γιατί κάθε πρόγραμμα περιήγησης και τηλέφωνο μπορεί να ζητά διαφορετική μορφή. Ο κώδικας HTML του εργαλείου υποδεικνύει ποιο αρχείο να χρησιμοποιήσει το καθένα. Το ICO υποστηρίζεται από όλα τα προγράμματα περιήγησης. Τα PNG είναι για τηλέφωνα και εγκατεστημένες εφαρμογές, με επιπλέον μικρά μεγέθη. Αν η αρχική εικόνα είναι SVG, λαμβάνετε και SVG που παραμένει καθαρό σε κάθε οθόνη με πρόγραμμα περιήγησης που το υποστηρίζει.
Πιθανότατα το πρόγραμμα περιήγησής σας εμφανίζει ένα αποθηκευμένο αντίγραφο. Τα προγράμματα περιήγησης διατηρούνται στα favicon πολύ περισσότερο από ό,τι στο υπόλοιπο μιας σελίδας, έτσι ώστε το παλιό εικονίδιο να μπορεί να παραμείνει μετά την ενεργοποίηση των νέων αρχείων. Δοκιμάστε μια σκληρή ανανέωση, η οποία φορτώνει ξανά τη σελίδα χωρίς τα αποθηκευμένα αρχεία της: Ctrl+Shift+R στα Windows, Cmd+Shift+R σε Mac (Option+Cmd+R στο Safari). Εάν αυτό δεν το κάνει, ανοίξτε τη διεύθυνση του ιστότοπού σας με το /favicon.ico στο τέλος και ανανεώστε το ή ψάξτε σε ένα ιδιωτικό παράθυρο. Τα προγράμματα περιήγησης άλλων ανθρώπων προλαβαίνουν εγκαίρως.
Στις ρυθμίσεις του δημιουργού και όχι σε φάκελο. Οι περισσότεροι κατασκευαστές ιστοτόπων και πλατφόρμες ηλεκτρονικών καταστημάτων έχουν ένα εικονίδιο ιστότοπου ή μια ρύθμιση favicon όπου ανεβάζετε ένα τετράγωνο PNG. Επιλέξτε το icon-512.png, το μεγαλύτερο αρχείο στο zip, ώστε το πρόγραμμα δημιουργίας να έχει πολλά να εργαστεί όταν κάνει μικρότερα μεγέθη. Εάν η ρύθμιση ζητά ένα συγκεκριμένο μέγεθος, χρησιμοποιήστε το αρχείο που ταιριάζει. Τα εργαλεία κατασκευής ιστοσελίδων προσθέτουν το HTML για εσάς, ώστε να μπορείτε να παραλείψετε το README.
Η Google παίρνει ένα νέο favicon όταν ο ανιχνευτής της, το πρόγραμμα που διαβάζει ιστοσελίδες για την Google, επισκεφθεί την αρχική σελίδα σας. Δεν υπάρχει σταθερό χρονοδιάγραμμα για αυτό. Η Google θέλει μια τετράγωνη εικόνα και το σύνδεσμο εικονιδίου στο HTML της αρχικής σας σελίδας, επομένως βεβαιωθείτε ότι και τα δύο είναι στη θέση τους. Μετά από αυτό, το τι δείχνει και πότε εξαρτάται από την Google, οπότε δώστε της χρόνο.
Δεν έχετε ακόμη λογότυπο; Δημιουργήστε ένα
Σχεδιάστε ένα με τη γεννήτρια λογότυπων τεχνητής νοημοσύνης ή ένα πρότυπο στον κατασκευαστή λογότυπων. Κάθε λογότυπο που κατεβάζετε από το DepthLogo έρχεται ήδη με τα favicon του.