Empieza con Código de favicon
- Indica la ruta de tus iconos.
- Copia las etiquetas en el <head>.
Resultado de ejemplo
Datos de referencia:
- Carpeta de los iconos: /
- Color del tema: #1f5eff
- Tengo favicon.svg: Sí
- Incluir manifest.webmanifest: Sí
Resultado:
HTML:
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#1f5eff">
manifest.webmanifest:
{
"name": "Mi sitio",
"short_name": "Sitio",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#1f5eff",
"background_color": "#ffffff",
"display": "standalone"
}Información útil
- ¿Qué tamaños necesito?
- favicon.ico (16/32), SVG, PNG 192 y 512 para Android/manifest y apple-touch-icon de 180 px.