Estableix “apple-touch-icon.png” per personalitzar una icona de favorits de favorits d'iPhone de llocs web

Taula de continguts:

Anonim

Si teniu un lloc web propi o esteu desenvolupant-ne un per a algú altre, hauríeu de personalitzar la icona d'adreces d'interès desada que apareix a la pantalla d'inici d'iOS de l'usuari. A la captura de pantalla de d alt, veureu el favicon personalitzat d'OSXDaily a la pantalla d'un iPhone.

Configurar la icona Apple Touch és una bona idea perquè, per defecte, iOS només desarà una petita miniatura del lloc. Les petites miniatures solen ser difícils d'identificar i, en general, no tenen un aspecte genial, així que configurem la vostra pròpia imatge de favicon.

Com personalitzar i configurar una icona Apple Touch per a un lloc web

  • Creeu la icona, assegureu-vos que sigui un quadrat, el que hi ha a OSXDaily.com té 512 × 512 píxels, però podeu triar altres mides de quadrat si realment ho voleu; tingueu en compte que més gran és adequat per a pantalles de retina
  • Desa la icona de la pantalla d'inici com a fitxer PNG i etiqueta-la: apple-touch-icon.png
  • Deixa anar apple-touch-icon.png al directori del servidor web arrel, de manera que es pugui accedir a domain.com/apple-touch-icon.png
  • Prova la icona d'adreces d'interès de la pantalla d'inici del teu lloc web visitant el lloc des de Safari a iOS i després tocant "Afegeix a la pantalla d'inici"
  • Mireu la pantalla d'inici del dispositiu iOS i hi veureu el marcador desat amb la vostra nova icona personalitzada, com la captura de pantalla de d alt

Sempre que el fitxer tingui un nom adequat i al directori arrel dels servidors web, Mobile Safari sabrà què fer-hi, de manera que no calgui més ajustament perquè aparegui el favicon específic d'iOS.

Com a referència, aquí teniu la nostra imatge personalitzada 'apple-touch-icon.png' que utilitzem per a OSXDaily.com, aquesta icona d'adreces d'interès d'exemple es crea i té la mida adequada per a pantalles de retina ():

Notareu que el fitxer de la icona real no té la refracció de la llum desada a la icona, iOS s'encarrega d'això per si mateix. Podeu utilitzar qualsevol imatge que vulgueu, però us recomano que en creeu una que capti la interfície d'usuari familiar de les icones d'iOS existents.

Això òbviament no és el mateix que tenir una aplicació iOS dedicada, però una experiència d'usuari mòbil decent des del web és una bona idea i evita el que pot ser l' alt preu de desenvolupar una aplicació per a iOS.

I bé, si us preocupen coses com aquestes, probablement feu servir Photoshop com a mínim per dissenyar les icones, oi? Així que fes-ne una ullada mentre hi ets.

Estableix “apple-touch-icon.png” per personalitzar una icona de favorits de favorits d'iPhone de llocs web