Generador de favicon online

Crear un favicon para tu web

El favicon es el pequeño icono que aparece en la pestaña del navegador, en los marcadores y a veces junto a tu web en los resultados de búsqueda. Este generador de favicon crea todos los archivos a partir de una imagen, unas letras o un emoji: un favicon.ico con tres tamaños, varios PNG, el icono para la pantalla de inicio del móvil, un archivo SVG cuando es posible y el manifiesto de la web. También te da el código HTML. Todo ocurre en tu dispositivo: no se envía ninguna imagen.

Sirve para crear un favicon para la web de un bar de tapas, una academia de idiomas o un club de pádel sin diseñador.

Cómo se usa

1. En «Partir de:», elige «Imagen», «Texto o iniciales» o «Emoji».
2. Con «Imagen», pulsa «Elegir una imagen» (PNG, JPG, SVG o WebP). Con texto, escribe de 1 a 4 caracteres y ajusta la «Fuente», el «Grosor» y el «Color del texto».
3. Ajusta la «Forma» (cuadrada, redondeada o redonda), marca o no «Fondo de color» y elige el «Color de fondo», el «Margen» y el «Tamaño del texto o del emoji».
4. Revisa la «Vista previa a tamaño real» sobre fondo claro y oscuro.
5. Rellena el «Nombre de la web», el «Color del tema», el «Fondo de la pantalla de carga» y la «Carpeta de los archivos en la web».
6. Pulsa «Descargar todo (ZIP)» y después «Copiar el código».

Qué tamaños hacen falta hoy

El favicon.ico se mantiene por compatibilidad: algunos navegadores y herramientas lo buscan directamente en la raíz de la web, aunque no haya ninguna etiqueta. Este contiene tres imágenes: 16, 32 y 48 px. Los PNG de 16, 32 y 48 px los usan los navegadores actuales. El icono de 180 × 180 px aparece cuando alguien añade tu web a la pantalla de inicio del móvil; el propio móvil redondea las esquinas. Los iconos de 192 y 512 px se declaran en el site.webmanifest, con el nombre y los colores, para instalar la web como aplicación. El SVG (origen texto o SVG) se ve nítido a cualquier tamaño.

Ejemplo: una foto de 1.200 × 800 px se recorta en un cuadrado de 800 × 800 px, quitando 200 px a la izquierda y 200 px a la derecha. Con un «Margen» del 10 %, el dibujo ocupa 409,6 px en el icono de 512 y 12,8 px en el de 16.

Dónde colocar los archivos y el código HTML

Sube los archivos del ZIP a la raíz de tu web: el favicon queda en /favicon.ico. Si los guardas en otra carpeta, por ejemplo /iconos/, escríbela en «Carpeta de los archivos en la web» y el código y el manifiesto se actualizan. Después pega las etiquetas en el <head> de cada página.

Consejos de diseño

• Sé sencillo: una letra, dos iniciales o un símbolo. Un logotipo completo es una mancha a 16 px.
• Comprueba que se lee a 16 px, el tamaño de la pestaña.
• Cuida el contraste: fondo de color con texto blanco o muy oscuro.

Por qué el nuevo favicon tarda en aparecer

Los navegadores guardan el favicon en una caché aparte, a veces días. Después de cambiar el icono, abre directamente la dirección /favicon.ico y recárgala, o borra la caché del navegador. Para forzarlo a todos los visitantes, añade ?v=2 al final de cada dirección de archivo en el código HTML. En los resultados de búsqueda, el nuevo favicon solo aparece cuando el buscador vuelve a pasar por tu web.

Preguntas frecuentes

¿Sigue siendo útil el archivo favicon.ico?

Sí. Apenas ocupa y sirve a navegadores antiguos y a herramientas que piden /favicon.ico sin leer el código de la página.

¿Por qué el emoji se ve distinto en mi móvil?

El emoji lo dibuja la fuente del dispositivo que crea el icono. Creado en otro sistema, el mismo emoji tendrá otro aspecto.

Mi imagen es rectangular: ¿qué pasa?

Se conserva el centro y se recorta en un cuadrado, quitando lo mismo de cada lado. Coloca el motivo en el centro.

¿Se guardan mis ajustes y mi imagen?

Los ajustes se guardan en este dispositivo para la próxima visita. La imagen ni se envía ni se guarda.