Άρθρο

Δημιουργία favicon από PNG

Ένα favicon είναι ένα μικρό γραφικό που οι browsers εμφανίζουν σε καρτέλες, σελιδοδείκτες και λίστες ιστορικού. Η σωστή δημιουργία του περιλαμβάνει περισσότερα από την απλή αλλαγή μεγέθους λογότυπου: η μορφή .ico πακετάρει πολλαπλές αναλύσεις σε ένα αρχείο, οι σύγχρονοι browsers προτιμούν PNG, οι κινητές συσκευές έχουν το δικό τους apple-touch-icon, και τα manifests web app χρειάζονται το δικό τους σύνολο εικονιδίων. Αυτό το άρθρο καλύπτει κάθε μέρος και εξηγεί πώς να παράγετε το πλήρες σύνολο από ένα μόνο PNG πηγής.

Συγγραφή από Bastien Sulyan · Δημοσιεύτηκε στις 29 Ιουνίου 2026

Τι είναι ένα favicon και πού το χρησιμοποιούν οι browsers

Η λέξη favicon είναι σύντμηση του «favorite icon». Οι browsers το εμφάνισαν πρώτα στη γραμμή διευθύνσεων στον Internet Explorer 5 (1999), και στη συνέχεια το υιοθέτησαν για σελιδοδείκτες. Σήμερα εμφανίζεται σε καρτέλες browser, στη γραμμή εργαλείων σελιδοδεικτών, στο ιστορικό περιήγησης, στη σελίδα νέας καρτέλας σε ορισμένους browsers, και στις γραμμές εργασιών λειτουργικών συστημάτων όταν ένας ιστότοπος είναι καρφιτσωμένος. Σε κινητά, αν ο χρήστης προσθέσει έναν ιστότοπο στην αρχική οθόνη, η συσκευή χρησιμοποιεί μια σχετική αλλά διακριτή εικόνα που ονομάζεται apple-touch-icon αντί για το τυπικό favicon. Οι μηχανές αναζήτησης εμφανίζουν μερικές φορές favicons δίπλα στα αποτελέσματα στη διεπαφή τους. Το γραφικό είναι μικρό εκ σχεδιασμού, κάτι που το κάνει αποτελεσματικό για γρήγορη οπτική αναγνώριση αλλά και απαιτητικό να παραχθεί καλά: στα 16x16 pixels, ένα λεπτομερές λογότυπο γίνεται αδιευκρίνιστος θόλωμα. Το ίδιο το αρχείο favicon έχει περάσει από αρκετές μορφές κατά τις δεκαετίες, με το .ico να παραμένει το πιο ευρέως συμβατό και το PNG να είναι η σύγχρονη προεπιλογή για τους περισσότερους browsers.

Ο container .ico: πολλαπλές αναλύσεις σε ένα αρχείο

Η μορφή .ico είναι container, όχι μία εικόνα. Ένα αρχείο .ico μπορεί να περιέχει πολλαπλές εικόνες bitmap σε διαφορετικές αναλύσεις, καθεμία αποθηκευμένη ως ξεχωριστή καταχώρηση σε ένα ευρετήριο στην αρχή του αρχείου. Τα τρία πιο συνηθισμένα μεγέθη είναι 16x16, 32x32 και 48x48 pixels. Όταν τα Windows εμφανίζουν ένα favicon στον Explorer ή στη γραμμή εργασιών, επιλέγουν την καταχώρηση που ταιριάζει καλύτερα στο πλαίσιο εμφάνισης. Παλαιότερες εκδόσεις Windows χρειάζονταν καταχώρηση 48x48 για θέσεις γραμμής εργασιών υψηλής πυκνότητας. Οι browsers ζητούν το favicon σε 16x16 για καρτέλες αλλά μπορούν να χρησιμοποιήσουν μεγαλύτερη καταχώρηση αν εντοπιστεί οθόνη υψηλότερης πυκνότητας. Η συσκευασία και των τριών μεγεθών σε ένα αρχείο .ico σημαίνει ότι μία μόνο HTTP αίτηση καλύπτει κάθε περίπτωση χρήσης. Η διανομή τους ως ξεχωριστά PNGs είναι επίσης έγκυρη αλλά απαιτεί επιπλέον link tags και προσθέτει HTTP αιτήσεις. Οι εσωτερικές εικόνες μέσα σε ένα αρχείο .ico είναι τυπικά δεδομένα BMP ή PNG, οπότε ο container προσθέτει μόνο μικρή επιβάρυνση header ανά καταχώρηση.

