578

Ich habe an einer Website gearbeitet und möchte dem Browser-Tab ein kleines Symbol hinzufügen.

Wie kann ich das in HTML machen und wo im Code müsste ich es platzieren (zB Header)? Ich habe eine .pngLogo-Datei, die ich in ein Symbol konvertieren möchte.

html icons favicon Knookie
quelle

1

Überprüfen Sie den Link für weitere Informationen. Du bist auf dem richtigen Weg.

Reggie

Laden Sie das Bild (favicon.ico) mit FTP (lesen Sie unser FTP-Tutorial) in den Stammbereich Ihrer Website hoch. Der Stammabschnitt ist der Hauptdateibereich, in dem Sie die Datei index.html (index.asp, index.php usw.) für Ihre Hauptseite speichern würden. davesite.com wäre das Stammverzeichnis davesite.com/webstation wäre nicht das Stammverzeichnis davesite.com/webstation/html ist auch nicht das Stammverzeichnis. Diese Datei wird ordnungsgemäß platziert und als Standard für Ihre gesamte Domain geladen.

Knookie

Drücken Sie dort vorzeitig die Eingabetaste - trotzdem danke für die Antwort. Wollte ich nur sagen, dass der erste Teil (den ich oben eingefügt habe) in dem von Ihnen angegebenen Link nicht zu funktionieren schien? Der zweite Teil funktionierte jedoch perfekt - danke

Knookie

3

Hier sind die Empfehlungen von w3.org mit der Warnung, dass IE vor IE11 .png nicht als Lieblingssymbole unterstützt .

Denys Séguret

416

Es gibt zwei Möglichkeiten, einer Website ein Favicon hinzuzufügen.

`<link rel="icon">`

Fügen Sie dem <head>Element einfach den folgenden Code hinzu :

<link rel="icon" href="http://example.com/favicon.png">

PNG-Favoriten werden von den meisten Browsern mit Ausnahme von IE <= 10 unterstützt . Aus Gründen der Abwärtskompatibilität können Sie ICO-Favicons verwenden.

Beachten Sie, dass Sie nicht vorangehen müssen , um iconin relmit dem Attributshortcut mehr. Aus MDN-Verbindungstypen :

Der shortcutLink-Typ wird oft schon früher gesehen icon, aber dieser Link-Typ ist nicht konform, wird ignoriert und Webautoren dürfen ihn nicht mehr verwenden .

`favicon.ico` im Stammverzeichnis

Aus einer anderen SO-Antwort (von @mercator ):

Alle modernen Browser (getestet mit Chrome 4, Firefox 3.5, IE8, Opera 10 und Safari 4) fordern immer eine an, es favicon.icosei denn, Sie haben ein Verknüpfungssymbol über angegeben <link>.

Alles, was Sie tun müssen, ist, die /favicon.icoAnfrage an Ihre Website zu senden, um Ihr Favicon zurückzugeben. Mit dieser Option können Sie leider kein PNG-Symbol verwenden.

Siehe auch favicon.png vs favicon.ico - warum sollte ich PNG anstelle von ICO verwenden?

Michał Perłakowski
quelle

1

Wenn Sie ALLE Symbole automatisch (einschließlich mobiler Symbole, Symbole zum Hinzufügen zum Startbildschirm, mobile Lesezeichen, iOS / Droid, Desktop-Tab usw.), Generierung von ICO-Dateien usw. sowie kopierbaren HTML-Code für diese Metadateien möchten, Alle mit einem Klick können Sie dieses praktische Tool verwenden (ich bin nicht verbunden) realfavicongenerator.net

Albert Renshaw

2

Möchten Sie hinzufügen: Ihr Symbol sollte quadratisch sein, dh die Breite entspricht der Höhe.

Nguyen Tan Dat

3

Vergessen Sie nicht, beim Testen Strg + F5 zu drücken. Manchmal wird es zwischengespeichert.

Hairi

Ich habe nicht festgestellt, dass das einfache Platzieren einer ICO-Datei mit dem Namen favicon.ico im Stammverzeichnis meiner Site dazu führte, dass FireFox oder Chrome sie luden. Also bin ich den <link relWeg gegangen . ABER die Adresse meiner Site ist nicht zuverlässig in DNS aufgeführt, daher kann ich mich nicht darauf verlassen href="http://example.com", sie abzurufen. Also kam ich zu dieser Lösung in meiner index.htmDatei:<link rel="icon" href="favicon.ico">

CODE-REaD

426

