Volver a tutoriales

Cómo añadir favicons

Cómo añadir favicons al proyecto con distintos frameworks y métodos. Guía de instalación paso a paso, con ejemplos de código para HTML, Next.js, Nuxt.js, React, Vue.js y SvelteKit.

Antes de empezar

Primero, diseña el favicon en la página de inicio y descarga el paquete ZIP completo. El ZIP incluye todos los tamaños que necesitas.

Tras descargarlo, descomprime el ZIP. Dentro están todos los archivos. Colócalos en el directorio public del proyecto (static en SvelteKit, o el directorio raíz si usas HTML puro).

Con los archivos en su sitio, sigue las instrucciones de abajo para añadir los enlaces HTML según el framework que uses.

Guías de instalación por framework

HTML puro

Coloca todos los archivos en el directorio raíz del sitio (o en public si usas un generador de sitios estáticos) y añade estos enlaces en el head del archivo HTML:

<link rel="icon" type="image/x-icon" sizes="16x16 32x32 48x48" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Next.js

Coloca todos los archivos en el directorio public y añade los metadatos en app/layout.tsx o pages/_document.tsx:

// app/layout.tsx (App Router)
import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: '16x16 32x32 48x48' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-48x48.png', sizes: '48x48', type: 'image/png' },
      { url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
      { url: '/favicon-180x180.png', sizes: '180x180', type: 'image/png' },
      { url: '/favicon-192x192.png', sizes: '192x192', type: 'image/png' },
      { url: '/favicon-512x512.png', sizes: '512x512', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
}

O usa el componente next/head en Pages Router:

// pages/_document.tsx (Pages Router)
import Head from 'next/head'

export default function Document() {
  return (
    <Head>
      <link rel="icon" type="image/x-icon" href="/favicon.ico" />
      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
      <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
      <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
      <link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png" />
      <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
      <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />
      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    </Head>
  )
}

Nuxt.js

Coloca todos los archivos en el directorio public y configúralo en nuxt.config.ts o app.vue:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'icon', type: 'image/png', sizes: '48x48', href: '/favicon-48x48.png' },
        { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
        { rel: 'icon', type: 'image/png', sizes: '180x180', href: '/favicon-180x180.png' },
        { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon-192x192.png' },
        { rel: 'icon', type: 'image/png', sizes: '512x512', href: '/favicon-512x512.png' },
        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      ],
    },
  },
})

O usa useHead en app.vue:

// app.vue
<script setup>
useHead({
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
    { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
    { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
    { rel: 'icon', type: 'image/png', sizes: '48x48', href: '/favicon-48x48.png' },
    { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
    { rel: 'icon', type: 'image/png', sizes: '180x180', href: '/favicon-180x180.png' },
    { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon-192x192.png' },
    { rel: 'icon', type: 'image/png', sizes: '512x512', href: '/favicon-512x512.png' },
    { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
  ],
})
</script>

React (Create React App / Vite)

Coloca todos los archivos en el directorio public y actualiza public/index.html:

<!-- public/index.html -->
<head>
  <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="48x48" href="%PUBLIC_URL%/favicon-48x48.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="180x180" href="%PUBLIC_URL%/favicon-180x180.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/favicon-192x192.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="%PUBLIC_URL%/favicon-512x512.png" />
  <link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />
</head>

Vue.js (Vite)

Coloca todos los archivos en el directorio public y actualiza index.html:

<!-- index.html -->
<head>
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="180x180" href="/favicon-180x180.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>

SvelteKit

Coloca todos los archivos en el directorio static y actualiza src/app.html:

<!-- src/app.html -->
<head>
  <link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="48x48" href="%sveltekit.assets%/favicon-48x48.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="%sveltekit.assets%/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="180x180" href="%sveltekit.assets%/favicon-180x180.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="%sveltekit.assets%/favicon-192x192.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="%sveltekit.assets%/favicon-512x512.png" />
  <link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
</head>