Ich habe an einer Website gearbeitet und möchte der Browser-Registerkarte ein kleines Symbol hinzufügen.
Wie kann ich dies in HTML tun und wo im Code müsste ich es platzieren (z. B. in der Kopfzeile)? Ich habe eine .png Logo-Datei, die ich in ein Symbol umwandeln möchte.
Verwandt: HTML setzt Bild auf Browser-Tab .
Ich empfehle Ihnen, Folgendes auszuprobieren http://faviconer.com um Ihre .PNG- oder .GIF-Datei in eine .ICO-Datei umzuwandeln.
Sie können beides erstellen 16x16 y 32x32 (für das neue Retina-Display) in einer einzigen .ICO-Datei.
Keine Probleme mit IE und Firefox
HTML-Standard auf link rel=icon
Nur der Vollständigkeit halber: Dies ist der Inhalt der Norm: https://html.spec.whatwg.org/multipage/links.html#rel-icon
Das Schlüsselwort icon kann mit Link-Elementen verwendet werden. Mit diesem Schlüsselwort wird ein Link zu einer externen Ressource erstellt.
Bei der angegebenen Ressource handelt es sich um ein Symbol, das die Seite oder Site darstellt und vom Benutzeragenten bei der Darstellung der Seite in der Benutzeroberfläche verwendet werden sollte.
[...]
Der folgende Ausschnitt zeigt den oberen Teil einer Anwendung mit mehreren Symbolen.
<!DOCTYPE HTML> <html lang="en"> <head> <title>lsForums — Inbox</title> <link rel=icon href=favicon.png sizes="16x16" type="image/png"> <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"> <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"> <link rel=icon href=iphone.png sizes="57x57" type="image/png"> <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml"> <link rel=stylesheet href=lsforums.css> <script src=lsforums.js></script> <meta name=application-name content="lsForums"> </head> <body> ...Aus historischen Gründen kann dem Schlüsselwort "icon" das Schlüsselwort "shortcut" vorangestellt werden. Ist das Schlüsselwort "shortcut" vorhanden, muss der gesamte Wert des Attributs rel eine von der Groß- und Kleinschreibung unabhängige Übereinstimmung mit der Zeichenfolge "shortcut icon" sein (mit einem einzelnen U+0020 SPACE-Zeichen zwischen den Token und keinem anderen ASCII-Leerzeichen).
Es gibt eine Menge komplizierter Lösungen. 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 aufgeführt
<link rel="shortcut icon"
href="http://someWebsiteLocation/images/imageName.ico">Ich möchte denjenigen unter Ihnen, die immer noch verwirrt sind, etwas mehr Klarheit verschaffen. Die .ico-Datei neigt dazu, mehr Transparenz als die .png-Datei zu bieten, weshalb ich empfehle, Ihr Bild wie oben erwähnt hier zu konvertieren: http://www.favicomatic.com/done auch, innerhalb der href ist nur der Ort des Bildes, es kann jeder Server-Speicherort sein, denken Sie daran, die http:// vor, sonst wird es nicht funktionieren.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
1 Stimmen
Überprüfen Sie die Link für weitere Informationen. Sie sind auf dem richtigen Weg.
0 Stimmen
Laden Sie das Bild (favicon.ico) mit FTP (lesen Sie unser FTP-Tutorial) in den Root-Bereich Ihrer Website hoch. Der Root-Bereich ist der Hauptdateibereich, in dem Sie die Datei index.html (index.asp, index.php, etc.) für Ihre Hauptseite speichern würden. davesite.com wäre die Wurzel davesite.com/webstation wäre nicht die Wurzel davesite.com/webstation/html ist auch nicht Root Diese Datei wird, wenn sie richtig platziert ist, als Standard für Ihre gesamte Domain geladen.
0 Stimmen
Ich habe die Eingabetaste zu früh gedrückt - trotzdem danke für die Antwort. Wollte nur sagen, dass der erste Teil (den ich oben eingefügt habe) in dem Link, den Sie angegeben haben, nicht zu funktionieren scheint? Aber der zweite Teil hat perfekt funktioniert - danke
3 Stimmen
Hier ist die Empfehlungen von w3.org mit einer Warnung, dass IE vor IE11 unterstützt keine .png-Symbole als Favoriten .