Was sind die gültigen Favicon-Typen für IE10 +?

Question

Nach Typ meine ich Dateierweiterung.

Mein Favicon funktioniert für FF, Chrome und Safari, und jemand, der vorgeschlagen wird, könnte der Favicon-Typ sein, der das Problem verursacht.

Allgemeiner gibt es eine gute Ressource online, die mir diese Informationen geben würde?

Ich bin mehr daran interessiert, genaue Dokumentation zu finden, als einfach verschiedene Typen auszuprobieren.

Ich würde lieber eine .svg-Datei verwenden, wenn möglich ein kein Rasterbild. Außerdem habe ich keine Möglichkeit, ICO-Dateien zu erzeugen, da ich Inkscape verwende.

<link rel='shortcut icon' href = '../images/favicon.png'> 

Forschung

https://mathiasbynens.be/notes/rel-shortcut-icon

favicon not working in IE

Bitte beachten Sie, dass ich will don nicht im Stammordner setzen.

Laut der Spezifikation bin ich die Spezifikation so IE wird funktionieren.

In Wirklichkeit bin ich brechen die Spezifikation für IE zu arbeiten, und es funktioniert immer noch nicht.

Warum hasst es mich?

Answer 1

Dies sind die Favicon types Sie können überall verwendet werden:

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" /> 
<link rel="icon" type="image/png" href="http://example.com/favicon.png" /> 
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" /> 

Eine vollständige Liste der Favicons so etwas wie das sein kann:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-touch-icon-60x60.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120.png" /> 
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.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="Site"/> 
<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" /> 

Weitere Informationen here

Answer 2

ICO-Dateiformat wird von Microsoft in den ersten Windows-Versionen vertreten und ist im Allgemeinen kein Format für Bilder, sondern ein Container für BMP und PNG imag es. Eigentlich sollte es also BMP/PNG-Bilder enthalten, zumindest eins.

Quelle: https://en.wikipedia.org/wiki/ICO_%28file_format%29

Sie können eine Tabelle der unterstützten Bildformate für "Favicon" finden Sie hier: https://en.wikipedia.org/wiki/Favicon

SVG wird auf FF 41.0+ nur unterstützt. (Auf Theorie)

Die Hauptidee hinter dem ISO-Format ist die Bildsymbole in verschiedenen Größen zu packen: 16x16px (das ist die Haupt ist, als Favicon in den Browsern verwendet wird), 32x32, 64x64 und so weiter in eine Datei , also dieses "ICO" n soll auf verschiedenen Auflösungen schön aussehen. Sie können leicht Tonnen von Online-Tools finden, die fast jedes Format in ICO konvertieren, aber fast alle von ihnen werden nur ein Bild in den meisten Fällen 16x16px erstellen.

Answer 3

Gehen Sie zu enter link description here Sobald Sie ein 260px X 260 px Bild hochladen, erstellt die Website alle verschiedenen Favicons und Code.Dann auf Tablets und mobilen Geräten, wenn Sie das Lesezeichen speichern, sieht es aus wie ein App-Symbol auf Ihrem Gerät Beispiel https://realfavicongenerator.net/favicon_checker?site=http%3A%2F%2Fnationalkitchencabinets.com%2F&ignore_root_issues=on#.V0yL-77PSSo

Die Seite wird Ihnen Code wie diesen im oberen Abschnitt Ihrer Seite veröffentlichen. Platzieren Sie dann ALLE Symbole, die Sie erhalten, im Stammverzeichnis der Website.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> 
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> 
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> 
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> 
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> 
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> 
<link rel="manifest" href="/manifest.json"> 
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> 
<meta name="msapplication-TileColor" content="#da532c"> 
<meta name="msapplication-TileImage" content="/mstile-144x144.png"> 
<meta name="theme-color" content="#ffffff">