Favicons voor speeddail versus Safari

[_Thanatos_]

Ik probeer voor speeddails van verschillende browsers (momenteel eerst ff Opera, omdat die het native heeft), een mooi logo van een site te presenteren. Dat werkt goed, door "favicons" op groot formaat aan te bieden:

HTML:

<link rel=icon sizes=160x160 href="/webicons/favicon-160.png" type="image/png">
<link rel=icon sizes=196x196 href="/webicons/favicon-196.png" type="image/png">
<link rel=icon sizes=96x96 href="/webicons/favicon-96.png" type="image/png">
<link rel=icon sizes=any href="/webicons/favicon.svg" type="image/svg+xml">
<link rel=apple-touch-icon sizes=180x180 href="/apple-touch-icon.png">

Er is ook een favicon.ico in de root van de site geplaatst met 16x16, 32x32 en 48x48 iconen.

Het mooie van de 160x160 en 196x196 is dat ze door Opera worden gebruikt voor Speeddail en de kleinere formaten voor echte favicons in de tabs en bookmarks enzo. Werkt ook allemaal perfect in IE, Firefox en Chrome.

Maar niet Safari. Ik heb hier Safari 7 op Mavericks en die pakt botweg de allergrootste favicon die hij kan vinden, en schaalt het terug naar icoonformaat. Gezien de grootste twee een andere afbeelding (vierkant logo + tekst) zijn dan de iconen en de svg (alleen vierkant logo), klopt er geen zak meer van. Er is niets meer van te herkennen.

Hoe is dit op te lossen? Hoe kan ik Safari zover krijgen dat ie een bepaald icoon wel of juist niet pakt? Of eigenlijk, hoe krijg ik Safari zover dat ie netjes let op het sizes-attribuut en het favicon pakt wat-ie nodig heeft, ipv de allergrootste opzoekt? De grondslag van het probleem is dus dat Safari een 196x196 icoon pakt voor een (vermoedelijk) 16x16 icoontje in de adresbalk.

Ik heb al geprobeerd wat te schuiven met de link-tags, in de hoop dat Speeddail de eerste pakt en Safari de grootste ofzo, of andersom, maar volgorde lijkt geen zak uit te maken.

[Herko_ter_Horst]

Hier staat wat Safari precies doet: https://developer.apple.c...uringWebApplications.html

Hij vindt voor desktop-resoluties waarschijnlijk gewoon de grootste het beste passen. Misschien kun je hem foppen door de sizes van een apple-touch-icon op iets groots te zetten?

[Bosmonster]

Hij pakt de grootste, zodat ie altijd de beste kwaliteit heeft, ook als deze teruggeschaald wordt voor retina. Zorg gewoon dat ze allemaal gelijk zijn, ipv ze te optimaliseren voor het specifiek gebruik in een (of meerdere) browsers. Dit gebruik kan namelijk ieder moment veranderen.

[_Thanatos_]

Herko_ter_Horst schreef op maandag 29 september 2014 @ 21:04:
Hier staat wat Safari precies doet: https://developer.apple.c...uringWebApplications.html

Hij vindt voor desktop-resoluties waarschijnlijk gewoon de grootste het beste passen. Misschien kun je hem foppen door de sizes van een apple-touch-icon op iets groots te zetten?

Dat is Mobile Safari, ik had het over de gewone Safari

Bosmonster schreef op dinsdag 30 september 2014 @ 09:12:
Hij pakt de grootste, zodat ie altijd de beste kwaliteit heeft, ook als deze teruggeschaald wordt voor retina. Zorg gewoon dat ze allemaal gelijk zijn, ipv ze te optimaliseren voor het specifiek gebruik in een (of meerdere) browsers. Dit gebruik kan namelijk ieder moment veranderen.

Op zich ben ik het met je eens, en normaliter zou ik dat ook doen. Maar in dit geval is het favicon uitvergroten tot hugeness gewoon niet mooi en ziet eruit als ruimte weggooien. Het volledige logo (met tekst ernaast) past gewoon op dit formaat, en wil ik daarom ook zo kunnen gebruiken.

Ik kan het ook anders stellen: hoe kan ik een aparte afbeelding definiëren voor dingen als Speeddail en andere website thumbnails?

[ Voor 42% gewijzigd door _Thanatos_ op 30-09-2014 10:05 ]