CodeKitHubΤι είναι αυτό το εργαλείο;
Ένα favicon.ico δεν είναι απλώς μια μικρή εικόνα — είναι μια μορφή container που μπορεί να περιέχει πολλαπλά μεγέθη του ίδιου εικονιδίου σε ένα αρχείο, ώστε ο browser, η γραμμή εργασιών ή η γραμμή σελιδοδεικτών να επιλέγει όποια ανάλυση φαίνεται πιο καθαρή στο σημείο που την εμφανίζει. Η μετονομασία ενός PNG σε favicon.ico δεν παράγει αυτό: είναι απλώς μία εικόνα με λάθος επέκταση αρχείου, και ενώ κάποιοι browsers το ανέχονται, πολλά εργαλεία, crawlers και παλαιότεροι browsers που διαβάζουν τα ακατέργαστα bytes περιμένουν την πραγματική δομή ICO container και θα αποτύχουν ή θα επιστρέψουν σε κενό εικονίδιο.
Αυτό το εργαλείο δημιουργεί έναν πραγματικό ICO container: αποδίδει το SVG σας σε 16×16, 32×32 και 48×48, κωδικοποιεί το καθένα εσωτερικά ως PNG, και τα συσκευάζει και τα τρία σε ένα έγκυρο favicon.ico χρησιμοποιώντας την ίδια μορφή PNG-in-ICO που υποστηρίζει κάθε browser και λειτουργικό σύστημα από τα Windows Vista και μετά. Παράλληλα, παίρνετε ξεχωριστά αρχεία PNG στα 180×180 (το μέγεθος που χρησιμοποιεί το iOS όταν κάποιος προσθέτει τον ιστότοπό σας στην αρχική οθόνη) και 192×192 / 512×512 (τα μεγέθη που αντλούν το Android και οι προτροπές εγκατάστασης PWA από το web app manifest σας).
Γιατί να το χρησιμοποιήσετε;
- Παράγει ένα πραγματικά έγκυρο multi-resolution favicon.ico, όχι ένα μετονομασμένο PNG.
- Καλύπτει κάθε μέγεθος εικονιδίου που χρειάζεται μια πραγματική ανάπτυξη σε ένα πέρασμα: 16, 32, 180, 192, 512px.
- Έτοιμη προς επικόλληση HTML για το <head> — χωρίς μαντεψιές για τα attributes rel/sizes/type.
- Τα μη τετράγωνα SVG κεντράρονται σε διαφανές τετράγωνο αντί να παραμορφώνονται.
- Όλα αποδίδονται τοπικά στον browser σας· το SVG δεν ανεβαίνει ποτέ.
Πώς χρησιμοποιείται
- Κάντε κλικ στο πλαίσιο ή σύρετε το αρχείο SVG λογοτύπου σας πάνω του.
- Το εργαλείο το αποδίδει αυτόματα σε κάθε μέγεθος favicon — χωρίς ρυθμίσεις.
- Κατεβάστε το favicon.ico για τη ρίζα του ιστότοπού σας, μαζί με τα επιμέρους εικονίδια PNG.
- Αντιγράψτε το απόσπασμα HTML και επικολλήστε το στο <head> της σελίδας σας.
Παράδειγμα
Είσοδος
logo.svg — ένα εταιρικό σήμα, διάνυσμα 3 KBΈξοδος
favicon.ico (16/32/48px συνδυασμένα), συν favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngΈνα SVG μπαίνει, κάθε αρχείο εικονιδίου που χρειάζεται μια πραγματική ανάπτυξη βγαίνει.
Ποιο μέγεθος εικονιδίου χρησιμοποιείται πού
| Αρχείο | Μέγεθος | Χρησιμοποιείται για |
|---|---|---|
| favicon.ico | 16/32/48px (συνδυασμένα) | Καρτέλα browser, γραμμή σελιδοδεικτών, γραμμή εργασιών |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Εναλλακτική λύση για browsers που προτιμούν PNG favicons |
| apple-touch-icon.png | 180×180 | Εικονίδιο αρχικής οθόνης iOS όταν ο ιστότοπος προστίθεται στην Αρχική Οθόνη |
| icon-192.png | 192×192 | Εικονίδιο αρχικής οθόνης Android, web app manifest |
| icon-512.png | 512×512 | Προτροπή εγκατάστασης PWA, εικονίδιο splash screen Android |
Γιατί έχει σημασία η πηγή SVG
Επειδή το SVG αποθηκεύει σχήματα ως μαθηματικά αντί για pixel, η απόδοσή του από την αρχή στα 16px και στα 512px ξεκινά και στις δύο περιπτώσεις από τα ίδια ακριβώς δεδομένα διαδρομής — δεν υπάρχει artifact μεγέθυνσης στη μεγάλη πλευρά ούτε αναγκαστικές συμβιβαστικές μαντεψιές pixel-snapping στη μικρή. Αν έχετε μόνο ένα λογότυπο PNG, αυτό το ίδιο εργαλείο δεν μπορεί να βοηθήσει· μετατρέψτε ή αναδημιουργήστε πρώτα το λογότυπο ως SVG, καθώς η μεγέθυνση ενός μικρού PNG στα 512px θα παρήγαγε απλώς θολό αποτέλεσμα.
Συχνές ερωτήσεις
Γιατί να μη μετονομάσω απλώς ένα PNG σε favicon.ico;
Ένα αρχείο .ico έχει τη δική του δυαδική μορφή container (μια κεφαλίδα ICONDIR που περιγράφει πόσες εικόνες περιέχει, ακολουθούμενη από μια καταχώρηση καταλόγου ανά εικόνα) — ένα αρχείο PNG μετονομασμένο σε .ico παραμένει απλώς ένα PNG με λάθος επέκταση. Οι περισσότεροι σύγχρονοι browsers είναι ανεκτικοί και το εμφανίζουν ούτως ή άλλως, αλλά αυτό το εργαλείο δημιουργεί έναν πραγματικό ICO container με τρεις πραγματικές αναλύσεις, ακριβώς αυτό για το οποίο σχεδιάστηκε η μορφή και αυτό που περιμένουν οι πιο αυστηροί readers.
Γιατί χρειάζομαι εικονίδια PNG αν έχω ήδη favicon.ico;
Το favicon.ico καλύπτει μόνο την κλασική χρήση καρτέλας browser/σελιδοδείκτη. Το PNG 180×180 είναι αυτό που χρησιμοποιεί το iOS όταν ένας χρήστης προσθέτει τον ιστότοπό σας στην αρχική οθόνη (apple-touch-icon), και τα PNG 192×192 / 512×512 είναι αυτά που αντλούν οι προτροπές εγκατάστασης Android και PWA από το web app manifest σας. Χωρίς αυτά, το εικονίδιό σας στην αρχική οθόνη ενός κινητού επιστρέφει σε γενικό στιγμιότυπο οθόνης ή κενό τετράγωνο.
Το λογότυπό μου δεν είναι τετράγωνο — τι θα του συμβεί;
Κεντράρεται σε διαφανές τετράγωνο σε κάθε μέγεθος-στόχο αντί να παραμορφώνεται, ώστε ένα πλατύ ή ψηλό λογότυπο να διατηρεί τις σωστές αναλογίες του αντί να συμπιέζεται σε τετράγωνο.
Πού βάζω τα κατεβασμένα αρχεία;
Τοποθετήστε τα favicon.ico, apple-touch-icon.png, icon-192.png και icon-512.png στον ριζικό φάκελο του ιστότοπού σας (δίπλα στο index.html), και μετά επικολλήστε τις παραγόμενες ετικέτες <link> στο <head> της σελίδας σας.
Ανεβαίνει κάπου το SVG μου;
Όχι. Το SVG αποδίδεται σε τοπικά στοιχεία <canvas> και τα αρχεία ICO/PNG συναρμολογούνται στον browser σας. Τίποτα δεν αποστέλλεται σε server.