Δημιουργός Favicon
Ανεβάστε μια εικόνα και πάρτε ένα πλήρες σύνολο favicon — έξι μεγέθη PNG, καθένα με προεπισκόπηση και ξεχωριστή λήψη — συν το ακριβές HTML για να το επικολλήσετε στο <head> του ιστότοπού σας. Τίποτα από όσα ανεβάζετε δεν φεύγει ποτέ από τον περιηγητή σας.
Το σύνολο favicon σας
Επικολλήστε αυτό στο <head>
Αποθηκεύστε κάθε αρχείο που κατεβάσατε στον ριζικό φάκελο του ιστότοπού σας με το ακριβές του όνομα, και μετά προσθέστε αυτές τις ετικέτες:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="manifest" href="/site.webmanifest">
Το αρχείο 512×512 δεν συνδέεται με ετικέτα <link> — ανήκει
στον πίνακα icons του αρχείου site.webmanifest, στο οποίο παραπέμπει η γραμμή rel="manifest" παραπάνω, για τα εικονίδια
εγκατάστασης PWA και τις οθόνες εκκίνησης.
Μία εικόνα, ένα πλήρες σύνολο favicon
Οι σύγχρονοι ιστότοποι χρειάζονται περισσότερα μεγέθη favicon
από όσα κάλυπτε το παλιό ενιαίο αρχείο .ico των
16×16: ένα ευκρινές εικονίδιο για τις καρτέλες του περιηγητή,
ένα μεγαλύτερο για συντομεύσεις Windows, ένα εικονίδιο Apple
touch για την αρχική οθόνη iOS, και εικονίδια Android/PWA για
εγκαταστάσεις εφαρμογών. Αυτό το εργαλείο σχεδιάζει την εικόνα
που ανεβάσατε σε καμβά σε κάθε ένα από αυτά τα ακριβή μεγέθη
και σας αφήνει να κατεβάσετε κάθε αποτέλεσμα ως δικό του PNG —
χωρίς μετάβαση σε server, και χωρίς παλιό δυαδικό format να το
χαλάσετε.
Πρακτικό παράδειγμα
Ανεβάστε ένα τετράγωνο λογότυπο 512×512. Το
εργαλείο το αποδίδει αμέσως σε 16×16, 32×32, 48×48, 180×180, 192×192, και ξανά σε 512×512 — έξι επισημασμένες προεπισκοπήσεις,
καθεμία με το δικό της κουμπί λήψης και το σωστό όνομα αρχείου
ήδη συμπληρωμένο. Αποθηκεύστε τα έξι αρχεία δίπλα στο index.html σας, επικολλήστε το απόσπασμα έξι
γραμμών στο <head> σας, και κάθε πλατφόρμα —
καρτέλες περιηγητή, αρχική οθόνη iOS, εγκαταστάσεις Android/PWA
— παίρνει αυτόματα το σωστό μέγεθος.
Συχνές ερωτήσεις
Αυτό δημιουργεί αρχείο .ico;
Όχι — δημιουργεί ξεχωριστά αρχεία PNG σε κάθε τυπικό μέγεθος (από 16×16 έως 512×512), όχι έναν παλαιού τύπου περιέκτη .ico πολλαπλών αναλύσεων. Είναι συνειδητή, ειλικρινής επιλογή: κάθε σύγχρονος περιηγητής δέχεται favicon PNG απευθείας, οπότε ένα σωστό σύνολο PNG στο κατάλληλο μέγεθος είναι η τρέχουσα καλή πρακτική, όχι συμβιβασμός. Η δημιουργία ενός σωστού byte-προς-byte αρχείου .ico είναι δικό της δυαδικό format, και προτιμάμε να σας δώσουμε αρχεία που σίγουρα λειτουργούν αντί να προσποιηθούμε ένα format που δεν μπορούμε να επαληθεύσουμε.
Τα favicon PNG λειτουργούν σε όλους τους περιηγητές;
Ναι, σε κάθε περιηγητή που κυκλοφόρησε τα τελευταία χρόνια. Η απαίτηση για .ico είναι κατάλοιπο πολύ παλιών εκδόσεων του Internet Explorer· κάθε σύγχρονος περιηγητής (Chrome, Firefox, Safari, Edge) διαβάζει κανονικά εικονίδια PNG μέσω μιας απλής ετικέτας <link rel="icon"> — γι' αυτό ιστότοποι όπως το GitHub ή η Google δημοσιεύουν σήμερα σύνολα PNG αντί για .ico.
Η εικόνα μου δεν είναι τετράγωνη — θα παραμορφωθούν τα εικονίδια;
Ναι. Κάθε μέγεθος δημιουργείται σχεδιάζοντας την εικόνα σας απευθείας πάνω σε έναν τετράγωνο καμβά με αυτό το ακριβές μέγεθος, οπότε μια μη τετράγωνη πηγή τεντώνεται για να χωρέσει. Για το καλύτερο αποτέλεσμα, περικόψτε πρώτα την εικόνα σας σε τετράγωνο — το εργαλείο μας Περικοπή Εικόνας το κάνει σε λίγα δευτερόλεπτα — και μετά περάστε την από αυτόν τον δημιουργό.
Ανεβαίνει η εικόνα μου κάπου σε server;
Όχι. Το αρχείο δεν φεύγει ποτέ από τη συσκευή σας — αποκωδικοποιείται και ξανασχεδιάζεται σε κάθε μέγεθος με το ίδιο το Canvas API του περιηγητή, και κάθε λήψη δημιουργείται τοπικά. Τίποτα δεν αποστέλλεται, αποθηκεύεται ή καταγράφεται σε server.