Verwenden Sie ein Tool, um Ihr PNG in eine ICO-Datei zu konvertieren. Sie können nach "Favicon Generator" suchen und viele Online-Tools finden.

Geben Sie die ico-Adresse in das headmit einem link-tag ein:

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

Gustavo Costa De Oliveira
quelle

3

Vielen Dank! Ich habe die Schritte ordnungsgemäß ausgeführt und es funktioniert wirklich gut in IE und Firefox, aber aus irgendeinem Grund funktioniert es nicht in Google Chrome. Muss ich den Cache löschen? oder was muss ich von dort aus tun?

PatrickGamboa

1

Ich benutze gerne das Photoshop Plugin: telegraphics.com.au/svn/icoformat/trunk/dist/README.html

Ben_Coding

2

Der "Verknüpfungsteil" kann unter vielen Umständen entfernt werden: stackoverflow.com/questions/13211206/… , mathiasbynens.be/notes/rel-shortcut-icon

bbc

72

Das beste, das ich gefunden habe, ist http://www.favicomatic.com/. Ich sage das Beste, weil es mir das schärfste Favicon gab und nach ihrer Umwandlung keine Bearbeitung erforderlich war. Es werden Favoriten bei 16x16 und 32x32 generiert und um sie zu zitieren: "Jede verdammte Größe, Sir!" Außerdem sieht ihre Seite cool aus und ist einfach zu bedienen.

Sie generieren auch das HTML, das Sie für die von ihnen generierten Dateien verwenden müssen.

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Ich habe mir die ersten 20 Google-Ergebnisse angesehen, und dies war bei weitem das Beste.

Jared Menard
quelle

4

Ich soll all dies für jede Seite in mein Head-Tag einfügen?

Noumenon

1

Ich würde nicht alles in deine Kopfmarke stecken. Ich würde nur die Tags einfügen, die zur Unterstützung der Geräte benötigt werden, die Sie unterstützen müssen. Ehrlich gesagt können Sie mit einem einzigen <link rel = "icon" type = "image / ico" href = "/ images / favicon.ico">

Jared Menard

5

Diese Git-Seite erklärt, wofür die meisten dieser Symbole verwendet werden: github.com/audreyr/favicon-cheat-sheet

Jared Menard

14

Es gibt verschiedene Symbole und sogar Begrüßungsbildschirme, die Sie für verschiedene Geräte einstellen können. Diese Antwort erklärt, wie man sie alle unterstützt.

Hier sind einige Ausschnitte, die ich mit relevanten Links zu dem Ort verwendet habe, an dem ich die Informationen gesammelt habe. Weitere Informationen und Informationen zur ASP.NET MVC Boilerplate- Projektvorlage finden Sie in meinem Blog. All dies ist sofort integriert (einschließlich Beispielbilddateien).

Fügen Sie Ihrem HTML-Kopf das folgende Markup hinzu. Die auskommentierten Abschnitte sind völlig optional. Die unkommentierten Abschnitte werden empfohlen, um alle Symbolverwendungen abzudecken. Hab keine Angst, meistens, wenn es Kommentare sind, die dir helfen.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Meine browserconfig.xml-Datei. Vollständige Erklärung oben.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Meine manifest.json-Datei. Vollständige Erklärung oben.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Eine Liste der Dateien im Projekt (Beachten Sie, dass die Namen dieser Dateien wichtig sind, wenn Sie einige davon im Stammverzeichnis Ihres Projekts ablegen möchten, um die Verwendung der oben genannten Meta-Tags zu vermeiden):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Gesamtaufwand

Wenn Sie die Kommentare herausnehmen, die 3 KB zusätzlichen HTML-Code enthalten, wenn Sie keine Begrüßungsbildschirme unterstützen, sind dies 1,5 KB. Wenn Sie die GZIP-Komprimierung für Ihre HTML-Inhalte verwenden, was heutzutage jeder tun sollte, verbleiben pro Anforderung etwa 634 Byte Overhead, um alle Plattformen oder 446 Bytes ohne Begrüßungsbildschirme zu unterstützen. Ich persönlich denke, es lohnt sich, iOS-, Android- und Windows-Geräte zu unterstützen, aber Sie haben die Wahl, ich gebe nur die Optionen!

Randnotiz zum aktuellen Web-Symbol / Begrüßungsbildschirm / Einstellungen

Diese Situation mit herstellerspezifischen Symbolen, Begrüßungsbildschirmen und speziellen Tags zur Steuerung des Webbrowsers oder angehefteten Symbolen ist lächerlich. In einer perfekten Welt würden wir alle eine favicon.svg-Datei verwenden, die in jeder Größe gut aussehen und im Stammverzeichnis der Seite platziert werden könnte. Dies wird zum Zeitpunkt des Schreibens nur von FireFox unterstützt (siehe CanIUse.com ).

