Código HTML para favicon

Etiquetas <link> para todos los dispositivos.

Empieza con Código de favicon

  1. Indica la ruta de tus iconos.
  2. 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.