Ik was de Favicon-pagina op Wikipedia aan het lezen. Ze noemen de HTML 5-specificatie voor Favicon:
De huidige HTML5-specificatie raadt aan om groottepictogrammen in meerdere formaten op te geven met behulp van de attributen rel=”icon” sizes=”door spaties gescheiden lijst van pictogramdimensies” in een tag. [bron] Meerdere pictogramformaten, inclusief containerformaten zoals Microsoft .ico en Macintosh .icns-bestanden, evenals Scalable Vector Graphics kunnen worden geleverd door het inhoudstype van het pictogram in de vorm van type=”file content-type” in de tag op te nemen.
Kijkend naar het geciteerde artikel (W3) laten ze dit voorbeeld zien:
<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">
Mijn vraag is of browsers de HTML 5-methode ondersteunen?
Opmerking: ik weet dat Apple hun apple-touch-icon-metatagmethode gebruikt in plaats van de HTML5-methode.
Het wikipedia-artikel beweert:
De Google Chrome-webbrowser selecteert echter de grootte die het meest overeenkomt met die in de HTML-headers om toepassingspictogrammen van 128×128 pixels te maken wanneer de gebruiker kiest voor Toepassingssnelkoppelingen maken… in het menu ‘Extra’.
Hoe gaan Internet Explorer (v9 tot v11) en Firefox hiermee om? En klopt het artikel over hoe Chrome omgaat met de HTML-favicons? (Er is geen bron vermeld voor Chrome die dit bevestigt.)
Bij het zoeken kon ik niet echt enige (geloofwaardige) informatie vinden over HTML 5 Favicon, behalve het Wikipedia-artikel.
Antwoord 1, autoriteit 100%
De verstrekte antwoorden (op het moment van dit bericht) zijn alleen links-antwoorden, dus ik dacht dat ik de links zou samenvatten in een antwoord en wat ik zal gebruiken.
Bij het maken van favicons voor meerdere browsers (inclusief aanraakpictogrammen) zijn er verschillende dingen waarmee u rekening moet houden.
De eerste (natuurlijk) is Internet Explorer. IE ondersteunt geen PNG-favicons tot versie 11. Dus onze eerste regel is een voorwaardelijke opmerking voor favicons in IE 9 en lager:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
Om het gebruik van het pictogram te dekken, maakt u het op 32×32 pixels. Let op het rel="shortcut icon"voor IE om het icoon te herkennen. Het heeft het woord shortcutnodig, wat niet standaard is. We verpakken het favicon .icoook in een IE-voorwaardelijk commentaar omdat Chrome en Safari het bestand .icozullen gebruiken als het aanwezig is, ondanks andere beschikbare opties, niet wat we zouden doen Leuk vinden.
Het bovenstaande dekt IE tot IE 9. IE 11 accepteert PNG-favicons, maar IE 10 niet. Ook IE 10 leest geen voorwaardelijke opmerkingen, dus IE 10 zal geen favicon tonen. Nu IE 11 en Edge beschikbaar zijn, zie ik IE 10 niet op grote schaal worden gebruikt, dus negeer ik deze browser.
Voor de rest van de browsers gaan we de standaardmanier gebruiken om een favicon te citeren:
<link rel="icon" href="path/to/favicon.png">
Dit pictogram moet 196 x 196 pixels groot zijn om alle apparaten te dekken die dit pictogram kunnen gebruiken.
Om aanraakpictogrammen op mobiele apparaten te behandelen, gaan we Apple’s eigen manier gebruiken om een aanraakpictogram te citeren:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Als je rel="apple-touch-icon-precomposed"gebruikt, wordt de reflecterende glans niet toegepast als er een bladwijzer wordt gemaakt op iOS. Gebruik rel="apple-touch-icon"om iOS de glans te laten aanbrengen. Dit pictogram moet een grootte hebben van 180×180 pixels, aangezien dat de huidige grootte is die door Apple wordt aanbevolen voor de nieuwste iPhones en iPads. Ik heb gelezen dat Blackberry ook rel="apple-touch-icon-precomposed"zal gebruiken.
Ter opmerking: Chrome voor Android stelt:
De apple-touch-* is verouderd en wordt slechts voor een korte tijd ondersteund. (Geschreven vanaf bèta voor m31 van Chrome).
Aangepaste tegels voor IE 11+ op Windows 8.1+
IE 11+ op Windows 8.1+ biedt een manier om vastgezette tegels voor uw site te maken.
Microsoft raadt aan een paar tegels van de volgende grootte te maken:
Klein: 128 x 128
Gemiddeld: 270 x 270
Breed: 558 x 270
Groot: 558 x 558
Dit moeten transparante afbeeldingen zijn, aangezien we hierna een gekleurde achtergrond zullen definiëren.
Zodra deze afbeeldingen zijn gemaakt, moet u een xml-bestand maken met de naam browserconfig.xmlmet de volgende code:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/smalltile.png"/>
<square150x150logo src="images/mediumtile.png"/>
<wide310x150logo src="images/widetile.png"/>
<square310x310logo src="images/largetile.png"/>
<TileColor>#009900</TileColor>
</tile>
</msapplication>
</browserconfig>
Sla dit xml-bestand op in de hoofdmap van uw site. Wanneer een site is vastgezet, zoekt IE naar dit bestand. Als je het xml-bestand een andere naam wilt geven of het op een andere locatie wilt hebben, voeg dan deze metatag toe aan de head:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
Voor aanvullende informatie over IE 11+ aangepaste tegels en het gebruik van het XML-bestand bezoek de website van Microsoft.
Alles bij elkaar:
Om alles samen te voegen zou de bovenstaande code er als volgt uitzien:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
Windows Phone Live-tegels
Als een gebruiker een Windows-telefoon gebruikt, kunnen ze een website pinnen naar het startscherm van hun telefoon. Helaas, wanneer ze dit doen, geeft het een screenshot van je telefoon weer, geen favicon (niet eens de MS-specifieke code waarnaar hierboven wordt verwezen). Om een ”Live Tile” voor Windows Phone-gebruikers voor uw website te maken, moet u de volgende code gebruiken:
Hier zijn gedetailleerde instructies van Microsoft , maar hier is een synopsis:
STAP 1
Maak een vierkante afbeelding voor uw website, om Hi-res-schermen te ondersteunen, creëer deze op 768×768 pixels in grootte.
STAP 2
Voeg een verborgen overlay van deze afbeelding toe. Hier is de voorbeeldcode van Microsoft:
<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
<img src="customtile.png" width="320" height="320" />
<div style='margin-top: 40px'>
Add text/graphic asking user to pin to start using the menu...
</div>
</div>
Stap 3
U kunt dan de volgende regel toevoegen om een pincode toe te voegen om de link te starten:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft beveelt aan dat u Windows-telefoon detecteert en alleen dat link aan die gebruikers laten zien, omdat deze niet werkt voor andere gebruikers.
STAP 4
Vervolgens voeg je wat JS toe om de zichtbaarheid van de overlay
te schakelen
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
Opmerking over maten
Ik gebruik één formaat omdat elke browser de afbeelding indien nodig zal verkleinen. Ik zou desgewenst meer HTML kunnen toevoegen om meerdere formaten op te geven voor degenen met een lagere bandbreedte, maar ik ben de PNG-bestanden al zwaar aan het comprimeren met TinyPNGen ik vind dit niet nodig voor mijn doeleinden. Ook volgens philippe_b‘s antwoordChrome en Firefox bevatten bugs die ervoor zorgen dat de browser pictogrammen van alle formaten laadt. Het gebruik van één groot pictogram kan daarom beter zijn dan meerdere kleinere.
Verder lezen
Voor degenen die meer details willen, zie de onderstaande links:
- Wikipedia-artikel over favicons
- Het Icon-handboek
- Begrijp de Favicondoor Jonathan T. Neal
- rel=”shortcut icon” als schadelijk beschouwddoor Mathias Bynens
- Alles wat je altijd al wilde weten over aanraakpictogrammendoor Mathias Bynens
Antwoord 2, autoriteit 5%
Nee, niet alle browsers ondersteunen het kenmerk sizes:
- Safari: Ja, het kiest de foto die het beste past.
- Opera: Ja, het kiest de foto die het beste past.
- IE11: Niet zeker. Het neemt blijkbaar de grotere afbeelding die het vindt, wat een beetje grof is, maar oké.
- Chrome: Nee, zie bugs 112941en 324820. In feite heeft Chrome de neiging om allegedeclareerde pictogrammen te laden, niet alleen de beste/eerste/laatste.
- Firefox: Nee, zie bug 751712. Net als Chrome heeft Firefox de neiging om allegedeclareerde pictogrammen te laden.
Houd er rekening mee dat sommige platforms specifieke formaten definiëren:
- Android Chrome verwacht een 192×192-pictogram, maar geeft de voorkeur aan de pictogrammen die zijn aangegeven in
manifest.jsonals het aanwezig is. Bovendien gebruikt Chrome het Apple Touch-pictogram voor bladwijzers. - Coast by Opera verwacht een icoon van 228×228.
- Google TV verwacht een pictogram van 96 x 96.