FaviconKit
Gratis · Sin registro · Se ejecuta en tu servidor

Genera Favicons Perfectos desde Cualquier Imagen

Convierte tus imágenes en favicons profesionales con soporte para SVG, PNG, JPG y todos los formatos principales. Descarga un paquete completo con todos los tamaños para una visualización impecable en cualquier dispositivo y navegador.

Ultrarrápido· Soporte SVG· Múltiples formatos
Empezar a convertir

Sube tu imagen

Arrastra y suelta una imagen o haz clic para explorar. Generamos todos los tamaños de favicon que necesitas.

Suelta tu imagen aquí

o haz clic para explorar archivos

Elegir archivo
PNGJPGGIFWEBPBMPSVGICO≤10MB
Generando tu paquete de favicons…
Lo sentimos, no se pudo procesar ese archivo. Usa un PNG, JPG, GIF, WebP, BMP o SVG cuadrado menor de 10 MB.
favicon preview

Tu paquete de favicons está listo

ZIP con ICO, PNG, icono Apple, iconos Android y manifiesto web.

Descargar paquete de favicons

Generador de Favicon desde Texto

Convierte letras o texto corto en un favicon limpio. Escribe tus iniciales, elige colores y forma, vista previa en vivo y descarga el paquete completo.

Generador de Favicon desde Emoji

Convierte cualquier emoji en un favicon. Elige un emoji, la forma y el color de fondo, vista previa en vivo y descarga el paquete completo.

Editor de favicons en píxeles

Dibuja tu propio favicon píxel a píxel en una cuadrícula de 16×16 a 64×64. Lápiz, borrador y relleno por inundación con deshacer/rehacer, y exporta un paquete completo ICO, PNG y Apple/Android.

Descargador de Favicons

Introduce la URL de cualquier sitio web para obtener y descargar su favicon en formatos PNG e ICO.

Verificador de Favicons

Introduce la URL de cualquier sitio para auditar al instante su configuración: favicon.ico, Apple touch icon, SVG y manifiesto web. Obtén una puntuación de salud en segundos.

Todo lo que Necesitas para Favicons Perfectos

Un generador profesional con todas las herramientas y formatos para crear iconos nítidos que funcionan en todas partes.

Ultrarrápido

Procesa imágenes en segundos con un motor de conversión optimizado. Sin esperas ni demoras.

Soporte SVG

Soporte completo para archivos SVG con optimización y escalado para resultados perfectos.

Todos los dispositivos

Genera favicons para escritorio, móviles, tabletas y PWA con todos los tamaños necesarios.

Paquete completo

Descarga todo: ICO, PNG, iconos Apple touch y un manifiesto web.

Múltiples formatos

Soporte para PNG, JPG, GIF, WebP, BMP y SVG: convierte desde cualquier formato popular.

Listo para usar

Obtén fragmentos HTML e instrucciones de instalación para implementar de inmediato.

Multi-navegador

Compatibilidad total con Chrome, Firefox, Safari, Edge y todos los navegadores modernos.

Alta calidad

El procesamiento avanzado mantiene los favicons nítidos a cualquier tamaño.

Profesional

Genera el paquete estándar de la industria que usan los mejores sitios del mundo.

8+
Formatos compatibles
6
Tamaños de favicon
100%
Compatible con navegadores
0s
Tiempo de proceso

Guía de Instalación Sencilla

Sigue estos sencillos pasos para añadir tus nuevos favicons a tu sitio web.

1

Descarga el paquete de favicons

Usa el generador superior para crear y descargar tu paquete completo como un archivo ZIP.

2

Extrae los archivos

Extrae todo el contenido del ZIP en la raíz de tu sitio web (la misma carpeta que index.html).

3

Añade el código HTML

Copia el código HTML siguiente y pégalo dentro de la sección <head> de tus páginas.

4

Prueba tus favicons

Publica tu sitio y confirma que el favicon aparece en pestañas, marcadores y en el móvil.

Código de integración para tu framework

Elige tu stack y copia el código listo. Los archivos van en la raíz (o en app/ para Next.js App Router).

index.html
<link rel="icon" href="/favicon.ico" sizes="any">
<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
// app/layout.tsx
// 1. Drop these files into app/ (Next.js auto-detects them):
//    - favicon.ico, icon.png, icon.svg, apple-icon.png
// 2. For extra PNG sizes + a manifest, declare them here:
import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en"><body>{children}</body></html>
  )
}
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <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" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  )
}
// Vue (public/index.html) — put files in public/
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

// Nuxt 3 (nuxt.config.ts)
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
})
// 1. npm i gatsby-plugin-manifest
// 2. gatsby-config.js — point icon at a 512x512 PNG
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'Your App Name',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
        icon: 'src/images/android-chrome-512x512.png',
      },
    },
  ],
}

// Also copy favicon.ico to the static/ folder for the browser fallback.
// src/app.html — files live in static/
<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display:contents">%sveltekit.body%</div>
  </body>
</html>
¿Dónde van los archivos? Coloca favicon.ico, icon.png y apple-icon.png directamente en la carpeta app/. Next.js los detecta automáticamente, sin etiquetas link manuales.
site.webmanifest
{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Archivos incluidos

Tu paquete de favicons contiene los siguientes archivos.

favicon.icofavicon-16x16.pngfavicon-32x32.pngapple-touch-icon.pngandroid-chrome-192x192.pngandroid-chrome-512x512.pngfavicon.svgsite.webmanifest

Consejos profesionales

  • Mantén todos los archivos favicon en la raíz de tu sitio para la mejor compatibilidad.
  • Actualiza con fuerza (o borra la caché) tras cambiar los favicons para ver el cambio al instante.
  • Prueba tu favicon en varios dispositivos y navegadores para asegurar que se ve bien.

Preguntas Frecuentes

Respuestas a preguntas comunes sobre la generación e implementación de favicons.

¿Qué formatos de imagen se admiten?
Puedes subir PNG, JPG, GIF, WebP, BMP o SVG. Para el resultado más nítido empieza con una imagen cuadrada de al menos 512×512. Se aceptan archivos de hasta 10 MB.
¿Qué tamaño debe tener la imagen original?
Lo ideal es una imagen cuadrada de 512×512 o mayor. El generador la reduce limpiamente, así que una fuente grande y nítida da los iconos pequeños más atractivos.
¿Admiten favicons SVG?
Sí. El SVG se conserva como un favicon.svg vectorial para navegadores modernos y también se rasteriza en todos los tamaños PNG e ICO para navegadores antiguos.
¿Qué tamaños de favicon se generan?
El paquete incluye PNG de 16×16 y 32×32, un favicon.ico multi-resolución, un Apple touch icon de 180×180, iconos Android/PWA de 192 y 512, y un manifiesto web.
¿Cómo añado el favicon a mi sitio web?
Extrae el ZIP en la raíz de tu sitio y pega el fragmento HTML en el <head> de tus páginas. Arriba hay instrucciones completas y código por framework.