Σχεδιασμός για μικρά μεγέθη: απλοποιήστε το σύμβολο

Στα 16x16 pixels έχετε συνολικά 256 pixels. Ένα τυπικό logotype με wordmark ή λεπτές λεπτομέρειες γίνεται δυσανάγνωστο σε αυτό το μέγεθος. Η τυπική προσέγγιση είναι να δημιουργήσετε ένα απλοποιημένο σύμβολο: ένα μόνο γράμμα, ένα αφηρημένο σχήμα ή ένα εικονίδιο που αντιπροσωπεύει την ταυτότητα χωρίς να βασίζεται σε λεπτομέρεια. Μερικά συγκεκριμένα προβλήματα που πρέπει να αντιμετωπίσετε: οι λεπτές γραμμές εξαφανίζονται εντελώς σε μικρά μεγέθη, ειδικά σε οθόνες μη-retina. Τα ζεύγη γραμμάτων και λεπτομέρειες αρνητικού χώρου συγχωνεύονται σε γκρι θόρυβο. Οι κλίσεις γίνονται μόλις ορατές. Η υψηλή αντίθεση μεταξύ του συμβόλου και του φόντου του είναι ο μεγαλύτερος μεμονωμένος παράγοντας στην αναγνωσιμότητα. Ένα συμπαγές σχήμα σε απλό φόντο σχεδόν πάντα διαβάζεται καλύτερα από μια λεπτομερή απεικόνιση στα 16x16. Τα μεγέθη 32x32 και 48x48 είναι πιο επιεική και μπορούν να υποστηρίξουν λίγο περισσότερη λεπτομέρεια, αλλά η έκδοση 16x16 πρέπει να αντιμετωπίζεται ως δεσμευτικός περιορισμός. Αν το σύμβολο ακόμα δεν διαβάζεται στα 16x16, ο σχεδιασμός χρειάζεται περαιτέρω απλοποίηση.

Το σύγχρονο σύνολο: .ico, PNG εικονίδια, apple-touch-icon, manifest και HTML link tags

Μια πλήρης ρύθμιση favicon για δημόσιο ιστότοπο χρειάζεται αυτήν τη στιγμή πέντε πράγματα. Πρώτον, ένα favicon.ico στη ρίζα του ιστότοπου (οι browsers ζητούν /favicon.ico απευθείας χωρίς link tag ως εφεδρικό). Δεύτερον, ένα PNG 32x32 για σύγχρονους desktop browsers, δηλωμένο με link tag: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Τρίτον, ένα PNG 16x16 για το μέγεθος καρτέλας: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Τέταρτον, ένα apple-touch-icon σε 180x180 pixels για σελιδοδείκτες αρχικής οθόνης iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Πέμπτον, ένα manifest web app (site.webmanifest) με PNG 192x192 και 512x512 για Android και progressive web apps. Η διαφάνεια υποστηρίζεται σε PNG και στις καταχωρήσεις κωδικοποιημένες ως PNG μέσα στο .ico, αν και το apple-touch-icon πρέπει να έχει αδιαφανές φόντο επειδή το iOS αγνοεί το κανάλι alpha και γεμίζει διαφανείς περιοχές με μαύρο.

Τοπική εκτέλεση: το favicon-generator κρατά την εικόνα σας στη συσκευή σας

