Genere favicons perfectos desde cualquier imagen
Transforme sus imágenes en favicons profesionales con soporte para SVG, PNG, JPG y todos los formatos principales. Genere paquetes completos de favicon con múltiples tamaños para una compatibilidad perfecta en todos los dispositivos y navegadores.
Suelte su imagen aquí
o haga clic para explorar archivos
Todo lo que necesita para favicons perfectos
Nuestro generador de favicon profesional proporciona todas las herramientas y formatos que necesita para crear favicons impresionantes que funcionen en todas partes.
Guía de instalación fácil
Siga estos simples pasos para agregar sus nuevos favicons a su sitio web
Descargar paquete de favicon
Use nuestro generador anterior para crear y descargar su paquete completo de favicon como un archivo ZIP.
Extraer archivos
Extraiga todos los archivos del ZIP y colóquelos en el directorio raíz de su sitio web (la misma carpeta que index.html).
Agregar código HTML
Copie el código HTML a continuación y péguelo en la sección <head> de sus páginas HTML.
Pruebe sus favicons
Implemente su sitio web y verifique que los favicons aparezcan correctamente en pestañas del navegador, marcadores y dispositivos móviles.
Código de integración para su framework
Elija su stack y copie el código listo para pegar. Los archivos van en la raíz de su sitio (o app/ para Next.js App Router).
¿Dónde van los archivos? Drop favicon.ico, icon.png, apple-icon.png directly into the app/ folder. Next.js auto-detects them — no manual link tags needed.
// 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,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}{
"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"
}Consejos profesionales
- Coloque todos los archivos de favicon en el directorio raíz de su sitio web para la mejor compatibilidad
- Borre la caché de su navegador después de actualizar los favicons para ver los cambios inmediatamente
- Pruebe sus favicons en diferentes dispositivos y navegadores para asegurar que se muestren correctamente
Preguntas frecuentes
Obtenga respuestas a preguntas comunes sobre la generación e implementación de favicon
¿Todavía tiene preguntas?
¿No encuentra la respuesta que busca? ¡Estamos aquí para ayudar!