Saltar al contenido
FlexiConvert

Generador de favicon

Todos los iconos de tu web a partir de tu logo, listos para subir.

Otras herramientas: JPEG a JPG Comprimir JPG Comprimir PNG Comprimir WebP Redimensionar imagen Recortar imagen Unir imágenes

Un archivo cada vez, de hasta 20 MB.

Ajuste al cuadrado

Los iconos son cuadrados. Si tu imagen no lo es, elige si se ve entera (con márgenes transparentes) o si llena el cuadrado.

Para el icono de Apple, que no puede ser transparente, y como color del tema en Android.

Tus archivos se borran automáticamente tras la conversión y, como máximo, una hora después de subirlos. Cómo tratamos tus archivos

Crea el favicon completo de tu web a partir de tu logo: el icono de la pestaña del navegador, el de la pantalla de inicio del iPhone y de Android, el manifiesto y el código HTML para enlazarlos. Sube una imagen PNG, JPG, WebP o SVG y descarga un ZIP con todo, sin registrarte y sin marcas de agua.

Cómo crear un favicon

  1. Selecciona tu logo o icono en PNG, JPG, WebP o SVG; mejor si es cuadrado y de al menos 512 píxeles.
  2. Elige si la imagen se ve entera o llena el cuadrado, y el color de fondo del icono de Apple.
  3. Pulsa «Crear favicon» y descarga el ZIP.
  4. Sube los archivos a la raíz de tu web y pega el código de head.html en la etiqueta head de tus páginas.

Qué incluye el paquete

Archivo Para qué sirve
favicon.ico El icono clásico de la pestaña, con los tamaños de 16, 32 y 48 píxeles en un solo archivo. Lo buscan los navegadores aunque no lo enlaces.
favicon-16x16.png y favicon-32x32.png Los iconos de la pestaña y de los marcadores en los navegadores actuales.
apple-touch-icon.png El icono de 180 píxeles que usan el iPhone y el iPad al añadir tu web a la pantalla de inicio.
android-chrome-192x192.png y android-chrome-512x512.png Los iconos de Android y de las aplicaciones web instalables.
site.webmanifest El manifiesto que declara los iconos de Android y el color de tu web.
head.html Las etiquetas para enlazar los iconos desde tus páginas.

Cómo instalarlo en tu web

  1. Descomprime el ZIP y sube todos los archivos, salvo head.html, a la raíz de tu web (donde está la página de inicio).
  2. Copia estas etiquetas, que también vienen en head.html, dentro de la etiqueta head de tus páginas:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
  1. Si quieres, escribe el nombre de tu web en name y short_name dentro de site.webmanifest.

Los navegadores guardan el favicon en caché: si no ves el nuevo enseguida, recarga la página forzando la actualización o espera un rato.

Encajar o rellenar

Todos los iconos son cuadrados. Si tu imagen no lo es, puedes encajarla, para que se vea entera con márgenes transparentes, o rellenar el cuadrado, recortando lo que sobra por los lados. Para un logo horizontal con texto, suele funcionar mejor usar solo el símbolo del logo, recortado en cuadrado.

El icono de Apple no puede ser transparente: iOS rellenaría el fondo de negro. Por eso lo creamos con el color de fondo que elijas, que también se usa como color de tu web en Android. Los demás iconos conservan la transparencia.

Consejos para que se vea bien

  • Parte de una imagen grande, de al menos 512 × 512 píxeles, o mejor aún de un SVG: los iconos pequeños se calculan a partir de ella.
  • Simplifica: a 16 píxeles no se leen los textos ni los detalles finos. Un símbolo o una inicial con colores contrastados funciona mucho mejor.

Si solo necesitas el archivo .ico, puedes convertir tu PNG a ICO.

Limitaciones

  • Una imagen cada vez, de hasta 20 MB y 100 megapíxeles.
  • No modificamos tu web: tienes que subir los archivos y añadir las etiquetas tú mismo, o pedírselo a quien la gestione.

Preguntas frecuentes

¿Qué tamaño debe tener la imagen para crear un favicon?

Cuanto más grande, mejor: al menos 512 × 512 píxeles, o un SVG. Todos los iconos, del de 512 al de 16 píxeles, se calculan a partir de ella.

¿Dónde tengo que subir los archivos del favicon?

En la raíz de tu web, la misma carpeta de la página de inicio. Después, pega las etiquetas de head.html dentro de la etiqueta head de tus páginas.

¿Por qué no veo el nuevo favicon en mi navegador?

Porque los navegadores guardan el favicon en caché. Recarga la página forzando la actualización, ábrela en una ventana privada o espera un rato a que se renueve.

¿Por qué el icono de Apple tiene fondo de color?

Porque iOS no admite transparencia en los iconos de la pantalla de inicio y rellenaría el fondo de negro. Lo creamos con el color de fondo que elijas para que quede bien.

¿Puedo crear el favicon de mi web en WordPress?

WordPress tiene su propia opción, el «Icono del sitio» (en Apariencia › Personalizar › Identidad del sitio o, según la versión y el tema, en los ajustes generales): subes una imagen cuadrada y genera los tamaños él solo. El paquete de esta herramienta es para webs en las que puedes subir archivos y editar el código.

Convierte también tus PNG, JPG, WebP o SVG