Generador de favicon

Sobre la herramienta: Generador de favicon

El favicon es el pequeño icono de una web que aparece en las pestañas del navegador, en los marcadores, en los resultados de búsqueda y en la pantalla de inicio del móvil. Sin favicon, la pestaña muestra un icono vacío que hace que la web parezca inacabada, y en los resultados de Google aparece el icono genérico del globo.

Esta herramienta crea, a partir de tu logotipo o de una letra o emoji, el juego completo de favicons con todos los tamaños que necesita cada dispositivo. Los tamaños muy pequeños, como 16 px, se dibujan directamente a ese tamaño en lugar de reducir uno grande, así que quedan más nítidos. Todo se hace en tu navegador.

Cómo se usa

1. Elige Texto o emoji o Imagen. Con texto funcionan mejor 1 o 2 caracteres; con imagen, un logotipo cuadrado.
2. Ajusta el color de fondo (o transparente), las esquinas redondeadas y el margen interior. En la vista previa (a la derecha, o debajo en el móvil) lo ves al tamaño real de una pestaña.
3. Pulsa Descargar todo (ZIP), descomprime el archivo y sube los ficheros a la carpeta raíz de tu web.
4. Copia el código HTML de abajo y pégalo dentro de <head> en todas las páginas.

Archivos incluidos en el ZIP

Los iconos de la pantalla de inicio del iPhone no admiten transparencia y se verían negros, así que aunque elijas transparente, apple-touch-icon.png se guarda con fondo blanco.

Cómo hacer un favicon que se vea bien en pequeño

• En una pestaña de 16 px, las líneas finas y las letras pequeñas se emborronan. Se ve mejor un símbolo o una sola inicial que el logotipo completo.
• Usa mucho contraste entre fondo y letra. Un fondo de color es más seguro que uno transparente para que se vea también en pestañas en modo oscuro.
• Si cambias el favicon y sigue apareciendo el antiguo, es por la caché del navegador. Recarga forzando (Ctrl+Shift+R) o añade ?v=2 al final del nombre de archivo.