Ρυθμίστε το "apple-touch-icon.png" για Προσαρμογή ιστοτόπων iPhone σελιδοδείκτη FavIcon

Πίνακας περιεχομένων:

Anonim

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

Η ρύθμιση του εικονιδίου αφής της Apple είναι καλή ιδέα γιατί από προεπιλογή το iOS θα αποθηκεύσει απλώς μια μικρή μικρογραφία του ιστότοπου. Οι μικρές μικρογραφίες είναι συχνά δύσκολο να εντοπιστούν και γενικά δεν φαίνονται τόσο υπέροχες, επομένως ας ορίσουμε τη δική σας εικόνα favicon.

Πώς να προσαρμόσετε και να ορίσετε ένα εικονίδιο αφής Apple για έναν ιστότοπο

  • Δημιουργήστε το εικονίδιο, βεβαιωθείτε ότι είναι τετράγωνο, αυτό εδώ στο OSXDaily.com είναι 512×512 pixel, αλλά θα μπορούσατε να επιλέξετε άλλα μεγέθη τετραγώνου εάν θέλετε πραγματικά – σημειώστε ότι είναι κατάλληλο για οθόνες αμφιβληστροειδούς
  • Αποθηκεύστε το εικονίδιο της αρχικής οθόνης ως αρχείο PNG και επισημάνετε το: apple-touch-icon.png
  • Αποθέστε το apple-touch-icon.png στον ριζικό κατάλογο του διακομιστή ιστού, ώστε να είναι προσβάσιμος στο domain.com/apple-touch-icon.png
  • Δοκιμάστε το εικονίδιο σελιδοδείκτη αρχικής οθόνης του ιστότοπού σας, επισκεπτόμενοι τον ιστότοπο από το Safari στο iOS και, στη συνέχεια, πατώντας στο "Προσθήκη στην αρχική οθόνη"
  • Κοιτάξτε την αρχική οθόνη της συσκευής iOS και θα δείτε τον σελιδοδείκτη που είναι αποθηκευμένος εκεί με το νέο σας προσαρμοσμένο εικονίδιο, όπως το παραπάνω στιγμιότυπο οθόνης

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

Για αναφορά, εδώ είναι η προσαρμοσμένη εικόνα μας 'apple-touch-icon.png' που χρησιμοποιούμε για το OSXDaily.com, αυτό το παράδειγμα εικονιδίου σελιδοδείκτη έχει δημιουργηθεί και έχει το κατάλληλο μέγεθος για οθόνες αμφιβληστροειδούς ():

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

Αυτό προφανώς δεν είναι το ίδιο με την ύπαρξη μιας αποκλειστικής εφαρμογής iOS, αλλά μια αξιοπρεπής εμπειρία χρήστη για κινητά από τον Ιστό είναι μια καλή ιδέα και αποφεύγει το υψηλό κόστος της ανάπτυξης μιας εφαρμογής iOS.

Και, αν ανησυχείτε για τέτοια πράγματα, πιθανότατα χρησιμοποιείτε το Photoshop για να σχεδιάσετε τουλάχιστον τα εικονίδια σωστά; Δείτε λοιπόν μερικά όσο είστε σε αυτό.

Ρυθμίστε το "apple-touch-icon.png" για Προσαρμογή ιστοτόπων iPhone σελιδοδείκτη FavIcon