Το εικονίδιο Apple Touch παρέχει ρητά την εικόνα που χρησιμοποιείται όταν κάποιος προσθέτει τον ιστότοπό σας στην αρχική οθόνη iPhone. Παραμένει ξεχωριστό από το favicon της καρτέλας και τα εικονίδια του web app manifest.
Μία μόνο διάσταση: 180×180
Τα 180×180 pixel χρησιμοποιούνται συνήθως ως πηγή υψηλής ανάλυσης. Το iOS μπορεί να μικρύνει την εικόνα για μικρότερες θέσεις, επιτρέποντας στα περισσότερα έργα να διατηρούν μία μόνο δήλωση.
Παλαιότερες προτάσεις απαριθμούσαν οκτώ αρχεία, από 57×57 έως 152×152, καθένα με δικό του γνώρισμα sizes. Αυτές οι παραλλαγές δεν εξυπηρετούν πλέον σκοπό: διογκώνουν την HTML και προκαλούν επιπλέον αιτήματα για πανομοιότυπο αποτέλεσμα.
Το αρχείο πρέπει να είναι PNG. Το iOS δεν διαβάζει SVG ή WebP για αυτό το εικονίδιο, ενώ το JPEG χαλάει τις καθαρές ακμές των επίπεδων γραφικών.
Προτιμήστε αδιαφανές φόντο
Το διαφανές φόντο μπορεί να δώσει απρόσμενο αποτέλεσμα, ανάλογα με την έκδοση και τη χρήση. Για να ελέγξετε την εμφάνιση στην αρχική οθόνη, προσφέρετε το σχέδιο πάνω σε αδιαφανές φόντο της επιλογής σας.
Η λύση είναι να ενσωματώσετε το εικονίδιο σε αδιαφανές φόντο πριν από την εξαγωγή. Επιλέξτε χρώμα της επωνυμίας ή απλό λευκό αν το σύμβολο είναι πολύχρωμο και αφήστε περίπου 10% περιθώριο γύρω από το σχέδιο, ώστε να αναπνέει.
Μη στρογγυλεύετε όμως μόνοι σας τις γωνίες: το iOS εφαρμόζει δική του στρογγυλεμένη μάσκα. Ένα ήδη στρογγυλεμένο αρχείο δημιουργεί διπλή ακτίνα και άσχημες γωνίες.
Η ετικέτα για επικόλληση
Αρκεί μία γραμμή στο head των σελίδων: link rel="apple-touch-icon" href="/apple-touch-icon.png". Το γνώρισμα sizes είναι προαιρετικό όταν παρέχετε ένα μόνο αρχείο.
Προαιρετικά προσθέστε meta name="apple-mobile-web-app-title" content="Your brand" για να ελέγξετε την ετικέτα κάτω από το εικονίδιο. Χωρίς αυτή, το iOS χρησιμοποιεί τον τίτλο της σελίδας, που συνήθως είναι πολύ μεγάλος και περικόπτεται.
Τοποθετήστε επίσης αντίγραφο στη ρίζα ως apple-touch-icon.png: όπως με το favicon.ico, το iOS το αναζητά εκεί όταν δεν βρίσκει ετικέτα.
Γιατί το εικονίδιό σας δεν ενημερώνεται
Το iOS αποθηκεύει επιθετικά το εικονίδιο στην κρυφή μνήμη και μια συντόμευση που υπάρχει ήδη στην αρχική οθόνη δεν αλλάζει μόνη της. Για να δοκιμάσετε νέα έκδοση, διαγράψτε τη συντόμευση, καθαρίστε τα δεδομένα Safari και προσθέστε ξανά τον ιστότοπο.
Αν το εικονίδιο εξακολουθεί να λείπει, ελέγξτε τρία πράγματα: το αρχείο απαντά 200 και όχι 404, σερβίρεται με τύπο περιεχομένου image/png και δεν αποκλείεται από robots.txt ή έλεγχο ταυτότητας.
Ο έλεγχος LFFavicon δοκιμάζει ακριβώς αυτές τις περιπτώσεις σε οποιαδήποτε δημόσια URL και εμφανίζει το εικονίδιο που πραγματικά ανέκτησε.
Πρωτογενείς πηγές
Συχνές ερωτήσεις
Χρειάζονται πολλά μεγέθη apple-touch-icon;
Στα περισσότερα έργα, ένα αρχείο υψηλής ανάλυσης 180×180 επιτρέπει στο iOS να παράγει μικρότερες αποδόσεις. Δοκιμάστε τις συσκευές που περιλαμβάνονται στις απαιτήσεις υποστήριξής σας.
Χρησιμοποιεί το Android το apple-touch-icon;
Το Chrome σε Android μπορεί να το χρησιμοποιήσει εφεδρικά, αλλά διαβάζει πρώτα τα εικονίδια web manifest. Δηλώνετε πάντα τα 192×192 και 512×512 στο manifest· αυτή είναι η επίσημη οδός.
Μπορώ να χρησιμοποιήσω SVG ως εικονίδιο Apple Touch;
Όχι, το iOS περιμένει εικόνα PNG για αυτή την ετικέτα. Κρατήστε το SVG για το favicon υπολογιστή, όπου προσφέρει ευκρίνεια και σκοτεινή λειτουργία.