Qué es
El Generador de Favicon toma una imagen y produce el conjunto de tamaños de ícono que necesita un sitio web: el chiquito de la pestaña del navegador, los más grandes que se usan cuando alguien guarda el sitio en la pantalla de inicio del celular, y los intermedios.
Exporta en 16, 32, 48, 128, 180, 192 y 512 píxeles, que cubre navegadores de escritorio, Android y el ícono táctil de Apple.
Cómo usarlo
- Agrega tu imagen, idealmente cuadrada y de al menos 512 píxeles por lado.
- Descarga el conjunto.
- Coloca los archivos en la raíz de tu sitio y referéncialos desde el
<head>.
Diseñar para 16 píxeles
Esta es la parte que decide si el resultado se ve profesional o embarrado, y no depende de la herramienta.
Un favicon se lee a 16 por 16 píxeles en una pestaña. A ese tamaño, un logo completo con el nombre escrito se vuelve una mancha ilegible. Lo que funciona es un solo elemento fuerte: una letra, un símbolo, una forma, con buen contraste tanto contra una barra clara como contra una oscura.
Parte de algo que ya sea simple en vez de encoger un logo detallado. Si no distingues qué es tu ícono a 16 píxeles, nadie más va a poder.
Sobre la transparencia
Deja el fondo transparente si tu ícono debe apoyarse sobre el color que use el navegador. Ponle un fondo sólido si la forma necesita sostenerse contra un fondo impredecible. Las dos opciones son válidas; la equivocada se nota como un ícono que desaparece en modo oscuro.
Todo funciona en tu navegador: la imagen nunca se sube ni se guarda.
Relacionados: PNG a ICO y el generador de paletas de colores.