Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • Apple Touch Icon: favicon ou icona de WebApp en iOS

Apple Touch Icon: favicon ou icona de WebApp en iOS

11 Out 2012 por Cruz

Comentarios: 1

iOS

Nun artigo anterior vimos como crear as distintas iconas das nosas aplicacións para iOS. Neste artigo explicaremos como crear unha icona para engadir á pantalla de inicio dun iPhone ou iPad para unha páxina web ou unha WebApp, os seus distintos tamaños e con ou sen efectos de sombras e brillos.

Dimensións e formato da icona

Cunha dimensión de 57x57 píxeles mostrarase correctamente en todos os dispositivos, pero o ideal é aproveitar o máximo permitido para cada un, así que podemos crear as seguintes imaxes:

  • iPhone: 57x57 píxeles
  • iPhone 4 alta resolución e posteriores: 114x114 píxeles
  • iPad: 72x72 píxeles

Non é necesario que redondeemos as esquinas das nosas iconas, xa que iOS fai ese traballo por nós de forma automática.

A resolución debe ser de 72 dpi.

Nome da imaxe e localización por defecto

Para mostrar a nosa icona, iOS busca e recoñece unhas imaxes por defecto no raíz da nosa web. A forma máis rápida e fácil de ter a nosa propia icona é crear eses ficheiros. Se só temos unha icona deberá chamarse apple-touch-icon.png. Se fixemos un para cada dispositivo os nomes teñen que ser:

  • apple-touch-icon-57x57.png para o iPhone
  • apple-touch-icon-114x114.png para o iPhone 4 alta resolución e posteriores
  • apple-touch-icon-72x72.png para o iPad

Efectos das iconas

Ó facer a imaxe non necesitamos crear os efectos de sombras e brillos que teñen as novas iconas, xa que iOS faino por nós. Existe a posibilidade de dicirlle que non faga eses efectos e que mostre a icona como nós a creamos (sen efectos ou cos nosos propios). Para iso deberemos modificar o nome do ficheiro desta forma:

  • apple-touch-icon-precomposed.png se só facemos a icona por defecto
  • apple-touch-icon-57x57-precomposed.png para o iPhone
  • apple-touch-icon-114x114-precomposed.png para o iPhone 4 alta resolución e posteriores
  • apple-touch-icon-72x72-precomposed.png para o iPad

Mellorando o método

O método descrito é fácil e rápido de facer, pero ten o inconveniente de que é lento á hora de mostrar a nosa icona, xa que iOS debe buscar entre todos os ficheiros que haxa no raíz se algún coincide cos nomes que el recoñece. Para acelerar esta procura, podemos indicar no código cal é o nome exacto do ficheiro que debe buscar. Ademais con este método podemos cambiar o nome do ficheiro e a localización do mesmo. Para iso debemos engadir no <head> das nosas páxinas, a seguinte liña:

<link rel="apple-touch-icon" href="/nome-da-icona.png" />

Se o que queremos é a icona sen efectos:

<link rel="apple-touch-icon-precomposed" href="/nome-da-icona.png" />

E se queremos utilizar as iconas coas dimensións específicas de cada dispositivo, debemos utilizar o atributo sizes.

Con efectos:

<link rel="apple-touch-icon" href="/nome-da-icona.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/nome-da-icona-iphone4.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/nome-da-icona-ipad.png" />

Sen efectos:

<link rel="apple-touch-icon-precomposed" href="/nome-da-icona.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/nome-da-icona-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/nome-da-icona-ipad.png" />

Comentarios

1 comentarios. Comentar.

1. javio o 05 Nov 2012 ás 10:13:58

Hello, this is a really fas­ci­nat­ing web blog and I have loved read­ing sev­eral of the arti­cles and posts con­tained upon the site, sus­tain the great work and hope to read a lot more excit­ing arti­cles in the time to come. Thank you so much.

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?