Agregue Favicon a las aplicaciones React
-
Agregue Favicon a las aplicaciones React usando
react-favicon -
Agregue Favicon a las aplicaciones React usando
html-webpack-plugin
Los paquetes de módulos como Webpack hacen posible la creación de aplicaciones modernas mediante la combinación de importantes recursos frontales como imágenes, fuentes y hojas de estilo en un archivo de salida.
Favicon es uno de esos activos visuales utilizados en muchas aplicaciones web. Es el icono que aparece junto al título de una página web en la pestaña del navegador.
Puede ser útil agregar una marca a su sitio web y distinguirlo de la competencia. Este artículo explorará cómo agregar favicons a las aplicaciones React usando Webpack.
Agregue Favicon a las aplicaciones React usando react-favicon
Esta es probablemente la forma más fácil de agregar el favicon a las aplicaciones de React. Para actualizar el favicon de su aplicación, solo tiene que importar un componente Favicon y establecer su atributo url igual a la URL de la imagen que desea usar como favicon.
Ejemplo:
import Favicon from "react-favicon";
export default function App() {
return (
<div className="App">
<Favicon url="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg"></Favicon>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
Toda nuestra aplicación React consta de un componente App en este ejemplo. Importamos el componente Favicon del paquete 'react-favicon' y lo incluimos en el contenedor principal <div>.
Podemos incluir el componente en cualquier lugar de nuestro árbol de componentes, y seguirá actualizando el favicon de su sitio web. Luego establecemos el atributo url a una imagen (que es un logotipo de Google).
Si abre esta demostración en vivo, verá que el icono favorito de su aplicación está configurado con el logotipo de Google.
Agregue Favicon a las aplicaciones React usando html-webpack-plugin
Alternativamente, puede instalar la herramienta html-webpack-plugin para contener sus paquetes de módulos Webpack en la sección <head> de su sitio web y usarlos según sea necesario.
Una vez instalado, tendrás que editar el webpack.config.js. Encuentra la propiedad plugins, que suele ser una matriz.
Agregue el siguiente valor a esa matriz:
new HtmlWebpackPlugin({favicon: './src/favicon.gif'})
Para que esta solución funcione, deberá agregar el archivo favicon.gif a la carpeta src de su proyecto de aplicación React.
Esto hará que el archivo favicon esté disponible en la carpeta de compilación y estará disponible en el resultado final de su página.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn