WebyTooly

Generador de favicon

Sube tu logotipo y descarga todos los tamaños de favicon que necesita una web moderna, incluido el favicon.ico.

Espacio publicitario

Arrastra tu logotipo aquí o haz clic para elegirlo

Lo ideal es una imagen cuadrada de 512 × 512 px o más

Se aplica solo si tu imagen tiene zonas transparentes. Déjalo en transparente para conservar el alfa.

Espacio publicitario

Cómo se generan los favicons

Primero recortamos el mayor cuadrado centrado de tu imagen, para que un logotipo apaisado no salga deformado. Después ese cuadrado se redibuja en un lienzo de cada tamaño y se exporta como PNG.

lado del recorte = mínimo(ancho, alto)

El archivo favicon.ico se construye con un codificador ICO propio: una cabecera ICONDIR, una entrada de directorio por tamaño y los PNG de 16, 32 y 48 px incrustados tal cual. Desde Windows Vista el formato ICO admite PNG dentro, y todos los navegadores actuales lo leen.

Los tamaños grandes no son decorativos: 180 px es el icono que usa iOS al añadir la web a la pantalla de inicio, y 192 y 512 px son los que pide el manifiesto de una PWA.

Ejemplo práctico

Un logotipo de 1024 × 768 px se recorta al cuadrado central de 768 × 768 px y de ahí salen los seis PNG y el .ico, todos con el logotipo centrado y sin deformar.

Preguntas frecuentes

¿Qué tamaño debe tener mi imagen de partida?
Cuanto mayor, mejor: con 512 × 512 px o más todos los tamaños salen nítidos. Desde una imagen pequeña, los tamaños grandes se verán pixelados.
¿Necesito el favicon.ico si ya tengo los PNG?
Sigue siendo recomendable: algunos navegadores y muchos agregadores lo piden por defecto en la raíz del dominio, sin mirar las etiquetas HTML.
¿Se conserva la transparencia?
Sí, salvo que elijas un color de fondo. Los PNG generados mantienen el canal alfa y el .ico incrusta esos mismos PNG de 32 bits.
¿Dónde coloco los archivos?
El favicon.ico en la raíz del sitio y los PNG donde prefieras, referenciándolos con las etiquetas link que te mostramos tras generarlos.

Calculadoras relacionadas