Δημιουργία favicon

Πώς να δημιουργήσετε ένα favicon

1. Στην Πηγή επιλέξτε Εικόνα ή Κείμενο ή emoji. - Εικόνα: αφήστε ένα PNG, JPG, WebP ή SVG. Ένα τετράγωνο λογότυπο τουλάχιστον 512 × 512 px λειτουργεί καλύτερα. Επιλέξτε Ολόκληρη η εικόνα για να χωρέσει μέσα στο εικονίδιο ή Γέμισμα και περικοπή για να καλύψει το τετράγωνο. - Κείμενο ή emoji: πληκτρολογήστε ένα γράμμα, αρχικά ή ένα emoji και μετά διαλέξτε τη Γραμματοσειρά, το Έντονα και το Χρώμα κειμένου.
2. Ορίστε το Χρώμα φόντου ή ενεργοποιήστε το Διαφανές φόντο. Επιλέξτε ένα Σχήμα (Τετράγωνο, Στρογγυλεμένο ή Κύκλος) και ένα Εσωτερικό περιθώριο (%) για να αφήσετε χώρο γύρω από το περιεχόμενο.
3. Προαιρετικά ανοίξτε το site.webmanifest για να εισαγάγετε το Όνομα εφαρμογής (web manifest), το Σύντομο όνομα, το Χρώμα θέματος και το URL φακέλου των εικονιδίων (κρατήστε το / αν τα αρχεία μπαίνουν στη ρίζα του ιστότοπού σας).
4. Πατήστε Δημιουργία favicon. Τα εικονίδια εμφανίζονται σε πραγματικό μέγεθος, δίπλα σε μια εικονική καρτέλα προγράμματος περιήγησης. Στη συνέχεια κάθε αλλαγή τα ενημερώνει άμεσα.
5. Πατήστε Λήψη ZIP, ανεβάστε τα αρχεία στον ιστότοπό σας και μετά Αντιγραφή ετικετών και επικολλήστε τες μέσα στο <head> των σελίδων σας.

Τι περιέχει το ZIP

Το αρχείο ICO περιέχει τρεις εικόνες PNG, μορφή που διαβάζουν τα Windows (από τα Vista) και όλα τα σύγχρονα προγράμματα περιήγησης. Το apple-touch-icon αποθηκεύεται πάντα σε συμπαγές φόντο, επειδή το iOS εμφανίζει τα διαφανή pixel ως μαύρα· με διαφανές φόντο χρησιμοποιείται λευκό.

Οι ετικέτες HTML

Οι ετικέτες που δημιουργούνται μοιάζουν ως εξής (με το URL του φακέλου σας):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Τα προγράμματα περιήγησης ζητούν επίσης αυτόματα το /favicon.ico στη ρίζα του τομέα σας, οπότε το να το κρατάτε εκεί βοηθά ακόμη και σε σελίδες χωρίς τις ετικέτες.

Συμβουλές σχεδίασης

• Κρατήστε το απλό. Στα 16 × 16 px η λεπτομέρεια χάνεται. Ένα μεμονωμένο γράμμα, ένα έντονο σύμβολο ή η πιο απλή εκδοχή του λογοτύπου σας διαβάζεται καλύτερα.
• Ελέγξτε την προεπισκόπηση σε πραγματικό μέγεθος. Το εικονίδιο 16 px στην εικονική καρτέλα είναι αυτό που βλέπουν πραγματικά οι επισκέπτες.
• Προσέξτε τη σκοτεινή λειτουργία. Ένα σκούρο λογότυπο σε διαφανές φόντο μπορεί να εξαφανιστεί σε σκοτεινά θέματα προγραμμάτων περιήγησης· ένα έγχρωμο φόντο ή ένα μικρό περιθώριο βοηθά.
• Τα emoji φαίνονται διαφορετικά σε κάθε σύστημα, επειδή κάθε πλατφόρμα σχεδιάζει τα emoji με το δικό της στυλ. Τα αρχεία PNG κρατούν την εμφάνιση της συσκευής σας.