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.
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?
[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][bctt tweet=”¿Quieres insertar tu Apple Touch Icon? Yo te explico…”]
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:
Autor: Javier Carmona Benítez
Saludos!
[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
