Favicons - Best Practices

Ich versuche, mich mit all diesen verschiedenen Größen und Formaten vertraut zu machen, die für Favicons, Touch-Symbole und jetzt auch für Kachelsymbole benötigt werden.

Ich habe diesen Beitrag gelesen: http://www.jonathantneal.com/blog/understand-the-favicon, aber ich bin immer noch ein bisschen unklar, was genau zu verwenden ist, das auf allen Geräten und Browsern einigermaßen gut aussieht> = IE8 .

Ich denke, ich sollte Folgendes erstellen:

ICO
favicon.ico (32 x 32)

PNG
favicon.png (96 x 96)

Tile Icon
tileicon.png (144x144)

Apple Touch
-Symbol apple-touch-icon-precomposed.png (152 x 152)
basierend auf diesem https://github.com/h5bp/html5-boilerplate/issues/1367

... und dann diesen Code verwenden, um sie zu bedienen?

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

Vermisse ich etwas

Ich bin nicht klar, ob dies IE 10 abdecken wird?

Favicon ist viel komplexer als es sich anhört. Vor 10 Jahren favicon.icowar der einzige benötigte Artikel. Dann gab es das Touch-Symbol, dann mehrere Touch-Symbole für die verschiedenen Bildschirmauflösungen von iOS-Geräten, dann gab es das Kachelsymbol für Windows ...

Einige Antworten hier sind sehr umfassend - und überwältigend (all dies nur für ein Favicon?). Sie können jedoch nicht angeben, dass das Kachelsymbol 310 x 310 für Windows 558 x 558 empfohlen wird . Und da sie vor einigen Monaten geschrieben wurden, erwähnen sie weder das aktuelle Manifest für Android Chrome M39 noch das SVG-Symbol für Safari unter OS X El Capitan .

Das Design pro Plattform ist ein weiteres schwieriges, aber vernachlässigtes Thema. Zum Beispiel sind Favicon oft transparent. IOS unterstützt jedoch keine Transparenz (vergleichen Sie beispielsweise das SO-Touch-Symbol mit dem, was Sie erhalten, wenn Sie SO zum Startbildschirm Ihres iPhones hinzufügen).

Aus diesen Gründen halte ich es für eine bewährte Methode für Favicon, es nicht manuell zu erstellen. Verwenden Sie stattdessen ein Tool, um den gesamten Prozess zu automatisieren und Plattformrichtlinien durchzusetzen.

Ich rate Ihnen, RealFaviconGenerator zu verwenden . Es generiert alle Bilder und HTML-Code, die Sie benötigen, um die Arbeit zu erledigen:

• favicon.ico und PNG-Symbole für Desktop-Browser
• Apple Touch-Symbol für iOS- und Android-Geräte
• Windows 8-Kacheln
• Angeheftetes Registerkartensymbol für Safari unter OS X El Capitan

Beispielsweise werden nicht nur das msapplication-TileImageBild und das Markup generiert, sondern auch die neuere browserconfig.xmlDatei, die von IE11 unterstützt wird. Es wurde auch vor einigen Monaten aktualisiert, um das Android Chrome-Manifest und Safari OS X El Capitan zu unterstützen.

Vollständige Offenlegung: Ich bin der Autor dieser Website.

Hier ist das vollständige (wie ich weiß) Beispiel für Favicon für Handys und Tablets:

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

Für IE11 gibt es hier eine FAQ

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. In meinem Blog finden Sie weitere Informationen und Informationen zur ASP.NET MVC Boilerplate- Projektvorlage, die alle sofort integriert ist (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="https://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="https://stackoverflow.com/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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 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

Gesamtkosten

Wenn Sie die Kommentare herausnehmen, die 3 KB zusätzlichen HTML-Code enthalten, wenn Sie keine Begrüßungsbildschirme mit 1,5 KB unterstützen. Wenn Sie die GZIP-Komprimierung für Ihre HTML-Inhalte verwenden, was heutzutage jeder tun sollte, verbleiben pro Anforderung etwa 634 Byte Overhead für die Unterstützung aller Plattformen oder 446 Bytes 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!

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 am Stamm der Seite platziert werden könnte. Zum Zeitpunkt des Schreibens unterstützt dies nur FireFox (siehe CanIUse.com ).

Symbole sind heutzutage jedoch nicht die einzigen Einstellungen. Es gibt mehrere andere herstellerspezifische Einstellungen (siehe oben), aber eine Datei favicon.svg 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.

Die einfachste Lösung ist die Verwendung eines (!) PNG-Bildes (im Jahr 2020).

Fügen Sie dies einfach dem Kopf Ihres Dokuments hinzu:

<link rel="shortcut icon" type="image/png" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="apple-touch-icon" href="https://stackoverflow.com/img/icon-192x192.png">

Der letzte Link ist für Apple (Startbildschirm), der zweite für Android (Startbildschirm) und der erste für den Rest.

Beachten Sie, dass diese Lösung in Windows 8/10 KEINE "Kacheln" unterstützt. Es unterstützt Bilder in Verknüpfungen, Lesezeichen und Browser-Registerkarten.

Die Größe entspricht genau der Größe, die der Android-Startbildschirm verwendet. Die Symbolgröße des Apple-Startbildschirms beträgt 60px (3x), also 180px und wird verkleinert. Andere Plattformen verwenden das Standard-Verknüpfungssymbol, das ebenfalls verkleinert wird.

Ich habe mir tatsächlich die gleiche Frage gestellt und versucht, nach einfachen Projekten zu suchen, die in einen Build-Schritt integriert werden können oder einfach die Erstellung der erforderlichen Assets und Markups vereinfachen.

Ich habe nichts gefunden, was meinen Anforderungen entsprach, also habe ich faviconbuild erstellt und es unter der MIT-Lizenz veröffentlicht .

Der Zweck dieses Projekts besteht darin, ein zentrales, wartbares und lokal ausführbares plattformübergreifendes Dienstprogramm zum Erstellen von Favoriten und zum Unterstützen von Markups zu erstellen. Es nutzt die Leistungsfähigkeit von Imagemagick, sodass Sie diese für Ihre Plattform herunterladen oder die in meinen Releases bereitgestellten verwenden müssen . Sie können dies gerne in kommerziellen oder persönlichen Projekten verwenden, Beiträge leisten, Funktionsanfragen einreichen oder einfach als Inspirationsquelle für Ihre eigenen Dienstprogramme verwenden.

Das Projekt besteht aus einer Batchdatei für Windows und einem Bash-Skript für Unix / Mac (oder Windows über Cygwin). Eine vollständige Liste der unterstützten Optionen erhalten Sie über die interne Hilfeoption -h oder --help.

Ex:

./faviconbuild.sh -h

Beide Skripte analysieren eine einfache Textdatei , die Sie auch mit der Option -p oder --parsed überschreiben können. Die Datei ist im Grunde nur eine Vorlage für auszuführende Befehle, sodass Sie die Ausgabe bei Bedarf einfacher anpassen können.

Ich habe auch einen Blog-Beitrag über die Entwicklung und als Mini-Tutorial über Bash / Batch-Scripting veröffentlicht.