Γεννήτρια favicon
Τα προγράμματα περιήγησης αναμένουν πολλαπλά μεγέθη εικονιδίων: κλασικά 16×16 favicon.ico, 32×32 tab εικονίδια, 180×180 apple-touch-icon και 192×192 PWA εικονίδια. Ανεβάστε ένα τετράγωνο λογότυπο και κατεβάστε ένα πλήρες σετ — δημιουργείται τοπικά χωρίς να αποστέλλονται τα στοιχεία της επωνυμίας σας σε server.
Πώς να δημιουργήσετε favicons
1. Μεταφορτώστε ένα τετράγωνο PNG ή JPG (συνιστάται 512×512 ή μεγαλύτερο).
2. Πραγματοποιήστε προεπισκόπηση των δημιουργημένων μεγεθών.
3. Κατεβάστε το πακέτο εικονιδίων ή μεμονωμένα αρχεία.
4. Προσθέστε ετικέτες συνδέσμων στην κεφαλίδα HTML και τοποθετήστε αρχεία ρίζας στο /public.
Παραδείγματα ρύθμισης Favicon
Νέος στατικός ιστότοπος
Δημιουργήστε favicon.ico plus 32×32 PNG και προσθέστε τυπικές ετικέτες συνδέσμου rel="icon" στο layout.html.
Μανιφέστο PWA
Εξαγωγή 192×192 και 512×512 PNG για τον πίνακα εικονιδίων manifest.json.
Αλλαγή brand / rebrand
Αντικαταστήστε ένα κύριο λογότυπο και δημιουργήστε ξανά όλα τα μεγέθη, ώστε οι καρτέλες και οι συντομεύσεις της αρχικής οθόνης να ταιριάζουν.
Πότε να χρησιμοποιήσετε αυτό το εργαλείο
• Όταν ξεκινάτε έναν ιστότοπο και χρειάζεστε όλα τα τυπικά μεγέθη εικονιδίων ταυτόχρονα.
• Όταν διαθέτετε ένα λογότυπο ράστερ αλλά όχι ένα αρχείο .ico πολλαπλών μεγεθών.
• Όταν θέλετε τοπική παραγωγή χωρίς μεταφόρτωση στοιχείων επωνυμίας.
Πότε να επιλέξετε κάτι άλλο
• Όταν το λογότυπό σας είναι λεπτομερές — απλοποίηση σε γράμμα6×161 για γράμματα.
• Όταν τα favicons SVG επαρκούν για μοντέρνα είδη κοινού.
• Όταν τα καταστήματα πλατφόρμας απαιτούν αυστηρά καθορισμένες πηγές PSD με επίπεδα.
Λίστα ελέγχου ετικετών συνδέσμων HTML
Συμπερίληψη rel="icon" για μεγέθη PNG, rel="apple-touch-icon" για iOS και προαιρετικά manifest.json για PWA. Τοποθετήστε τα αρχεία σε προβλέψιμες διαδρομές (το/favicon.ico εξακολουθεί να βοηθά τους παλιούς ανιχνευτές).
Σχεδίαση για 16×16
Οι λεπτές λεπτομέρειες εξαφανίζονται στο μέγεθος favicon. Χρησιμοποιήστε έντονα σχήματα, υψηλή αντίθεση και αποφύγετε τις λεπτές πινελιές. Πολλές επωνυμίες χρησιμοποιούν παραλλαγές μονογραμμάτων για μικροσκοπικά μεγέθη.
Καταστροφή της προσωρινής μνήμης στο rebrand
Τα προγράμματα περιήγησης αποθηκεύουν επιθετικά τα favicon στην κρυφή μνήμη. Μετονομάστε αρχεία ή προσθέστε ερώτημα ?v=2 κατά την ενημέρωση των εικονιδίων, ώστε οι χρήστες να βλέπουν το νέο σήμα.
Συχνές ερωτήσεις
Τι μέγεθος πρέπει να είναι η εικόνα πηγής;
Τουλάχιστον 512×512 px τετραγωνικά. Τα μεγαλύτερα masters μειώνουν την κλίμακα καλύτερα από την αναβάθμιση μικρών λογότυπων.
ICO έναντι PNG favicon;
Τα σύγχρονα προγράμματα περιήγησης δέχονται PNG. Το .ico ομαδοποιεί πολλά μεγέθη για παλαιού τύπου καρτέλες των Windows.
μέγεθος εικονιδίου apple-touch;
180×180 px για συντομεύσεις αρχικής οθόνης iOS — χρησιμοποιήστε PNG χωρίς διαφάνεια για καλύτερα αποτελέσματα.
Διαφανές φόντο;
Λειτουργεί για καρτέλες PNG. Τα εικονίδια σπιτιού iOS ενδέχεται να αποκτήσουν λευκό ματ — δοκιμή στη συσκευή.
Τα λογότυπα ανεβαίνουν σε server;
Όχι — η αλλαγή μεγέθους χρησιμοποιεί τον καμβά τοπικά.
Πηγή SVG;
Μετατρέψτε το SVG σε PNG πρώτα σε υψηλή ανάλυση και μετά δημιουργήστε favicons.