Ένα σωστό σετ favicon είναι κάτι παραπάνω από ένα αρχείο: οι browser θέλουν ένα .ico πολλών μεγεθών, το iOS θέλει apple-touch-icon 180px, το Android θέλει PNG 192 και 512px συν ένα web manifest. Αυτό το εργαλείο τα αποδίδει όλα από μία εικόνα και τα πακετάρει σε ένα ZIP, μαζί με τις ακριβείς ετικέτες HTML για να επικολλήσετε στο <head> σας.
Η προεπισκόπηση δείχνει το εικονίδιό σας σε πραγματικά 16, 32 και 48px, ώστε να ελέγξετε ότι μένει αναγνωρίσιμο στα μικροσκοπικά μεγέθη πριν το δημοσιεύσετε.
Οδηγίες χρήσης
- Προσθέστε το λογότυπό σαςΟι τετράγωνες εικόνες λειτουργούν καλύτερα· οι υπόλοιπες περικόπτονται κεντρικά.
- Ελέγξτε τα μικρά μεγέθηΗ προεπισκόπηση 16px είναι αυτό που θα βλέπουν πραγματικά οι περισσότεροι χρήστες σε μια καρτέλα.
- Κατεβάστε το ZIPfavicon.ico, έξι PNG, site.webmanifest και ένα html-snippet.txt έτοιμο για επικόλληση.
Μία εικόνα μέσα, πλήρες σετ favicon έξω
Αποθέστε ένα μόνο λογότυπο ή εικονίδιο και αυτός ο δημιουργός φτιάχνει το πλήρες σετ που χρειάζεται ένας σύγχρονος ιστότοπος: ένα favicon.ico πολλαπλών μεγεθών που συγκεντρώνει εκδόσεις 16, 32 και 48 pixel, αυτόνομα PNG σε 16, 32, 48, 180 για το εικονίδιο αφής της Apple, καθώς και 192 και 512 για Android και εγκαταστάσεις PWA, συν ένα site.webmanifest. Όλα κατεβαίνουν ως ένα ZIP, ώστε να τα ρίξετε απευθείας στη ρίζα του project σας.
Λαμβάνετε επίσης ένα έτοιμο για επικόλληση απόσπασμα HTML head με τις σωστές ετικέτες link και meta ήδη συνδεδεμένες. Αντιγράψτε το στο πρότυπό σας, ανεβάστε τα αρχεία, και το favicon εμφανίζεται σε καρτέλες περιηγητή, σελιδοδείκτες και συντομεύσεις αρχικής οθόνης χωρίς να γράψετε ούτε γραμμή σήμανσης με το χέρι.
Ευκρινή εικονίδια σε κάθε μέγεθος
Τα favicon είναι αμείλικτα μικρά, γι' αυτό ο δημιουργός αποδίδει προεπισκοπήσεις σε πραγματικό μέγεθος στα 16, 32 και 48 pixel, ακριβώς όπως θα τα δείξει μια καρτέλα περιηγητή. Έτσι πιάνετε ένα λογότυπο που γίνεται «χυλός» στα 16px πριν το δημοσιεύσετε. Αν η αρχική εικόνα σας δεν είναι τετράγωνη, το εργαλείο κάνει κεντρική περικοπή ώστε το εικονίδιο να μένει ισορροπημένο και όχι συμπιεσμένο.
Όλη η διαδικασία εκτελείται στον περιηγητή από την αρχική σας εικόνα, που σημαίνει ότι μπορείτε να δημιουργήσετε PNG favicon και ICO από ένα λογότυπο υψηλής ανάλυσης χωρίς μεταφόρτωση ή λογαριασμό.
Πού το χρησιμοποιεί ο κόσμος
Λανσάρισμα νέου ιστότοπου — Δημιουργήστε το favicon.ico και κάθε μέγεθος PNG με ένα πέρασμα, ώστε καρτέλες και σελιδοδείκτες να δείχνουν ολοκληρωμένοι από την πρώτη μέρα.
Προσθήκη εικονιδίου εγκατάστασης PWA — Εξαγάγετε τα PNG 192 και 512 συν ένα site.webmanifest, ώστε η εφαρμογή σας να εγκαθίσταται με σωστό εικονίδιο αρχικής οθόνης.
Εικονίδιο αφής Apple — Παράγετε το apple-touch-icon 180x180, ώστε οι σελιδοδείκτες και οι αρχικές οθόνες του iOS να δείχνουν ένα ευκρινές πλακίδιο.
Αλλαγή επωνυμίας υπάρχοντος ιστότοπου — Περάστε ένα νέο λογότυπο από τον δημιουργό και αντικαταστήστε ολόκληρο το σετ εικονιδίων με τη μία.
Παράδοση σε πελάτη — Παραδώστε ένα μόνο ZIP με ico, PNG, manifest και το απόσπασμα head, ώστε ο προγραμματιστής απλώς να το τοποθετήσει.
Έλεγχος αναγνωσιμότητας σε μικρό μέγεθος — Χρησιμοποιήστε την προεπισκόπηση πραγματικού μεγέθους 16px για να επιβεβαιώσετε ότι ένα λεπτομερές λογότυπο διαβάζεται ακόμη ως εικονίδιο.
Μη τετράγωνο λογότυπο — Δώστε ένα φαρδύ λεκτικό σήμα και αφήστε την κεντρική περικοπή να το κάνει ισορροπημένο τετράγωνο favicon.
Στατικός ιστότοπος ή project με framework — Αντιγράψτε τις παραγόμενες ετικέτες head στο πρότυπό σας σε Next, Astro ή απλή HTML και δημοσιεύστε.
Γιατί IMG.DIY
Πλήρες σετ
ICO + PNG 16/32/48/180/192/512 + manifest.
HTML για αντιγραφή-επικόλληση
Οι ακριβείς ετικέτες link συμπεριλαμβάνονται ως αρχείο κειμένου.
Προεπισκόπηση σε πραγματικό μέγεθος
Δείτε πρώτα το εικονίδιο σε πραγματικά 16/32/48px.
Ιδιωτικό
Το λογότυπό σας δεν φεύγει ποτέ από το πρόγραμμα περιήγησης.