Legen Sie „apple-touch-icon.png“ fest, um das iPhone-Lesezeichen-FavIcon einer Website anzupassen

Inhaltsverzeichnis:

Anonim

Wenn Sie eine eigene Website haben oder eine für jemand anderen entwickeln, sollten Sie das Symbol für gespeicherte Lesezeichen anpassen, das auf dem iOS-Startbildschirm eines Benutzers angezeigt wird. Im obigen Screenshot sehen Sie das benutzerdefinierte OSXDaily-Favicon auf dem Bildschirm eines iPhones.

Das Festlegen des Apple Touch-Symbols ist eine gute Idee, da iOS standardmäßig nur eine kleine Miniaturansicht der Website speichert. Die kleinen Thumbnails sind oft schwer zu erkennen und sehen im Allgemeinen nicht so toll aus, also lass uns stattdessen dein eigenes Favicon-Bild festlegen.

Anpassen und Festlegen eines Apple Touch-Symbols für eine Website

  • Erstellen Sie das Symbol, stellen Sie sicher, dass es ein Quadrat ist, das hier auf OSXDaily.com hat 512×512 Pixel, aber Sie können andere Quadratgrößen wählen, wenn Sie wirklich wollen – beachten Sie, dass größer geeignet ist Retina-Displays
  • Speichern Sie das Homescreen-Icon als PNG-Datei und beschriften Sie es: apple-touch-icon.png
  • Lege apple-touch-icon.png in das Root-Verzeichnis des Webservers, sodass unter domain.com/apple-touch-icon.png darauf zugegriffen werden kann
  • Testen Sie das Lesezeichensymbol auf dem Startbildschirm Ihrer Website, indem Sie die Website von Safari in iOS aus besuchen und dann auf „Zum Startbildschirm hinzufügen“ tippen.
  • Schauen Sie auf den Startbildschirm des iOS-Geräts und Sie sehen das dort gespeicherte Lesezeichen mit Ihrem neuen benutzerdefinierten Symbol, wie im Screenshot oben

Solange die Datei richtig benannt ist und sich im Stammverzeichnis des Webservers befindet, weiß Mobile Safari, was damit zu tun ist, sodass keine weiteren Anpassungen erforderlich sind, damit das iOS-spezifische Favicon angezeigt wird.

Als Referenz ist hier unser benutzerdefiniertes 'apple-touch-icon.png'-Bild, das wir für OSXDaily.com verwenden. Dieses Beispiel-Lesezeichensymbol wurde erstellt und hat die richtige Größe für Retina-Displays ():

Sie werden feststellen, dass die eigentliche Symboldatei die Lichtbrechung nicht auf dem Symbol gespeichert hat, iOS handhabt dies selbst. Sie können ein beliebiges Bild verwenden, aber ich würde empfehlen, eines zu erstellen, das die vertraute Benutzeroberfläche vorhandener iOS-Symbole erfasst.

Das ist natürlich nicht dasselbe wie eine dedizierte iOS-App, aber eine anständige mobile Benutzererfahrung aus dem Internet ist eine gute Idee und vermeidet die möglicherweise hohen Kosten für die Entwicklung einer iOS-App.

Und hey, wenn Sie sich über solche Dinge Sorgen machen, verwenden Sie wahrscheinlich Photoshop, um zumindest die Symbole zu entwerfen, oder? Schauen Sie sich also einige an, wenn Sie gerade dabei sind.

Legen Sie „apple-touch-icon.png“ fest, um das iPhone-Lesezeichen-FavIcon einer Website anzupassen