Το favicon-generator σε αυτόν τον ιστότοπο παίρνει ένα PNG και παράγει το πλήρες σύνολο: ένα favicon.ico πολλαπλής ανάλυσης συμπιεσμένο με καταχωρήσεις 16x16, 32x32 και 48x48, τα μεμονωμένα μεγέθη PNG για άμεση χρήση link-tag, και το apple-touch-icon 180x180. Όλα αυτά γίνονται στον browser σας χρησιμοποιώντας το Canvas API και έναν encoder .ico σε JavaScript. Η πηγαία εικόνα σας δεν ανεβαίνει πουθενά· παραμένει στη συσκευή σας. Αυτό έχει σημασία όταν το αρχείο πηγής είναι εταιρικό λογότυπο ή οποιοδήποτε στοιχείο που δεν πρέπει να εγκαταλείψει τη μηχανή σας πριν ελέγξετε πού θα πάει. Κάθε παραγόμενο αρχείο προσφέρεται ως ξεχωριστή λήψη, με τα συμβατικά ονόματα. Τα αντιγράφετε στη ρίζα του ιστότοπού σας και προσθέτετε τα αντίστοιχα link tags στην HTML κεφαλίδα σας. Αν το λογότυπο πηγής έχει λεπτές λεπτομέρειες που δεν επιβιώνουν στην απόδοση 16x16, μπορείτε να το περικόψετε ή να το απλοποιήσετε πριν το ρίξετε στη γεννήτρια, ή να παρέχετε διαφορετική πηγαία εικόνα ειδικά προετοιμασμένη για το favicon.

Εργαλεία αυτού του άρθρου

Συχνές ερωτήσεις

Χρειάζομαι ακόμα favicon.ico αν δηλώσω PNG link tags;

Ναι, για δύο λόγους. Πρώτον, browsers που δεν διαβάζουν το HTML σας (web crawlers, RSS readers, ορισμένοι παλαιοί mobile browsers) αναζητούν /favicon.ico απευθείας στη ρίζα του domain. Αν αυτό το αρχείο απουσιάζει, παράγουν αίτηση 404 σε κάθε φόρτωση σελίδας, που προσθέτει θόρυβο στα logs διακομιστή σας και μικρό περιττό round trip. Δεύτερον, παλαιότερες εκδόσεις Internet Explorer αναγνωρίζουν μόνο τη μορφή .ico και αγνοούν τα PNG link tags. Η παροχή και των δύο καλύπτει όλες τις περιπτώσεις.

Μπορώ να χρησιμοποιήσω SVG ως favicon;

Το Chrome και το Firefox υποστηρίζουν SVG favicons μέσω `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Το Safari δεν υποστηρίζει SVG favicons. Επειδή τα SVG favicons είναι ανεξάρτητα ανάλυσης, φαίνονται καθαρά σε οποιαδήποτε πυκνότητα εμφάνισης, συμπεριλαμβανομένων των retina οθονών, χωρίς να χρειάζονται πολλαπλές παραλλαγές μεγέθους. Η πρακτική σύσταση είναι να δηλώσετε το SVG link tag για browsers που το υποστηρίζουν και να συμπεριλαμβάνετε ακόμα το εφεδρικό .ico για πλήρη κάλυψη. Τα SVG favicons μπορούν επίσης να περιλαμβάνουν ένα ερώτημα media `prefers-color-scheme` για αυτόματη εναλλαγή μεταξύ φωτεινής και σκοτεινής έκδοσης.

Από ποια εικόνα πρέπει να ξεκινήσω για το καλύτερο αποτέλεσμα;

Ένα τετράγωνο PNG σε 512x512 ή μεγαλύτερο με διαφανές φόντο δίνει τη μεγαλύτερη ευελιξία. Η εκκίνηση από μεγάλο μέγεθος και η μείωσή του διατηρεί περισσότερες λεπτομέρειες από την εκκίνηση από μικρή εικόνα. Αν το κύριο λογότυπό σας περιλαμβάνει wordmark, σκεφτείτε να ετοιμάσετε μια ξεχωριστή απλοποιημένη έκδοση που δείχνει μόνο το εικονίδιο ή σύμβολο, επειδή το κείμενο δεν θα είναι αναγνώσιμο στα 16x16 ανεξάρτητα από την ανάλυση πηγής. Η υψηλή αντίθεση μεταξύ του συμβόλου και του φόντου του είναι ο πιο αξιόπιστος δείκτης για το αν τα μικρά μεγέθη θα διαβάζονται καθαρά.