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 .
Es gibt eigentlich zwei Möglichkeiten, ein Favicon zu einer Website hinzuzufügen.
<link rel="icon">Fügen Sie einfach den folgenden Code in die <head> Element:
<link rel="icon" href="http://example.com/favicon.png">PNG-Favicons werden von den meisten Browsern unterstützt, außer IE <= 10 . Aus Gründen der Abwärtskompatibilität können Sie ICO-Favicons verwenden.
Beachten Sie, dass Sie müssen nicht vorausgehen icon en rel Attribut mit shortcut mehr. Von MDN Link-Typen :
El
shortcutDer Link-Typ wird häufig voriconaber dieser Link-Typ ist nicht konform, wird ignoriert und Webautoren dürfen es nicht mehr verwenden .
favicon.ico im Root-VerzeichnisVon eine weitere SO-Antwort (von @mercator ) :
Alle modernen Browser (getestet mit Chrome 4, Firefox 3.5, IE8, Opera 10 und Safari 4) fordern immer eine
favicon.icoes sei denn, Sie haben ein Verknüpfungssymbol über<link>.
Alles, was Sie also tun müssen, ist, die /favicon.ico Anfrage auf Ihrer Website Ihr Favicon zurückgeben. Diese Option erlaubt es Ihnen leider nicht, ein PNG-Symbol zu verwenden.
Siehe auch favicon.png vs favicon.ico - warum sollte ich PNG statt ICO verwenden?
Wenn Sie ALLE Icons automatisch haben möchten (einschließlich der Icons für Mobiltelefone, "Zum Homescreen hinzufügen", Lesezeichen für Mobiltelefone, iOS/Droid, Desktop-Tabs usw.), ICO-Dateien generieren möchten usw., sowie kopierfähigen HTML-Code für die besagten Meta-Dateien, alles mit einem Klick, können Sie dieses praktische Tool verwenden (ich bin nicht angeschlossen) realfavicongenerator.net
Möchte hinzufügen: Ihr Symbol sollte quadratisch sein, d.h. die Breite ist gleich der Höhe.
Vergessen Sie nicht, beim Testen die Tastenkombination Strg+F5 zu drücken. Manchmal wird sie zwischengespeichert.
Danke! Ich folgte die Schritte richtig und es funktioniert wirklich gut auf IE und Firefox, aber aus irgendeinem Grund ist es nicht auf Google Chrome arbeiten, muss ich den Cache löschen? oder was muss ich von dort zu tun?
Ich verwende gerne das Photoshop Plugin : telegraphics.com.au/svn/icoformat/trunk/dist/README.html
Der "Shortcut"-Teil kann unter vielen Umständen entfernt werden: stackoverflow.com/questions/13211206/ , mathiasbynens.be/notes/rel-shortcut-icon
Die beste, die ich gefunden habe, ist http://www.favicomatic.com/ Ich sage "am besten", weil ich damit das schärfste Favicon erhielt und nach der Umwandlung keine Bearbeitung mehr nötig war. Es erzeugt Favicons in 16x16 und 32x32 und, um sie zu zitieren: "Jede verdammte Größe, Sir!" Außerdem sieht ihre Website cool aus und ist einfach zu bedienen.
Sie erzeugen auch das HTML, das Sie für die von ihnen erzeugten 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=" "/>
<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 oder so Google-Ergebnisse angesehen, und dies war bei weitem das beste.
Ich würde nicht alles in den Kopf-Tag packen. 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="http://stackoverflow.com/images/favicon.ico"> auskommen.
Diese Git-Seite erklärt, wofür die meisten dieser Symbole verwendet werden: github.com/audreyr/favicon-cheat-sheet
Es gibt eine Reihe von verschiedenen Symbolen und sogar Startbildschirmen, die Sie für verschiedene Geräte einstellen können. In dieser Antwort wird erläutert, wie Sie sie alle unterstützen können.
Hier sind einige Auszüge, die ich verwendet habe, mit entsprechenden Links zu den Quellen, wo ich die Informationen gesammelt habe. Siehe mein Blog für weitere Informationen und mehr Informationen über die ASP.NET MVC Boilerplate Projektvorlage, in der all dies bereits integriert ist (einschließlich Beispielbilddateien).
Fügen Sie die folgende Markierung in Ihren html-Kopf ein. Die auskommentierten Abschnitte sind völlig optional. Die unkommentierten Abschnitte werden empfohlen, um alle Icon-Verwendungen abzudecken. Seien Sie nicht erschrocken, das meiste ist kommentiert, um Ihnen zu 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="http://stackoverflow.com/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="http://stackoverflow.com/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/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 beschließen, einige von ihnen an den Anfang Ihres Projekts zu stellen, um die 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.pngGemeinkosten insgesamt
Wenn Sie die Kommentare herausnehmen, sind das 3 KB zusätzliches HTML, wenn Sie keine Splash-Screens unterstützen, sind das 1,5 KB. Wenn Sie Ihre HTML-Inhalte mit GZIP komprimieren, was heutzutage jeder tun sollte, bleiben Ihnen pro Anfrage etwa 634 Bytes an Overhead, um alle Plattformen zu unterstützen, oder 446 Bytes ohne Splash Screens. Ich persönlich denke, dass es sich lohnt, IOS-, Android- und Windows-Geräte zu unterstützen, aber das ist Ihre Entscheidung, ich zeige nur die Möglichkeiten auf!
Nebenbemerkung zur aktuellen Situation bei Web-Icons/Splash-Screens/Einstellungen
Diese Situation mit herstellerspezifischen Symbolen, Startbildschirmen 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 aussieht und an der Wurzel der Seite platziert werden kann. Zum Zeitpunkt der Erstellung dieses Artikels unterstützt dies nur FireFox (siehe CanIUse.com ).
Allerdings sind Icons heutzutage nicht mehr die einzige Einstellung, es gibt noch mehrere andere anbieterspezifische Einstellungen (siehe oben), aber eine favicon.svg-Datei würde die meisten Anwendungsfälle abdecken.
Update
Aktualisiert, um die neue Android/Chrome-Version M39+ Favicon/Theming-Optionen einzubeziehen. Interessanterweise haben sie einen ähnlichen Ansatz wie Microsoft gewählt, verwenden aber eine JSON-Datei anstelle von XML.
Ich habe dies erfolgreich für meine Website getan.
Die einzige Ausnahme ist, dass der SeaMonkey-Browser HTML-Code benötigt, der in Ihre <head> Die anderen Browser hingegen zeigen das favicon.ico auch ohne HTML-Eingabe an. Außerdem kann jeder andere Browser als der IE auch andere Arten von Bildern verwenden, nicht nur das .ico-Format. Ich hoffe, das hilft.
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 .