it-swarm.com.de

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

Ich habe an einer Website gearbeitet und möchte der Registerkarte "Browser" ein kleines Symbol hinzufügen.

Wie kann ich dies in HTML tun und wo im Code muss ich es platzieren (z. B. Header)? Ich habe eine .png -Logodatei, die ich in ein Symbol konvertieren möchte.

Verwandte: HTML-Bild auf der Registerkarte "Browser" festlegen .

514
knookie

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 unterstützt, außer IE <= 1 . Aus Gründen der Abwärtskompatibilität können Sie ICO-Favoriten verwenden.

Beachten Sie, dass Sie nicht mehr icon im rel -Attribut mit shortcut voranstellen müssen. Von MDN-Verbindungstypen :

Der Linktyp shortcut wird häufig vor icon angezeigt, dieser Linktyp ist jedoch nicht konform, wird ignoriert und darf von Webautoren nicht mehr verwendet werden .

favicon.ico im Stammverzeichnis

Von eine andere SO Antwort (von @ mercator ):

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

Alles, was Sie tun müssen, ist, die /favicon.ico -Anforderung an Ihre Website zu senden und 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?

342
  1. Verwende ein Tool, um dein PNG in eine ICO-Datei zu konvertieren. Sie können "Favicon Generator" suchen und Sie können viele Online-Tools finden.
  2. Fügen Sie die ico-Adresse in das head mit einem link- -Tag ein:

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

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 mehr erforderlich war. Es wird Favicons bei 16x16 und 32x32 erzeugen und diese mit "Every damn size, sir!" Zitieren. Außerdem sieht ihre Seite cool aus und ist einfach zu bedienen.

Sie generieren auch den HTML-Code, den 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 oder so Google-Ergebnisse angesehen, und das war bei weitem das Beste.

66
Jared Menard

Es gibt eine Reihe verschiedener 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 den Stellen verwendet habe, an denen ich die Informationen gesammelt habe. Weitere Informationen und Informationen zur Projektvorlage ASP.NET MVC Boilerplate finden Sie unter Mein Blog .

Fügen Sie Ihrem HTML-Kopf den folgenden Zusatz hinzu. Die auskommentierten Abschnitte sind völlig optional. Die unkommentierten Abschnitte werden empfohlen, um alle Symbolverwendungen abzudecken. Hab keine Angst, die meisten sind Kommentare, 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 Metatags 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, und keine Begrüßungsbildschirme unterstützen, sind dies 1,5 KB. Wenn Sie GZIP-Komprimierung für Ihre HTML-Inhalte verwenden, was heutzutage jeder tun sollte, bleiben Ihnen pro Anforderung etwa 634 Byte Overhead für die Unterstützung aller Plattformen oder 446 Byte ohne Begrüßungsbildschirme. 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!

Seitenhinweis zum aktuellen Websymbol/Begrüßungsbildschirm/Einstellungssituation

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 an der Wurzel der Seite platziert werden kann. Dies wird zum Zeitpunkt des Schreibens nur von FireFox unterstützt (siehe CanIUse.com ).

Heutzutage sind jedoch nicht nur Symbole festgelegt, sondern es gibt auch verschiedene andere herstellerspezifische Einstellungen (siehe oben). Eine favicon.svg-Datei deckt jedoch die meisten Anwendungsfälle ab.

Update

Aktualisiert, um die neuen 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.

13

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

Die einzige Ausnahme ist, dass im SeaMonkey-Browser HTML-Code in Ihrem <head> eingefügt werden muss. Die anderen Browser zeigen die Datei favicon.ico weiterhin ohne HTML-Einfügung an. Jeder andere Browser als IE kann auch andere Bildtypen verwenden, nicht nur das .ico-Format. Ich hoffe das hilft.

10

Ich habe einen Online Favicon Generator erstellt, mit dem Sie Favicons aus Font Awesome Icons erstellen können. Sie können das erstellte Favicon live im Browser betrachten.

enter image description here

Wenn Sie zusätzliche Funktionen wünschen, können Sie gerne ein Problem oder eine Pull-Anfrage senden hier :).

9
eclipse

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

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

4
beep_check

Ich empfehle Ihnen, http://faviconer.com zu versuchen, um Ihre .PNG- oder .GIF-Datei in eine .ICO-Datei zu konvertieren.

Sie können sowohl 16x16 als auch 32x32 (für neue Retina-Anzeige) in einer .ICO-Datei erstellen.

Keine Probleme mit IE und Firefox

4
Dmitri A

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

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

Wenn ich noch mehr Klarheit für diejenigen von euch schaffen 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 erwähnt zu konvertieren: http://www.favicomatic.com/done auch innerhalb der href Ist nur der Speicherort des Images. Es kann sich um einen beliebigen Serverstandort handeln. Denken Sie daran, das http: // vor dem Image einzufügen. Andernfalls funktioniert es nicht.

1
DIZAD