Fügen Sie Favicon zu React-Anwendungen hinzu
-
Hinzufügen von Favicon zu React-Anwendungen mit
react-favicon -
Hinzufügen von Favicon zu React-Anwendungen mit
html-webpack-plugin
Modul-Bundler wie Webpack ermöglichen es, moderne Anwendungen zu erstellen, indem wichtige Front-End-Assets wie Bilder, Schriftarten und Stylesheets in einer Ausgabedatei kombiniert werden.
Favicon ist eines dieser visuellen Elemente, die in vielen Webanwendungen verwendet werden. Es ist das Symbol, das neben dem Titel einer Webseite im Browser-Tab angezeigt wird.
Es kann nützlich sein, Ihrer Website ein Branding hinzuzufügen und sie von Mitbewerbern abzuheben. In diesem Artikel erfahren Sie, wie Sie mithilfe von Webpack Favicons zu React-Anwendungen hinzufügen.
Hinzufügen von Favicon zu React-Anwendungen mit react-favicon
Dies ist wahrscheinlich der einfachste Weg, das Favicon zu React-Apps hinzuzufügen. Um das Favicon Ihrer App zu aktualisieren, müssen Sie nur eine Favicon-Komponente importieren und ihr url-Attribut gleich der URL des Bildes setzen, das Sie als Favicon verwenden möchten.
Beispiel:
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>
);
}
Unsere gesamte React-Anwendung besteht in diesem Beispiel aus einer App-Komponente. Wir importieren die Komponente Favicon aus dem Paket 'react-favicon' und binden sie in den Hauptcontainer <div> ein.
Wir können die Komponente überall in unseren Komponentenbaum aufnehmen, und das Favicon Ihrer Website wird trotzdem aktualisiert. Dann setzen wir das Attribut url auf ein Bild (das ein Google-Logo ist).
Wenn Sie diese Live-Demo öffnen, sehen Sie, dass das Favicon Ihrer App tatsächlich auf das Google-Logo eingestellt ist.
Hinzufügen von Favicon zu React-Anwendungen mit html-webpack-plugin
Alternativ können Sie das Tool html-webpack-plugin installieren, um Ihre Webpack-Modulpakete im <head>-Bereich Ihrer Website aufzunehmen und sie nach Bedarf zu verwenden.
Nach der Installation müssen Sie die webpack.config.js bearbeiten. Suchen Sie die Eigenschaft plugins, die normalerweise ein Array ist.
Fügen Sie diesem Array den folgenden Wert hinzu:
new HtmlWebpackPlugin({favicon: './src/favicon.gif'})
Damit diese Lösung funktioniert, müssen Sie die Datei favicon.gif zum Ordner src Ihres React-App-Projekts hinzufügen.
Dadurch wird die Favicon-Datei im Erstellungsordner und in der endgültigen Ausgabe Ihrer Seite verfügbar gemacht.
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