Γεννήτρια favicon
Τα προγράμματα περιήγησης αναμένουν πολλαπλά μεγέθη εικονιδίων: κλασικά 16×16 favicon.ico, 32×32 tab εικονίδια, 180×180 apple-touch-icon και 192×192 PWA εικονίδια.
Πώς να δημιουργήσετε 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 πολλαπλών μεγεθών.
• Όταν θέλετε τοπική παραγωγή χωρίς μεταφόρτωση στοιχείων επωνυμίας.
Λίστα ελέγχου ετικετών συνδέσμων HTML
Συμπερίληψη rel="icon" για μεγέθη PNG, rel="apple-touch-icon" για iOS και προαιρετικά manifest.json για PWA. Τοποθετήστε τα αρχεία σε προβλέψιμες διαδρομές (το/favicon.ico εξακολουθεί να βοηθά τους παλιούς ανιχνευτές).
Συχνές ερωτήσεις
Τι μέγεθος πρέπει να είναι η εικόνα πηγής;
Τουλάχιστον 512×512 px τετραγωνικά. Τα μεγαλύτερα masters μειώνουν την κλίμακα καλύτερα από την αναβάθμιση μικρών λογότυπων.
ICO έναντι PNG favicon;
Τα σύγχρονα προγράμματα περιήγησης δέχονται PNG. Το .ico ομαδοποιεί πολλά μεγέθη για παλαιού τύπου καρτέλες των Windows.
μέγεθος εικονιδίου apple-touch;
180×180 px για συντομεύσεις αρχικής οθόνης iOS — χρησιμοποιήστε PNG χωρίς διαφάνεια για καλύτερα αποτελέσματα.
Διαφανές φόντο;
Λειτουργεί για καρτέλες PNG. Τα εικονίδια σπιτιού iOS ενδέχεται να αποκτήσουν λευκό ματ — δοκιμή στη συσκευή.
Πηγή SVG;
Μετατρέψτε το SVG σε PNG πρώτα σε υψηλή ανάλυση και μετά δημιουργήστε favicons.