Οδηγός για SVG favicon

Χρησιμοποιήστε τετράγωνο viewBox, όπως 0 0 64 64, και αφήστε περιθώριο γύρω από το σύμβολο. Το viewBox ορίζει το σύστημα συντεταγμένων χωρίς να επιβάλλει φυσικό μέγεθος απόδοσης.

Περιορίστε το σχέδιο στα χαρακτηριστικά σχήματά του. Λεπτές λεπτομέρειες, μικρά εσωτερικά κενά και ολόκληρες λέξεις συχνά εξαφανίζονται στα 16 pixel, παρότι το διανυσματικό αρχείο παραμένει τεχνικά ευκρινές.

Ενσωματώστε τα απαραίτητα στυλ μέσα στο SVG. Μετατρέψτε το κείμενο σε διαδρομές όταν το σύμβολο εξαρτάται από γραμματοσειρά, επειδή μια εξωτερική διαδικτυακή γραμματοσειρά δεν είναι αξιόπιστη εξάρτηση σε αυτή τη χρήση.

Αφαιρέστε scripts, απομακρυσμένους συνδέσμους και περιττά metadata του προγράμματος επεξεργασίας. Τα απλά σχήματα και στυλ διευκολύνουν επίσης τον έλεγχο ασφαλείας και μειώνουν το μέγεθος.

Τέλος, ανοίξτε το αρχείο μόνο του σε πρόγραμμα περιήγησης και δοκιμάστε το εκτός σύνδεσης. Αν το σχέδιο αλλάξει ή εξαφανιστεί, εξακολουθεί να εξαρτάται από εξωτερικό πόρο που πρέπει να ενσωματωθεί ή να αντικατασταθεί.

Προσθέστε link rel icon με type image/svg+xml και URL από τη ρίζα. Διατηρήστε επίσης favicon.ico στη ρίζα για πελάτες που δεν επιλέγουν SVG ή ζητούν απευθείας ICO.

Το SVG δεν αντικαθιστά το εικονίδιο Apple Touch ή τα εικονίδια manifest. Εξαγάγετε αδιαφανή PNG ή PNG με δυνατότητα μάσκας για αυτές τις επιφάνειες.

Ένας κανόνας prefers-color-scheme μέσα σε στοιχείο style αλλάζει fill ή stroke στη σκοτεινή λειτουργία. Ορίστε πρώτα αξιόπιστο προεπιλεγμένο χρώμα και προσθέστε έπειτα την παραλλαγή ως προοδευτική βελτίωση.

Δοκιμάστε το αρχείο σε πραγματικές καρτέλες και διάφορα επίπεδα μεγέθυνσης. Εξετάστε επίσης την εφεδρεία όταν δεν επιλέγεται SVG: ένα ICO που εξαφανίζεται σε σκοτεινό φόντο παραμένει πρόβλημα για αυτούς τους πελάτες.