Generador de favicons: crea un favicon gratis online

Un favicon es el pequeño icono de una web. Aparece en la pestaña del navegador, en los marcadores y como icono de la aplicación en la pantalla de inicio de los móviles. Para que se vea nítido en todas partes, una web necesita varios tamaños: el generador crea 16, 32 y 48 px en favicon.ico, 180 px para iOS y 192 y 512 px para Android.

El generador de favicons es gratuito y no requiere cuenta. Tu imagen no se sube: todo se genera mediante la API Canvas en tu navegador, sin enviar ni guardar nada en un servidor. La imagen puede tener hasta 15 MB.

Obtienes favicon.ico con tamaños de 16, 32 y 48 px en un solo archivo, apple-touch-icon.png (180 × 180), android-chrome-192x192.png, android-chrome-512x512.png y site.webmanifest. Puedes descargar cada archivo por separado o todos juntos como favicon-package.zip. También recibes un fragmento HTML de 6 líneas para el <head> de tu página: incorpora todos los archivos y termina con el color del tema, por ejemplo, <meta name="theme-color" content="#18e888"> si el color es #18e888.

No hay un único tamaño: la pestaña del navegador muestra 16 × 16 px; la barra de tareas de Windows, 32 × 32 px; y el Explorador y los accesos directos, 48 × 48 px. iOS usa 180 × 180 px para la pantalla de inicio, y Android, 192 × 192 y 512 × 512 px. El generador crea todos estos tamaños a partir de una imagen. Como los detalles finos y los textos largos se pierden a 16 × 16 px, la vista previa te muestra los tamaños de 16, 32 y 48 px a tamaño real y los iconos más grandes reducidos antes de que incorpores los archivos.

Sube la imagen en la pestaña «Subir imagen». Arrastra para mover el recorte, aplica un zoom entre el 50 y el 250 % y, si quieres, recorta automáticamente los bordes transparentes. El generador reúne los tamaños de 16, 32 y 48 px en un auténtico favicon.ico de varios tamaños y crea los iconos PNG para iOS y Android. Lo ideal es empezar con una imagen cuadrada de al menos 512 × 512 px, ya que ese es el mayor tamaño generado.

Sí. En la pestaña «Texto o emoji» puedes introducir hasta 4 caracteres; lo ideal es usar 1 o 2 letras o un solo emoji. Elige el color de fondo, el color del texto, la forma —redondeada, cuadrada o circular— y un tamaño de texto entre el 25 y el 80 %. Obtendrás los mismos archivos que con una imagen subida.

Sube favicon.ico, apple-touch-icon.png, los dos iconos de Android Chrome y site.webmanifest al directorio raíz de tu web, ya que el fragmento HTML apunta a rutas como /favicon.ico y /site.webmanifest. Después, copia el fragmento en el <head> de tus páginas. Si no editas el <head> directamente, por ejemplo, en WordPress, sube allí un icono para tu web, como android-chrome-512x512.png. La herramienta no se conecta directamente a tu web ni a tu CMS.

Siempre rellena el fondo del icono Apple Touch, porque iOS no procesa de forma fiable las transparencias en ese icono. Si «Fondo transparente» está desactivado, también rellena favicon.ico y los iconos de Android. Además, figura como theme_color y background_color en site.webmanifest y como metaetiqueta theme-color en el fragmento HTML.