Favicon y Apple Touch Icon
Añada iconos que aparezcan en las pestañas del navegador y en las pantallas de inicio
Favicon y Apple Touch Icon es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué es un favicon?
Un favicon es el pequeño icono que aparece en:
- Las pestañas del navegador
- Las listas de marcadores
- El historial del navegador
- Los resultados de búsqueda (a veces)
Ayuda a los usuarios a identificar su sitio de un vistazo entre varias pestañas abiertas.
Enlace básico de favicon
Añada un favicon con un elemento link en head:
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>Formatos de favicon
Estrategia recomendada para los formatos de favicon:
- SVG — vectorial, escala perfectamente y tiene un tamaño de archivo pequeño (úselo primero)
- PNG 32x32 — alternativa para los navegadores que no admiten SVG
- ICO — formato heredado que contiene tamaños de 16x16 y 32x32
Ubicación del archivo ICO
El archivo favicon.ico en la raíz del dominio se obtiene automáticamente:
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">Atributo sizes
El atributo sizes especifica las dimensiones del icono:
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">Icono Apple Touch
El icono Apple Touch aparece cuando los usuarios añaden su sitio a la pantalla de inicio de iOS:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->Iconos maskable para Android
Las PWA de Android usan iconos maskable que rellenan la forma del icono:
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->Favicon para modo oscuro
Proporcione un favicon SVG compatible con el modo oscuro:
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->Web App Manifest para iconos de PWA
Configuración completa de iconos para Progressive Web Apps:
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->Configuración completa del favicon
Una configuración moderna y completa del favicon:
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>Probar los favicons
Cómo verificar la configuración del favicon:
- Haga una recarga forzada (Ctrl+Shift+R / Cmd+Shift+R) para borrar el favicon almacenado en caché
- Use la herramienta Favicon Checker (realfavicongenerator.net)
- Pruebe el icono Apple Touch en un dispositivo iOS real
- Compruebe el manifest de PWA con Lighthouse → auditoría de PWA
Comprobación rápida
¿Cuál es el tamaño recomendado para las imágenes del icono Apple Touch?
Recapitulación: favicons
Aspectos esenciales de los favicons:
- Favicon SVG — moderno, escalable y compatible con el modo oscuro
- PNG 32x32 — alternativa para los navegadores sin compatibilidad con SVG
- ICO en la raíz — alternativa heredada para IE
apple-touch-icon180×180 — pantalla de inicio de iOS- Web app manifest — iconos de PWA para Android (192px y 512px)
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Favicon y Apple Touch Icon» es gratis?
Sí — el texto completo de «Favicon y Apple Touch Icon» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Favicon y Apple Touch Icon»?
Añada iconos que aparezcan en las pestañas del navegador y en las pantallas de inicio Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Favicon y Apple Touch Icon»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- title y su función en SEO
- meta charset viewport author y description
- URL canónicas y meta robots
- Favicon y Apple Touch Icon