Δημιουργία favicon
Σύντομη απάντηση
Δημιούργησε favicon.ico, εικονίδιο Apple touch και εικονίδια εφαρμογής web, καθώς και τις ετικέτες HTML, από μία εικόνα.
Το iOS εμφανίζει τα διαφανή τμήματα του εικονιδίου Apple touch ως μαύρα, οπότε αυτά τα δύο εικονίδια αποκτούν συμπαγές φόντο. Τα υπόλοιπα εικονίδια διατηρούν τη διαφάνεια.
Τι Κάνει
Δημιουργεί ένα σετ favicon από μία εικόνα: favicon.ico με εικονίδια 16, 32 και 48 px, ένα εικονίδιο Apple touch 180 px, εικονίδια 192 και 512 px για το manifest εφαρμογής web, ένα maskable εικονίδιο 512 px, και τις ετικέτες HTML που θα προσθέσετε στις σελίδες σας. Ένα SVG που ανεβάσατε συμπεριλαμβάνεται και ως icon.svg.
Γιατί Έχει Σημασία
Τα προγράμματα περιήγησης εμφανίζουν το favicon σε καρτέλες και σελιδοδείκτες, τα κινητά χρησιμοποιούν το touch icon στην αρχική οθόνη, και το Google Search μπορεί να εμφανίσει το favicon δίπλα στις σελίδες σας στα αποτελέσματα. Η Google το εμφανίζει μόνο όταν το εικονίδιο είναι τετράγωνο, τουλάχιστον 8×8 px (συνιστάται μεγαλύτερο από 48×48 px) και μπορεί να γίνει crawl μαζί με την αρχική σελίδα.
Πώς Λειτουργεί
-
Επιλέξτε μια τετράγωνη εικόνα, ιδανικά ένα SVG ή ένα PNG τουλάχιστον 512×512 px
-
Επιλέξτε ένα χρώμα φόντου για το εικονίδιο Apple touch και το maskable εικονίδιο
-
Το πρόγραμμα περιήγησής σας σχεδιάζει κάθε μέγεθος και συσκευάζει τα μικρότερα στο favicon.ico
-
Κατεβάστε τα αρχεία, αντιγράψτε τις ετικέτες HTML και δοκιμάστε το αποτέλεσμα με τον έλεγχο favicon
Δείγμα εισόδου + εξόδου
εικόνα: logo.svg φόντο: #ffffff
favicon.ico 16, 32, 48 px apple-touch-icon.png 180 px icon-192.png 192 px icon-512.png 512 px icon-512-maskable.png 512 px icon.svg αρχικό SVG manifest.webmanifest εικονίδια manifest <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest">
Ποιοι το Χρησιμοποιούν
-
Ιδιοκτήτης μικρής επιχείρησης
Μετατρέψτε ένα λογότυπο σε όλα τα αρχεία εικονιδίων που χρειάζεται ένας νέος ιστότοπος.
-
Web developer
Δημιουργήστε το σετ εικονιδίων και τα εικονίδια manifest για μια progressive web app.
-
Σχεδιαστής
Δείτε πώς φαίνεται ένα λογότυπο στα 16 px πριν το παραδώσετε.
Συχνές Ερωτήσεις
Ποια αρχεία χρειάζομαι;
Οι περισσότεροι ιστότοποι χρησιμοποιούν favicon.ico, ένα εικονίδιο Apple touch, και εικονίδια 192 και 512 px για το manifest εφαρμογής web. Ένα εικονίδιο SVG είναι προαιρετικό· τα προγράμματα περιήγησης που το υποστηρίζουν μπορούν να το χρησιμοποιήσουν σε οποιοδήποτε μέγεθος.
Γιατί το αρχείο ICO περιέχει εικόνες PNG;
Η μορφή ICO μπορεί να αποθηκεύσει εικόνες PNG, και κάθε σύγχρονο πρόγραμμα περιήγησης τις διαβάζει. Το αρχείο περιέχει εκδόσεις 16, 32 και 48 px, ώστε κάθε πρόγραμμα περιήγησης να επιλέγει το μέγεθος που χρειάζεται.
Τι είναι ένα maskable εικονίδιο;
Ένα εικονίδιο με επιπλέον χώρο γύρω από το λογότυπο, ώστε το Android να μπορεί να το περικόψει σε κύκλο ή άλλο σχήμα. Το εργαλείο διατηρεί ολόκληρη την εικόνα μέσα στη ζώνη ασφαλείας, οπότε τίποτα δεν αποκόπτεται.
Γιατί το εικονίδιο Apple touch και το maskable εικονίδιο αποκτούν χρώμα φόντου;
Το iOS εμφανίζει τα διαφανή τμήματα του touch icon ως μαύρα, και ένα maskable εικονίδιο πρέπει να γεμίζει ολόκληρο το σχήμα του, οπότε και τα δύο αποκτούν το χρώμα που επιλέγετε. Τα υπόλοιπα εικονίδια διατηρούν τη διαφάνεια.
Η εικόνα μου μεταφορτώνεται;
Όχι. Τα εικονίδια σχεδιάζονται στο πρόγραμμα περιήγησής σας, και η εικόνα δεν φεύγει ποτέ από τη συσκευή σας.