Γεννήτρια favicon — ICO, PNG και Apple Touch Icon
Μετατρέψτε μία εικόνα σε πλήρες σετ favicon: favicon.ico, εικονίδια PNG, apple-touch-icon και manifest εφαρμογής web.
Το apple-touch-icon είναι πάντα αδιαφανές. Όταν το όνομα εφαρμογής είναι κενό, το manifest χρησιμοποιεί το όνομα αρχείου της εικόνας.
Προεπισκόπηση
Αρχεία στο ZIP
Πώς να φτιάξετε ένα favicon
- Διαλέξτε μια τετράγωνη εικόνα, ιδανικά τουλάχιστον 512 επί 512 pixel, σε μορφή PNG, JPG, WebP ή SVG.
- Διαλέξτε πώς θα χωρέσουν οι μη τετράγωνες εικόνες: το contain τις γεμίζει με το χρώμα φόντου, το cover τις κόβει από το κέντρο.
- Ορίστε τα χρώματα φόντου και θέματος, το περιθώριο και αν τα μικρά εικονίδια θα κρατήσουν διαφανές φόντο.
- Γράψτε το όνομα και το σύντομο όνομα της εφαρμογής που θα φέρει το manifest και ελέγξτε τις ζωντανές προεπισκοπήσεις.
- Κατεβάστε το ZIP με όλα τα αρχεία ή πάρτε ξεχωριστά το favicon.ico και το apple-touch-icon.png και αντιγράψτε το απόσπασμα HTML.
Πότε βοηθάει
- Να δώσετε σε μια νέα ιστοσελίδα favicon χωρίς να ανοίξετε πρόγραμμα επεξεργασίας εικόνων.
- Να αντικαταστήσετε ένα favicon που λείπει ή είναι θολό και εμφανίζεται ως κενό εικονίδιο σελίδας στις καρτέλες.
- Να προσθέσετε apple-touch-icon ώστε μια ιστοσελίδα να φαίνεται σωστά όταν αποθηκευτεί στην αρχική οθόνη iPhone.
- Να ετοιμάσετε εικονίδια Android και manifest για προοδευτική εφαρμογή web.
- Να μετατρέψετε ένα λογότυπο σε τακτοποιημένο σετ εικονιδίων με ομοιόμορφο περιθώριο σε κάθε μέγεθος.
Συχνές ερωτήσεις
Ποια μεγέθη παράγει η γεννήτρια;
Γράφει το favicon.ico με εικόνες 16, 32 και 48 pixel μέσα, ξεχωριστά αρχεία favicon-16x16.png και favicon-32x32.png, ένα apple-touch-icon.png στα 180 επί 180 και εικονίδια Android στα 192 και 512 pixel.
Γιατί το apple-touch-icon είναι πάντα αδιαφανές;
Το iOS δεν δείχνει διαφάνεια σε εικονίδιο αρχικής οθόνης, οπότε ένα διαφανές PNG θα έβγαινε με μαύρο ή λευκό μπλοκ από πίσω. Η γεννήτρια γεμίζει αυτό το αρχείο με το χρώμα φόντου σας και αφήνει τα μικρά μεγέθη favicon διαφανή αν θέλετε.
Τι να βάλω στο manifest;
Χρησιμοποιήστε το πλήρες όνομα της ιστοσελίδας ή εφαρμογής και ένα σύντομο όνομα περίπου δώδεκα χαρακτήρων, γιατί το σύντομο όνομα εμφανίζεται κάτω από το εικονίδιο στο κινητό. Το χρώμα θέματος χρωματίζει τη γραμμή του προγράμματος περιήγησης και το χρώμα φόντου γεμίζει την οθόνη εκκίνησης.
Μπορώ να χρησιμοποιήσω λογότυπο SVG;
Ναι. Το SVG μετατρέπεται σε raster στα 512 pixel πλάτος και η αναλογία του προέρχεται από τα χαρακτηριστικά πλάτους και ύψους ή από το viewBox, οπότε ένα τετράγωνο λογότυπο μένει τετράγωνο.
Πού πάνε τα αρχεία στον διακομιστή μου;
Βάλτε τα στη ρίζα της ιστοσελίδας δίπλα στο index.html, ώστε οι διαδρομές στο απόσπασμα όπως /favicon.ico και /site.webmanifest να δουλεύουν. Αν τα κρατάτε σε υποφάκελο, αλλάξτε τις τιμές href στο απόσπασμα ανάλογα.
Μεταφορτώνεται η εικόνα μου κάπου;
Όχι. Η εικόνα αποκωδικοποιείται και σχεδιάζεται σε ένα canvas μέσα στο πρόγραμμα περιήγησής σας και το ZIP συναρμολογείται στη μνήμη, οπότε τίποτα δεν αποστέλλεται σε διακομιστή.