Lección: 08 Comó poner ICONO en nuestra PESTAÑA en la PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK

08 Comó poner ICONO en nuestra PESTAÑA en la PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK

Duración: 6 min

Módulo: 🏗️ Módulo de Fundamentos y Diseño Base Lección 8 de 18

Descripción

🐾 Lección 08: Cómo Poner un Ícono (Favicon) en la Pestaña del Navegador

Esta lección enseña la importancia estética y de marca (branding) de añadir un ícono personalizado (conocido como Favicon) a la pestaña del navegador. El instructor muestra cómo gestionar recursos estáticos en Laravel y cómo hacer la referencia correcta usando la función nativa del framework.

1. 🎯 Importancia del Favicon y Preparación [00:27]

Se explica la razón para personalizar el ícono que aparece junto al título de la página en la pestaña:

Identidad Visual: Es fundamental para diferenciar la plataforma de otras páginas y dar una mejor impresión al usuario [01:10].
Gestión de Archivos Estáticos: Se establece que todas las imágenes, CSS y JavaScript que se usen en el frontend deben guardarse dentro del directorio public de Laravel [02:28].
- Para una mejor organización, se crea una subcarpeta llamada img dentro de public para almacenar todos los recursos gráficos [02:47].
Formato de Imagen: El instructor guarda la imagen seleccionada como un archivo .png con transparencia [02:10].

2. 🔗 Referencia del Ícono con la Función asset() [03:13]

Se introduce la manera correcta de referenciar recursos estáticos en Laravel para asegurar que el enlace funcione tanto en el entorno local como en producción:

Etiqueta HTML: Se utiliza la etiqueta <link rel="icon"> dentro del <head> del archivo index.blade.php [01:31].
Función asset() de Laravel: En lugar de una ruta relativa simple, se usa la función Blade {{ asset(...) }} [03:30].
- Propósito: asset() genera automáticamente la ruta completa que apunta al directorio public, sin importar el dominio o subdominio en el que se aloje la aplicación [04:47].
- Sintaxis: Se especifica la ruta a partir de public: {{ asset('img/icono.png') }}.

3. 📱 Beneficios Adicionales [05:16]

Se resalta un beneficio secundario de usar un favicon de calidad y en un formato adecuado:

Atajo en Móviles: Este ícono es el mismo que se utiliza si el usuario decide crear un acceso directo de la página en la pantalla de inicio de su dispositivo móvil, dando la apariencia de una aplicación nativa [05:40].
Verificación: Al finalizar, se verifica que el ícono (un cachorro en este caso) aparece correctamente en la pestaña del navegador [04:23].

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Hilari Web