Stellen Sie "apple-touch-icon.png" ein, um eine Website iPhone Bookmark FavIcon anzupassen
Wenn Sie eine eigene Website haben oder diese 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.
Die Einstellung des Apple Touch Icons ist eine gute Idee, da iOS standardmäßig nur ein kleines Thumbnail der Site speichert. Die kleinen Thumbnails sind oft schwer zu erkennen und sehen in der Regel nicht besonders gut aus. Lassen Sie uns stattdessen Ihr eigenes Favicon-Bild erstellen.
Wie man ein Apple Touch Icon für eine Website anpasst und einstellt
- Erstellen Sie das Symbol, stellen Sie sicher, dass es ein Quadrat ist, das hier auf OSXDaily.com ist 512 × 512 Pixel, aber Sie könnten andere Quadratgrößen wählen, wenn Sie wirklich möchten - beachten Sie, dass größer für Retina-Displays geeignet ist
- Speichere das Homescreen-Symbol als PNG-Datei und beschrifte es: apple-touch-icon.png
- Lege apple-touch-icon.png in das Root-Webserver-Verzeichnis, so dass du auf domain.com/apple-touch-icon.png zugreifen kannst
- Testen Sie das Homescreen-Lesezeichen-Symbol Ihrer Website, indem Sie die Website von Safari in iOS aufrufen und dann auf "Zum Startbildschirm hinzufügen" tippen.
- Sehen Sie sich den Homescreen des iOS-Geräts an und Sie sehen das dort gespeicherte Lesezeichen mit Ihrem neuen benutzerdefinierten Symbol, wie im obigen Screenshot
Solange die Datei korrekt benannt ist und sich im Root-Verzeichnis der Webserver befindet, weiß Mobile Safari, was damit zu tun ist, sodass keine weiteren Anpassungen erforderlich sind, damit das iOS-spezifische Favicon angezeigt wird.
Hier ist unser benutzerdefiniertes Bild 'apple-touch-icon.png', das wir für OSXDaily.com verwenden. Dieses Beispiel-Lesezeichen-Symbol wird passend für Retina-Displays erstellt und angepasst (erfahren Sie mehr über die Erstellung eines Retina-Lesezeichen-Icons hier):
Sie werden feststellen, dass in der aktuellen Symboldatei die Lichtbrechung nicht auf dem Symbol gespeichert ist, iOS übernimmt dies selbst. Sie können ein beliebiges Bild verwenden, aber ich würde empfehlen, eines zu erstellen, das die vertraute Benutzeroberfläche der vorhandenen iOS-Symbole erfasst.
Dies ist natürlich nicht das Gleiche wie eine dedizierte iOS-App, aber eine anständige mobile Benutzererfahrung aus dem Internet ist eine gute Idee und vermeidet, was der hohe Preis für die Entwicklung einer iOS-App sein kann.
Und hey, wenn du über solche Sachen besorgt bist, benutzt du wahrscheinlich Photoshop, um zumindest die Icons richtig zu gestalten? Sehen Sie sich also einige Tipps an, um Photoshop zu beschleunigen, während Sie gerade dabei sind.
