Incorporar el Icono de Apple a nuestro sitio Web

En más de una ocasión, cuando me contratan para posicionar una web, realizar una campaña SEO u optimizar una web en general, me he encontrado algo que muchos programadores y diseñadores web no hacen, incluir el icono de Apple.

Apple Touch Icon

En pocas páginas he visto que falte un favicon, que haberlas haylas, pero es menos frecuente, sin embargo, el Apple Icon pocas veces lo encuentro (incluso yo mismo no lo solía incluir hace unos años) o lo que es peor, el código de inserción está mal escrito.

¿Y para qué necesitamos este icono?

¿Más código y más imágenes en mi web para qué?

Aunque webs como “woorank.com” indican cómo error al analizar nuestra web la falta del Apple Touch Icon, en mi experiencia, no he podido comprobar que por tenerlo o no, el ranking y el posicionamiento en general de una web mejore (es más, muchas de las indicaciones que nos muestran este tipo de herramientas suelen buscar el que contratemos sus servicios… y nos ponen nuestra web por los suelos. Con deciros que negocios que facturan millones de euros al año y están en primera posición en todos los buscadores no obtienen más que unos tristes “notables”…)

woorank indica que no tenerlo es un error grave pero no he podido percibir nunca que una web no posicione por no tener el Apple Touch Icon

Una vez dicho esto, lo importante es realizar webs amigables para todos los sistemas, navegadores y buscadores, por lo que si podemos darle la posibilidad a los usuarios (y posibles clientes) de crear un icono de acceso directo en su escritorio, ¿por qué no hacerlo?

¿Quieres insertar tu Apple Touch Icon? Yo te explico... Clic para tuitear

Desde hace ya un tiempo, no sólo los usuarios Mac o iOS puede incluir este icono desde safari, sino que los usuarios de Android, usando nosotros el mismo código, pueden disfrutar el Apple Icon.

Vamos a ver cómo hacerlo. Es muy sencillo, pero antes de empezar un consejo:

Aunque lo lógico es re utilizar el archivo que usamos para crear el favicon (yo no me complico la vida y uso photoshop con el plugin de “ico”, pero hay infinidad de programas y herramientas online para crear un favicon) no debemos caer en el error de llamar a éste en el código porque lo que necesitamos es un archivo en formato “png”, así que crearemos 4 nuevas imágenes en “png” con 4 tamaños diferentes, y las incluiremos en nuestro directorio raíz (las podemos incluir donde queramos, pero como os comentaba, yo no me complico la vida y el favicon y los otros iconos los pongo en el raíz y a otra cosa)

Tamaños de los iconos

60×60

76×76

120×120

152×152

Nombre de los png

Subiremos a nuestro directorio raíz (por ejemplo con FileZilla) 4 imágenes en formato png:

apple-touch-icon.png

apple-touch-icon-76×76.png

apple-touch-icon-120×120.png

apple-touch-icon-152×152.png

He visto en otros post cómo hay un debate de los tamaños, si queréis podéis incluir más pero yo hasta ahora con estos 4 no he tenido problemas así que ya me contáis si veis que se deben incluir más.

Código a insertar dentro de las etiquetas <head>

<link href=»http://www.misitio.es/apple-touch-icon.png» rel=»apple-touch-icon» /> 

<link href=»http://www.misitio.es/apple-touch-icon-76×76.png» rel=»apple-touch-icon» sizes=»76×76″ /> 

<link href=»http://www.misitio.es/apple-touch-icon-120×120.png» rel=»apple-touch-icon» sizes=»120×120″ /> 

<link href=»http://www.misitio.es/apple-touch-icon-152×152.png» rel=»apple-touch-icon» sizes=»152×152″ />

Espero que os valgan estos consejos y que visitéis nuestra página web Alicante Informática si tenéis más dudas o queréis contratar nuestros servicios en Diseño Web Alicante, SEO Alicante o Servicios Informáticos Alicante.

Otra forma de contactar con nosotros es a través de nuestras Redes Sociales:

Facebook | Twitter | Google+

Autor: Javier Carmona Benítez

Google+

Saludos!