Empieza con una imagen cuadrada sencilla
Usa una marca de logotipo sencilla, no una imagen detallada, porque se mostrará muy pequeña. El icono de una pestaña mide solo 16 píxeles de ancho en muchas pantallas, así que las líneas finas y el texto pequeño desaparecen. Una imagen cuadrada de al menos 512 por 512 píxeles da los mejores resultados, porque se puede reducir limpiamente a todos los demás tamaños.
Si tu logotipo no es cuadrado, recórtalo a la parte que funcione mejor por sí sola, como una sola letra o un símbolo. Normalmente es mejor mostrar con claridad una pequeña parte que todo el logotipo de forma deficiente. Un fondo transparente está bien en la mayoría de los casos, pero un color sólido puede ayudar en pestañas oscuras.
Qué archivos necesitas
- favicon.ico con versiones de 16, 32 y 48 píxeles para navegadores antiguos
- Iconos PNG de 32 y 16 píxeles
- apple-touch-icon.png de 180 por 180 para iPhone y iPad
- Iconos PNG de 192 y 512 píxeles para Android y los manifiestos de aplicaciones web
Un manifiesto web es un pequeño archivo JSON que enumera tus iconos más grandes para que los teléfonos puedan usarlos cuando un sitio se guarda en la pantalla de inicio.
Es posible que en algunas guías veas recomendados otros tamaños. El conjunto anterior cubre los casos comunes de pestañas del navegador, marcadores, pantallas de inicio de iOS e instalaciones en Android, y normalmente basta para un sitio web corriente.
Añade el HTML
Coloca los archivos en la raíz de tu sitio y añade etiquetas link en el head de tus páginas que apunten a ellos. Un generador puede darte las etiquetas exactas para pegar. Añade el manifiesto con una etiqueta link más. Si mueves los archivos a una carpeta, actualiza las rutas en las etiquetas para que coincidan.
Un conjunto típico de etiquetas nombra el archivo ico, los dos PNG pequeños, el apple-touch-icon y el manifiesto. Pégalas una sola vez en el encabezado compartido de tu sitio en lugar de hacerlo a mano en cada página, para que todas las páginas sean coherentes.
Consejos de diseño
Deja algo de margen para que las máscaras redondas no corten los bordes, porque algunos teléfonos recortan los iconos en círculos o cuadrados redondeados. Usa un contraste fuerte y una forma sencilla. Comprueba el icono tanto en temas de navegador claros como oscuros, ya que un logotipo oscuro sobre fondo transparente puede desaparecer en una barra de pestañas oscura.
Prueba un borrador viéndolo a 16 píxeles en tu propia pantalla. Si no puedes distinguir qué es a ese tamaño, simplifica la forma, elimina el detalle fino y engrosa las líneas.
Un ejemplo práctico (ilustrativo)
Supón que tu sitio es el de una pequeña panadería y el logotipo es una espiga de trigo con el nombre de la tienda debajo. A 16 píxeles el nombre es ilegible. Recorta solo la espiga, colócala sobre un fondo cálido y liso con algo de margen, y exporta un cuadrado de 512 por 512. A partir de esa única fuente puedes producir todos los tamaños de la lista anterior.
Si el primer intento se ve confuso a 16 píxeles, prueba un contorno más grueso o menos colores y vuelve a exportar. Dos o tres rondas son normales.
Flujo de trabajo paso a paso
- Elige o dibuja una marca sencilla y recórtala a un cuadrado
- Añade margen y, si es necesario, un fondo sólido
- Genera el conjunto completo de tamaños de icono a partir de la fuente grande
- Sube los archivos a la raíz de tu sitio
- Pega las etiquetas link en el head de tus páginas
- Recarga y prueba en una pestaña del navegador, y borra la caché si sigue apareciendo el icono antiguo
Errores comunes
- Usar un logotipo ancho con texto, que se convierte en una pequeña mancha borrosa
- Partir de una imagen pequeña y ampliarla
- Olvidar el margen, de modo que los bordes se cortan en los teléfonos
- Dejar etiquetas link antiguas que apuntan a archivos inexistentes
- Esperar que el cambio se vea al instante, cuando los navegadores suelen guardar los favicons en caché durante un tiempo
Lista de comprobación rápida
- Fuente cuadrada de 512 píxeles o más
- favicon.ico más PNG de 16 y 32 píxeles
- apple-touch-icon de 180 píxeles
- Iconos de 192 y 512 píxeles y un manifiesto
- Etiquetas link añadidas a cada plantilla de página
Hazlo con DoneImg en tu navegador
Abre el generador de favicons y añade tu imagen cuadrada. Crea favicon.ico con los tamaños de 16, 32 y 48 píxeles, los PNG de 16 y 32 píxeles, el apple-touch-icon de 180 píxeles, los PNG de 192 y 512 píxeles, un manifiesto web y un fragmento de HTML, todo junto en un archivo ZIP.
Todo se genera en tu navegador, así que tu logotipo no se sube a ningún sitio. Descomprime los archivos en la raíz de tu sitio, pega el fragmento en el head de tu página y prueba el resultado en una pestaña.