Δημιουργήστε favicon.ico για τον ιστότοπό σας από μία εικόνα

Κάθε μέγεθος έχει τη χρήση του:

Αν δεν φτιάχνετε PWA, χρειάζεστε μόνο: favicon.ico, 32×32 PNG και 180×180 PNG. Αυτά τα τρία αρχεία καλύπτουν τις περισσότερες περιπτώσεις.

Η Google εμφανίζει τα favicons δίπλα στη διεύθυνση URL του ιστότοπου στα αποτελέσματα αναζήτησης. Τα αποτελέσματα σε κινητές συσκευές εμφανίζουν favicons από το 2019. Τα αποτελέσματα σε υπολογιστές ακολούθησαν τον Ιανουάριο 2020. Το favicon είναι ένα ορατό στοιχείο μάρκας σε κάθε αναζήτηση Google.

Η Google θέτει συγκεκριμένες απαιτήσεις για την εμφάνιση favicons. Το εικονίδιο πρέπει να είναι τουλάχιστον 48×48 pixels. Πρέπει να είναι τετράγωνο. Η εικόνα πρέπει να παραμένει ευδιάκριτη σε λευκό φόντο. Η Google απορρίπτει εικονίδια με ακατάλληλο ή κενό περιεχόμενο.

Το Googlebot ανιχνεύει και ευρετηριάζει τα favicons ανεξάρτητα από το περιεχόμενο της σελίδας. Η ενημέρωση του favicon στα αποτελέσματα μπορεί να χρειαστεί από μερικές ημέρες έως αρκετές εβδομάδες. Το αρχείο favicon δεν πρέπει να είναι μπλοκαρισμένο στο robots.txt - διαφορετικά η Google δεν μπορεί να ανακτήσει τη νέα έκδοση.

Το Bing εμφανίζει επίσης favicons στα αποτελέσματά του. Το DuckDuckGo δείχνει εικονίδια ιστότοπων δίπλα σε κάθε σύνδεσμο αποτελέσματος. Ένα πλήρες σετ favicons εξασφαλίζει ομοιόμορφη εμφάνιση μάρκας σε όλες τις μεγάλες μηχανές αναζήτησης. Οι χρήστες αναγνωρίζουν τα οικεία favicons γρηγορότερα, πράγμα που συμβάλλει σε υψηλότερο ποσοστό κλικ.

Η Ελλάδα έχει ισχυρό τουριστικό τομέα - ξενοδοχεία, εστιατόρια και τουριστικές υπηρεσίες χρειάζονται αναγνωρίσιμο favicon. Η οπτική συνέπεια μεταξύ favicon και λογότυπου ενισχύει την αναγνώριση στις καρτέλες του προγράμματος περιήγησης, τους σελιδοδείκτες και στην αρχική οθόνη κινητών συσκευών.

Όταν ένας χρήστης έχει δέκα ή περισσότερες καρτέλες ανοιχτές, το favicon παραμένει το μόνο ορατό στοιχείο που αναγνωρίζει τον ιστότοπο. Μια απλοποιημένη εκδοχή του λογότυπου ή το πρώτο γράμμα λειτουργεί καλύτερα σε μικρά μεγέθη pixels.

Πλατφόρμες e-commerce όπως Skroutz και BestPrice εμφανίζουν favicons στα αποτελέσματα, αυξάνοντας την οπτική διαφοροποίηση μεταξύ των πωλητών. Ένα επαγγελματικό favicon σηματοδοτεί αξιοπιστία και ξεχωρίζει το κατάστημα ανάμεσα σε δεκάδες ανταγωνιστικά αποτελέσματα.

Το ελληνικό αλφάβητο δεν αποτελεί εμπόδιο για τα favicons. Οι περισσότεροι σχεδιαστές χρησιμοποιούν σύμβολα ή αρχικά γράμματα σε λατινικό αλφάβητο για διεθνή αναγνωρισιμότητα. Πλατφόρμες όπως WooCommerce και OpenCart, δημοφιλείς στην Ελλάδα, επιτρέπουν τη ρύθμιση του favicon στις επιλογές θέματος.

Οι Progressive Web Apps απαιτούν πρόσθετα εικονίδια πέρα από το τυπικό favicon. Το αρχείο manifest.json πρέπει να περιλαμβάνει πίνακα εικονιδίων με διαστάσεις 192×192 και 512×512 pixels σε μορφή PNG.

Τα maskable icons είναι ένας ειδικός τύπος εικονιδίου για συσκευές Android. Το λειτουργικό σύστημα περικόπτει τα maskable icons σε διάφορα σχήματα - κύκλους, στρογγυλεμένα τετράγωνα ή σταγόνες. Η ασφαλής ζώνη καλύπτει το εσωτερικό 80% της επιφάνειας της εικόνας. Όλα τα βασικά γραφικά στοιχεία πρέπει να βρίσκονται εντός αυτής της ζώνης.

Η Apple απαιτεί ξεχωριστό αρχείο apple-touch-icon μεγέθους 180×180 pixels. Αυτό το αρχείο πρέπει να δηλωθεί στην ενότητα head του HTML - το iOS δεν το διαβάζει από το αρχείο manifest.

Η Ελλάδα έχει υψηλή διείσδυση smartphone. Ελληνικές τράπεζες όπως η Εθνική και η Πειραιώς και υπηρεσίες χρησιμοποιούν τεχνολογία PWA για γρήγορη πρόσβαση από την αρχική οθόνη του τηλεφώνου.

Ο έλεγχος Lighthouse στα εργαλεία ανάπτυξης του Chrome επαληθεύει την ύπαρξη και την εγκυρότητα του favicon και των εικονιδίων PWA. Ένα ελλιπές ή μη έγκυρο favicon δημιουργεί προειδοποίηση στην κατηγορία PWA του ελέγχου.