El favicon es el iconito que aparece en la pestaña del navegador y en los marcadores. Es lo que hace que alguien encuentre tu sitio entre veinte pestañas abiertas. El generador de NEUBOX crea todos los archivos que hacen falta, que son más de los que la mayoría cree.
Herramienta: Generador de favicon
Tu logo no sirve como favicon
Empecemos por lo que más tiempo ahorra saber de entrada.
El favicon se ve a 16 píxeles. Eso es más chico que esta letra. Un logo horizontal con el nombre completo de la empresa, ahí, se convierte en una mancha gris.
Lo que sí funciona a ese tamaño:
- Una o dos letras, las iniciales del negocio.
- El símbolo de tu logo, sin el texto que lo acompaña.
- Una figura simple, de un solo color sobre un fondo que contraste.
Tres formas de crearlo
Con texto, la más práctica
Es la opción más rápida y la que mejor resultado da si no tienes un símbolo aparte. Una o dos letras, en el color de tu marca.
Con una imagen
Sube una imagen cuadrada, de al menos 512 píxeles y con fondo transparente. Y mira la vista previa del tamaño más chico antes de darla por buena.
Con un emoji
Sirve muy bien para un proyecto personal, un sitio temporal o un negocio con un producto claro. Los emojis están diseñados para leerse en tamaños chicos, así que funcionan mejor de lo que parece.
Por qué son tantos archivos
La herramienta te entrega varios archivos, y hay una razón para cada uno:
- El archivo .ico lo siguen pidiendo algunos navegadores en la raíz del sitio.
- Los PNG de varios tamaños son para las pestañas, los marcadores y las pantallas de alta resolución.
- El icono grande es el que usa un iPhone o un Android cuando alguien guarda tu sitio en la pantalla de inicio.
- El archivo de manifiesto le dice al celular cómo se llama tu sitio y de qué color pintar la barra.
Por eso el nombre corto que te pide: es el que aparece debajo del icono en la pantalla del teléfono, y ahí caben pocas letras.
Cómo instalarlo
- Sube todos los archivos a la raíz de tu sitio, la misma carpeta donde está la página de inicio.
- Pega el bloque de etiquetas que te da la herramienta dentro del
<head>de tus páginas. - Comprueba que carguen, abriendo
tudominio.com/favicon.icoen el navegador.
En WordPress hay un atajo: en Apariencia, Personalizar, hay un campo de icono del sitio. Cubre lo básico, aunque no genera todos los archivos.
Si no aparece
El favicon es de las cosas que más se guardan en la memoria del navegador. Es normal seguir viendo el anterior.
- Prueba en una ventana privada. Ahí no hay copia guardada.
- Comprueba que los archivos existan abriendo su dirección directa.
- Revisa que las etiquetas estén en el
<head>, no en el cuerpo.
Herramientas que se usan junto con esta
- Generador de paletas de color, para elegir los colores del icono.
- Vista previa de enlaces, la otra imagen que representa tu sitio.
En la página de la herramienta está la guía completa, con para qué sirve cada archivo.