Guías de favicons
Respuestas concretas a las preguntas que surgen al crear un favicon: qué tamaños, qué formatos y qué código pegar.
Tamaños de favicon: formatos y usos
Buscar «tamaño favicon» sigue mostrando listas de quince archivos heredadas de 2014. En la práctica, hoy bastan seis dimensiones para cubrir pestañas, resultados de búsqueda, iOS, Android y PWA. Estas son y estos son sus motivos.
Leer la guíaConvertir un PNG a ICO gratis
El .ico sigue siendo el formato esperado en la raíz de un sitio y la mayoría de los conversores en línea te piden enviar tu imagen a su servidor. Así puedes obtener un favicon.ico correcto con varios tamaños a partir de un PNG, sin subir nada.
Leer la guíaapple-touch-icon: tamaño, formato y código
El icono Apple Touch proporciona explícitamente la imagen que se usa cuando un visitante añade tu sitio a la pantalla de inicio de su iPhone. Es independiente del favicon de pestaña y de los iconos declarados en el manifiesto web.
Leer la guíaFavicon en modo oscuro con SVG
Un logo negro sobre fondo transparente queda perfecto en una pestaña clara y resulta invisible en una oscura. El formato ICO no puede adaptarse, pero el favicon SVG sí: incluye una regla CSS que cambia los colores según el tema del navegador.
Leer la guíaAñadir un favicon en HTML
Un favicon HTML fiable depende de un pequeño conjunto de archivos accesibles y de enlaces colocados en el head. Este procedimiento cubre las pestañas modernas, los clientes antiguos y los accesos directos móviles sin multiplicar las variantes históricas.
Leer la guíaFavicon ausente o sin actualizar
Cuando falta un favicon, el archivo no siempre es el culpable. El navegador, una CDN, un service worker y un motor de búsqueda pueden conservar versiones diferentes. Un diagnóstico ordenado evita modificar varios elementos a la vez.
Leer la guíaFavicons con Next.js App Router
App Router puede generar las etiquetas de iconos a partir de archivos convencionales o del objeto metadata. Ambos métodos son válidos, pero mezclarlos sin una regla clara puede crear fácilmente declaraciones en conflicto.
Leer la guíaGuía del favicon SVG
El SVG mantiene los contornos nítidos a cualquier densidad y puede adaptar sus colores al tema. Esta flexibilidad tiene una condición: el archivo debe ser autónomo, sencillo y legible en un espacio diminuto.
Leer la guía