Μετατροπή PNG σε ICO (favicon)

Τι πρέπει να κάνει ένα favicon

Ένα favicon εμφανίζεται σε πολύ μικρό μέγεθος, συχνά 16 εικονοστοιχεία στο τετράγωνο. Σε αυτό το μέγεθος οι μικρές λεπτομέρειες εξαφανίζονται και οι λεπτές γραμμές χάνονται εντελώς. Ένα καλό favicon είναι ένα έντονο, απλό σχήμα με μεγάλη αντίθεση: ένα γράμμα, μια απλοποιημένη εκδοχή του συμβόλου του λογότυπου ή ένα συμπαγές σχήμα στο χρώμα της επωνυμίας. Αν το πλήρες λογότυπό σας περιέχει κείμενο, χρησιμοποιήστε μόνο το σύμβολο ή μόνο το αρχικό γράμμα.

Ο λόγος που τα αρχεία .ico περιέχουν πολλά μεγέθη είναι ότι η μεγέθυνση ή σμίκρυνση μιας μόνο εικόνας κατά την προβολή φαίνεται θολή. Με εκδόσεις 16, 32, 48 και 64 εικονοστοιχείων, το λειτουργικό σύστημα ή το πρόγραμμα περιήγησης μπορεί να δείξει μια εικόνα τέλεια στο pixel σε κάθε περιβάλλον: 16 px στην καρτέλα, 32 px στη λίστα σελιδοδεικτών σε οθόνη υψηλής πυκνότητας, 48 px σε συντόμευση της γραμμής εργασιών των Windows και ούτω καθεξής.

Προετοιμασία του αρχικού PNG

• Κάντε το τετράγωνο. Αν το λογότυπό σας είναι φαρδύ, τοποθετήστε το πρώτα σε έναν τετράγωνο διαφανή καμβά ή περικόψτε στο σύμβολο με το εργαλείο περικοπής.
• Ξεκινήστε από 256 εικονοστοιχεία ή περισσότερα. Η σμίκρυνση από ένα μεγάλο, καθαρό πρωτότυπο δίνει πιο ομαλό αποτέλεσμα από τη μεγέθυνση ενός μικρού.
• Κρατήστε διαφανές φόντο αν το σχήμα είναι συμπαγές, ώστε να ταιριάζει τόσο στα ανοιχτά όσο και στα σκούρα θέματα του προγράμματος περιήγησης. Αν το σχήμα είναι λεπτό ή ανοιχτόχρωμο, τοποθετήστε το καλύτερα σε ένα μονόχρωμο τετράγωνο.
• Αποφύγετε κείμενο μεγαλύτερο από ένα ή δύο γράμματα· δεν θα διαβάζεται στα 16 εικονοστοιχεία.

Εγκατάσταση του favicon

Αποθηκεύστε το αρχείο που λάβατε ως favicon.ico και τοποθετήστε το στον ριζικό φάκελο του ιστότοπού σας. Έπειτα προσθέστε αυτό μέσα στο <head> κάθε σελίδας:

<link rel="icon" href="/favicon.ico" sizes="any">

Πολλές πλατφόρμες έχουν αντί γι’ αυτό ειδική ρύθμιση: το WordPress την ονομάζει Site Icon στην ενότητα Appearance, το Shopify και το Squarespace έχουν πεδίο Favicon στις ρυθμίσεις θέματος και το Webflow έχει ένα στα Project Settings. Μεταφορτώστε εκεί το .ico. Για πλήρη οδηγό, διαβάστε πώς να φτιάξετε favicon.

Για να πάτε ένα βήμα παραπέρα

Για το πλήρες σύνολο εικονιδίων που ζητούν οι σύγχρονες συσκευές, θα χρειαστείτε επίσης ένα PNG 180 εικονοστοιχείων για τις συντομεύσεις στην αρχική οθόνη του iOS (apple-touch-icon) και PNG 192 και 512 εικονοστοιχείων για το Android και το manifest της εφαρμογής ιστού. Αυτά είναι κανονικά αρχεία PNG, οπότε χρησιμοποιήστε το εργαλείο αλλαγής μεγέθους για να τα δημιουργήσετε από το ίδιο κύριο αρχείο. Το .ico από αυτή τη σελίδα καλύπτει τις καρτέλες του προγράμματος περιήγησης, τους σελιδοδείκτες και τα Windows, όπου οι περισσότεροι προσέχουν ότι λείπει ένα favicon.