Heim >Web-Frontend >CSS-Tutorial >Schneller Tipp: Fügen Sie Favicons schnell und einfach zu Ihrem HTML hinzu
Favicon macht Ihre Website raffinierter und leichter zu erkennen. Als Desktop -Clients ermöglichen Betriebssysteme und mobile Geräte, dass Benutzer häufig verwendete Websites für einen einfachen Zugriff pinten, die Bedeutung von Website -Symbolen immer wichtiger. Es ist wichtig, dass die besten Symbole angezeigt werden, wenn die Website überall festgelegt wird.
Die Verwaltung von Website -Symbolen ist jedoch häufig keine leichte Aufgabe. Aufgrund der Fragmentierung von Mobil- und Desktop -Betriebssystemen und Browsern ist es ein langsamer und langwieriger Prozess, die besten Symbole für jedes Gerät bereitzustellen. Abhängig von der benötigten Kompatibilität müssen Sie möglicherweise über 30 Ressourcen verwalten.
Zum Glück kann der echte Favicon Generator -Website -Service dieses Problem lösen. Diese Website bietet Schritt-für-Schritt-Anleitungen, mit denen Sie schnell und einfach alle Website-Symbole und Webressourcen generieren können, die Sie benötigen.
Real Favicon Generator macht den gesamten Prozess einfach und schmerzlos. Sie wählen zunächst das Website -Symbol aus und laden es in den Generator hoch. Sobald die Seite geladen wird, werden verschiedene Bildschirme für verschiedene Geräteziele angezeigt.
Viele Abschnitte bieten ähnliche Optionen, z. Hier sind die Hauptbildschirme, die Sie für iOS-, Android- und andere (Windows/Safari) -Geräte anpassen können.
Die intuitive Schnittstelle erleichtert die Anpassung der Website -Symbole und Sie können die Anzeige der Symbole genau sehen, nachdem Sie die Website an das Gerät festgehalten haben.
<meta>
Zusätzlich zum tatsächlichen Website -Symbol über das Erstellen von Manifestdateien für mobiles Chrome sowie andere Einstellungen, mit denen Tags in Safari angewendet werden können. Diese Werte werden schließlich in der endgültigen Ausgabe in das
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche "generieren". Sobald die Seite geladen wird, wird der ursprüngliche HTML -Code angegeben, den Sie zur Website hinzufügen müssen. Hier ist ein Ausgabebeispiel:
<code class="language-html"><link href="/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57"> <link href="/apple-touch-icon-60x60.png" rel="apple-touch-icon" sizes="60x60"> <link href="/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72"> <link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76"> <link href="/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114"> <link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120"> <link href="/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144"> <link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152"> <link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180"> <link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"> <link href="/android-chrome-192x192.png" rel="icon" sizes="192x192" type="image/png"> <link href="/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png"> <link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"> <link href="/manifest.json" rel="manifest"> <link color="#cc0033" href="/safari-pinned-tab.svg" rel="mask-icon"> <meta content="Web Bird Digital" name="apple-mobile-web-app-title"> <meta content="Web Bird Digital" name="application-name"> <meta content="#cc0033" name="msapplication-TileColor"> <meta content="/mstile-144x144.png" name="msapplication-TileImage"> <meta content="#cc0033" name="theme-color"></code>
Der Generator <link>
erstellt alle <meta>
und
/images/favicons
Jetzt können Sie Ihre Dateien abrufen, indem Sie einfach auf die Schaltfläche "Favicon -Paket" klicken. Nach dem Herunterladen entpacken Sie sie einfach irgendwo und kopieren Sie diese Symbole auf Ihre Website. Als Teil des Build -Prozesses können Sie das Verzeichnis angeben.
Nach dem Kopieren der Datei und dem Hinzufügen von HTML -Code in den Abschnitt der Website können Sie gehen. Wenn Sie Ihre Website auf Ihr Gerät anbinden, gibt Ihre Website den Benutzern das am besten aussehende Website-Symbol. Wenn Sie diesen Service nützlich finden und Ihre Zeit sparen, können Sie in Betracht ziehen, Geld als Dankeschön zu spenden (sie akzeptieren sogar Bitcoin!).
Zusätzlich zum Generieren von Website -Symbolen kann der echte Favicon Generator -Service überprüfen, ob Ihre Website alle erforderlichen Website -Symbole bereitstellt, und geben an, was Ihnen möglicherweise fehlt.
Die Support für Website -Ikonen entwickelt sich ständig weiter. Daher ist es ein hervorragendes Tool, um sicherzustellen, dass Sie die besten Website -Symbole und -Ressourcen bereitstellen.
(Der FAQ-Teil wird hier weggelassen, da dieser Teil des Inhalts eine direkte Erklärung ist und der pseudooriginale Wert niedrig ist. Beibehaltung erhöht die Länge des Artikels und hat den Gesamtinhalt nicht viel Gewinn.)
Bild zu Beginn des Artikels hinzugefügt: (Angenommen, dies ist ein Bild, das sich auf Favicon bezieht)
Das obige ist der detaillierte Inhalt vonSchneller Tipp: Fügen Sie Favicons schnell und einfach zu Ihrem HTML hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!