Escrito por Juan Pedro Catalá
Índice
Una de las cosas que más representa a una empresa o marca es su logo, por ello debería estar presente en los favicons o iconos para que cuando el visitante navegue por nuestra página, se la guarde en favoritos o se guarde un enlace en el móvil, aparezca el logo de nuestra empresa.
En la actualidad, la mayoría de la webs ya utilizan el favicon para los navegadores, pero no el resto de iconos optimizados para otros dispositivos o sistemas. A continuación, veremos la forma correcta de especificar los iconos para todos los dispositivos y sistemas operativos.
Partimos de que tenemos el logo de nuestra empresa en una imagen .png de 512px x 512px, a partir de esta tenemos que generar una imagen de 16px x 16px en formato .ico que es la que usaremos finalmente como favicon.
Para generar este icono para el navegador o favicon podemos utilizar herramientas online gratuitas como la que proporciona DynamicDrive, que además nos genera el respectivo icono para las versiones de escritorio de Windows, de modo que si una persona arrastrara el icono del navegador al escritorio usará la versión de más tamaño para que se vea correctamente.
Por estandarización, esta imagen generada se debe llamar favicon.ico y se debe colocar en la raíz de nuestra web. Por ejemplo, en nuestra web se encuentra en https://www.humanlevel.com/favicon.ico. Ahora solo nos quedaría indicar en la sección <head> del HTML de nuestra página la ruta donde se encuentra nuestro icono, para ello usaríamos el siguiente código:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Por defecto, la mayoría de los navegadores miran si existe el archivo favicon.ico en la raíz sin especificar el código anterior, pero siempre es mejor especificarlo por si algún navegador no lo hace.
En la actualidad, los navegadores ya soportan los favicons en .png o .gif, pero es recomendable seguir usando el formato .ico por compatibilidad con navegadores antiguos.
Cómo crear el icono o web clip para iPhone, iPad y Android
Apple se inventó una especificación, para declarar los iconos para el iPhone que más adelante han adoptado en todos sus dispositivos y que Android soporta desde su versión 2.1.
El código a especificar en la sección <head> sería el siguiente:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
La imagen debe ser un .png de 57px x 57px. Los dispositivos iOS automáticamente aplicarán los efectos para que parezca un botón, redondeándole las esquinas, aplicando sombras, etc. Este último formato no es compatible con los dispositivos Android, por lo que no recomiendo su uso. Si no quieres que se apliquen estos efectos y soportar Android hay que cambiar el código por el siguiente:
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />
Con la ampliación de la resolución de los dispositivos de Apple, se requería que los iconos fueran cada vez más grandes para que se visualizaran correctamente en las pantallas retina y no se vieran pixelados. Para ello, Apple introdujo una variación del código anterior en la cual se especifica el tamaño del icono, para que así los distintos dispositivos escogieran el icono que mejor funcionaba con su resolución de pantalla. La especificación del tamaño del icono para Apple se hace a través del atributo «sizes».
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
Las imágenes deberían tener el mismo tamaño que el que se especifica en el atributo «sizes», es decir: 72px x 72px; 114px x 114px y 144px x 144px.
Al igual que ocurre con los favicons, los nombres que se especifican en las imágenes están estandarizados y deberían ser siempre así. Estos iconos deberían estar en la raíz de nuestra web, ya que por defecto los dispositivos miran si existen los archivos aunque no se especifiquen en el código.
Cómo crear el icono o tile para Windows 8
Al igual que hizo Apple, Microsoft se inventó una especificación para declarar los iconos que se utilizan en pantalla de inicio en Windows 8.
Para ello, se debe generar un .png de mínimo 144px x 144px, si es más grande no pasa nada siempre que sea cuadrada, y especificar el siguiente código en el <head> de la página:
<meta name="msapplication-TileImage" content="/tile.png" />
<meta name="msapplication-TileColor" content="#d83434" />
En la primera meta, especificamos la ruta hacia la imagen y en la segunda el color de fondo que queremos que tenga el tile en formato RGB.
Cómo crear el icono para el dock de MAC
MAC no soporta de forma nativa ningún tag para coger el icono, para ello existen aplicaciones como Fluid.app que encapsulan aplicaciones web como si fueran aplicaciones de escritorio.
Está aplicación comprueba si existe el siguiente código en la sección <head> del html de la página para obtener el icono y el nombre de la web.
<link rel="fluid-icon" href="http://www.midominio.com/fluidicon.png" title="Nombre de tu empresa o marca" />
La imagen debe ser un .png de 512px x 512px para que soporte bien cualquier resolución de escritorio.
Juan, me ha servido mucho tu articulo. Con respecto a los ‘tiles’ para windows: como se puede hacer transparente el fondo del mismo? el icono ya es transparente.
Gracias! Ha funcionado perfecto! Gran artículo 🙂
Hola, en la barra de navegador me queda bien pero no logro que me quede como icono en el escritorio Android, hay una forma de hacerlo?
Hola Alvaro,
La respuesta la tienes en este artículo:
hhttps://www.humanlevel.com/blog/desarrollo-web/desarrollo-web-html5-futuro-de-app-moviles.html
<link rel=»shortcut icon» sizes=»196×196″ href=»icon-196×196.png» />
Pero desconozco que navegadores de Android soportan ahora mismo esa funcionalidad.
Saludos
Muchísimas gracias por el artículo, llevo toda la tarde tratando de solucionar el tema favicon.ico en mi web de clasificados. Gracias
Y que es lo que se tiene que hacer para los de Android???
Gracias
Hola Carlos,
Android adopto la misma especificación que creo Apple desde la versión 2.1 como comento en el artículo.
Si pones en el
<head>:<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />Android debe de ser capaz de coger el icono.
Un saludo.
Genial el post, si lo he entendido bien tengo que hacer
Un .ico de 16×16 (el de toda la vida)
y luego .PNG de estos tamaños: 57×57 ,72×72, 114×114, 144×144, 512×512, luego subirlos con las etiquetas correspondientes correcto ?
—————
Lo que tengo duda es por qué el último, el del Dock de Mac es href=»http://midominio.com/fluidicon.png» por qué no es href=»fluidicon.png» solamente ? porque hay que añadir la url del dominio.
Hola Héctor,
Me alegro de que el post te haya gustado.
Sobre tus preguntas, se supone que si hay que generar la imagen con los diferentes tamaños, hay gente que genera únicamente la imagen más grande y luego la enlaza desde el resto de tamaños como https://github.com puedes verlo en el código fuente de su página es otra forma de hacerlo para no tener que generar tantas imágenes.
Para la URL del Dock de MAC, es indiferente poner /fluidicon.png o http://dominio.com/fluidicon.png.
Un saludo.
¿Se podrían variar los nombres de los iconos para iPhone e iPad al especificarlos en la página? Es decir, ¿se podrían llamar de la forma «apple-touch-icon-precomposed.v1.png», de cara a tener un control de versiones de los mismos?
Hola José,
Puedes poner el nombre que quieras a los archivos. La ventaja que tiene el llamarlos así es que no haría falta declararlo en el head.
Es decir, estos iconos funcionan igual que el favicon.
Espero que te sirva de ayuda.
Un saludo.
Yep, me sirve.
Muchas gracias, por la respuesta y por la rapidez 🙂