Symbole sind heutzutage jedoch nicht die einzigen Einstellungen. Es gibt mehrere andere herstellerspezifische Einstellungen (siehe oben), aber eine favicon.svg-Datei würde die meisten Anwendungsfälle abdecken.

Aktualisieren

Aktualisiert, um die neue Android / Chrome-Version M39 + Favicon / Theming-Optionen aufzunehmen. Interessanterweise haben sie einen ähnlichen Ansatz wie Microsoft gewählt, verwenden jedoch eine JSON-Datei anstelle von XML.

Muhammad Rehan Saeed
quelle

11

Ich habe einen Online- Favicon-Generator erstellt, mit dem Sie aus Font Awesome Icons Favoriten erstellen können . Sie können das erstellte Favicon live im Browser in der Vorschau anzeigen.

Wenn Sie weitere Funktionen nutzen möchten bitte fühlen sich frei , ein Problem oder eine Pull - Anforderung einzureichen hier :).

Finsternis
quelle

10

Ich habe dies erfolgreich für meine Website durchgeführt.

Die einzige Ausnahme ist, dass für den SeaMonkey-Browser HTML-Code erforderlich ist <head>. Während die anderen Browser weiterhin die Datei favicon.ico ohne HTML-Einfügung anzeigen. Jeder andere Browser als IE verwendet möglicherweise andere Bildtypen, nicht nur das .ico-Format. Ich hoffe das hilft.

Barbie Laptop-Spieler
quelle

5

Es gibt viele komplizierte Lösungen oben. Für mich? Ich habe GIMP verwendet, um eine Kopie der ursprünglichen PNG-Datei zu speichern, nachdem ich die Bildgröße auf 32 x 32 Pixel geändert hatte.

Speichern Sie es einfach als * .ico-Datei und verwenden Sie die

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

oben aufgelistet

beep_check
quelle

4

Ich würde Ihnen empfehlen, http://faviconer.com zu versuchen zu verwenden, um Ihre .PNG- oder .GIF-Datei in eine .ICO-Datei zu konvertieren.

Sie können beide 16x16und 32x32(für eine neue Retina-Anzeige) in einer ICO-Datei erstellen.

Keine Probleme mit IE und Firefox

Dmitri A.
quelle

3

Damit Chrome das Seitensymbol (Favicon) anzeigt, müssen Sie Ihre Website von einem Hosting-Server aus überprüfen oder den lokalen Host verwenden, während Sie Ihre Website auf Ihrem PC entwickeln und testen.

Miloud Eloumri
quelle

2

<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

Wenn ich mehr Klarheit für diejenigen von Ihnen hinzufügen darf, die immer noch verwirrt sind. Die .ico-Datei bietet tendenziell mehr Transparenz als die .png-Datei. Aus diesem Grund empfehle ich, Ihr Bild hier wie oben beschrieben zu konvertieren: http://www.favicomatic.com/done Außerdem befindet sich in der href nur die Position des Bildes Denken Sie daran, das http: // vorne hinzuzufügen, da es sonst nicht funktioniert.

dizad87
quelle

1

Ich habe keine anderen verwendet, aber https://realfavicongenerator.net/ scheint eine Top-Wahl zu sein, und es wurde hier noch nicht erwähnt.

Es unterstützt SVGs als Quellbilder zum Generieren von Favoriten und bietet hilfreiche Optionen zum Überschreiben von Bildern für verschiedene Plattformen. Darüber hinaus werden standardmäßig nicht viele Bilder generiert, die mit jeder veralteten Plattform abwärtskompatibel sind. Stattdessen haben Sie die Möglichkeit zu prüfen, ob Sie sie möchten.

Aus einer E-Mail, die mir der Entwickler gesendet hat, geht hervor, dass er Unterstützung für das Generieren von SVG-Favoriten sowie die Sensibilität für SVG-Themen hinzufügen möchte, was meiner Meinung nach eine großartige Funktion ist.

mbomb007
quelle

0

Bitte verwenden Sie den folgenden Code im Header-Bereich Ihrer Indexdatei.

<link rel="icon" href="yourfevicon.ico" />

Chitraksh Bairathee
quelle

Wie füge ich ein Browser-Tab-Symbol (Favicon) für eine Website hinzu?

Antworten:

`<link rel="icon">`

`favicon.ico` im Stammverzeichnis