Favicon zichtbaar in favorieten Safari, hoe doe je dat?

Ik heb een vraagje, als je in Safari een nieuw tablad wil aanmaken zie je de favorieten staan met hun eigen logo (favicon). Nu heb ik ook een eigen voor mijn website maar hij laat m in Safari alleen maar zien als een kleurvlak met een letter er in. Heeft Apple daar speciale specificaties voor?
Ik kan dat namelijk nergens vinden.

Ja en nee…

Als je het in één keer goed wilt doen dan ga je naar deze site.

https://realfavicongenerator.net

Stap 1

  • Upload je bedrijfslogo

Stap 2

  • Laat alle instellingen gewoon staan op default, dan zit je 99,8% van de keren goed.

Stap 3

  • Er staat op de pagina wat je moet doen in een stappenplan.
    1. download de bestandjes
    1. upload de spulletjes naar de Root folder
    1. plak de code in je site
    1. controleer of het werk.

https://realfavicongenerator.net/favicon_checker#.WGu9crFx_OI

Favicon werkt prima in Safari (ik zou trouwens een png doen), met de standaard code, alleen kan hij niet refreshen.
Dus als je favicon verandert kan hj dat niet laten zien.
Als dat moet, pak je even Chrome of een andere computer of gooi je alle cache weg.

Misschien leg ik niet helemaal goed uit wat ik bedoel, het gaat niet om de favicin die in de url balk staat maar wat ik bedoel, is de favorieten icoon die vaak als een gekleurde vierkant staat met een letter er in. Ik heb voor mijn website een icoon die graag wil gebruiken als favorieten icoon zoals vele iconen wel goed afgebeeld worden zoals Facebook icoon. Maar ik kan nergens vinden hoe je dat moet doen. Dus wie het weet, ik wil het graag weten.

Dat bedoel ik dus. Dat is geen favicon maar een Apple touch icon. Door mijn voorbeeld te volgen krijg je alles in één keer goed. Dus touch icons, favicons Safari pins, Windows 10 app icons en wat niet allemaal.

Favicons zijn universeel en worden vooral gebruikt als fallback oplossing (zekerheidje). Elke browser en/of platform heeft zo’n beetje hun eigen systeem op vandaag.

Deze icoontjes alleen in Safari zijn weer iets unieks en speciaal dat alleen Safari heeft.

Shmoo, precies. Maar waar heb je dat voorbeeld?

https://realfavicongenerator.net <— die link volgen en dan doen wat er op de site staat.

een complete lijst van benodigde icons

een goede favicon.ico bestaat uit zowel een 16x16px als een 32x32px icoontje. Safari gebruikt de 32x32px voor de favorieten (in het favorieten-overzicht). De apple-touch icons worden gebruikt voor bv het “Veelbezocht” overzicht en het opslaan van een wegpagina op een iPhone scherm.

en voor de Pinned-tab-icon moet je een goede .SVG maken (zie hier)

Thx! Ik ga me daar in verdiepen!

Het (door @shmoo aangegeven) automatisch laten genereren werkt vaak prima, maar soms is het wenselijk voor de kleinste formaten icoontjes een niet op basis van een grote afbeelding gegenereerde versie te hebben, maar juist een pixel perfect geoptimaliseerde versie.

Zelf gebruik ik Icon Slate. Kan je ook prima icoontjes voor apps en folders mee maken :slight_smile:

Veel voer om uit te proberen. Mooi! ?