11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)
  • Q:
    Bijdrager
    avanti

    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.

    Bijdrager
    Shmoo

    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
    – 2) upload de spulletjes naar de Root folder
    – 3) plak de code in je site
    – 4) controleer of het werk.

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

    Bijdrager
    aartjan.nl/blog

    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.

    Bijdrager
    avanti

    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.

    Bijdrager
    Shmoo

    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.

    Bijdrager
    avanti

    Shmoo, precies. Maar waar heb je dat voorbeeld?

    Bijdrager
    Shmoo

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

    Bijdrager
    feek

    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)

    Bijdrager
    avanti

    Thx! Ik ga me daar in verdiepen!

    Bijdrager
    feek

    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:)

    Bijdrager
    avanti

    Veel voer om uit te proberen. Mooi! ?

11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.