Ik wil graag één afbeelding gebruiken als zowel een gewoon favicon als een iPhone/iPad-vriendelijk favicon.

Is dit mogelijk? Zou een iPad-vriendelijke 72?72 PNG-schaal als een gewone browser-favicon worden gekoppeld? Of moet ik een aparte 16?16 of 32?32 afbeelding gebruiken?

Antwoord 1, autoriteit 100%

Update voor 2020: vasthouden aan de oorspronkelijke vraag van 16×16 versus 32×32 pictogrammen: de huidige aanbeveling zou moeten zijn om een ​​32×32-pictogram te bieden, waarbij 16×16 volledig wordt overgeslagen. Alle huidige browsers en apparaten ondersteunen pictogrammen van 32×32. Het pictogram wordt routinematig opgeschaald tot wel 192×192, afhankelijk van de omgeving (ervan uitgaande dat er geen grotere formaten beschikbaar zijn of het systeem ze niet heeft herkend). Opschalen van ultralage resolutie heeft een merkbaar effect, dus blijf bij 32×32 als de kleinste basislijn.

Voor IE, Microsoft raadt 16×16, 32×32 en 48×48 aan verpakt in het favicon.ico-bestand.

Voor iOS, Apple raadt specifieke bestandsnamen aan en resoluties, maximaal 180×180 voor de nieuwste apparaten met iOS 8.

Android Chrome gebruikt voornamelijk een manifest en vertrouwt ook op het Apple-aanraakpictogram.

IE 10 op Windows 8.0 vereist PNG-afbeeldingen en een achtergrondkleuren IE 11 op Windows 8.1 en 10 accepteert verschillende PNG-afbeeldingen die zijn gedeclareerd in een speciaal XML-bestand met de naam browserconfig.xml.

Safari voor Mac OS X El Capitan introduceert een SVG-pictogram voor vastgezette tabbladen.

Sommige andere platforms zoeken naar PNG-bestanden met verschillende resoluties, zoals de 96×96-afbeelding voor Google TVof de 228×228 afbeelding voor Opera Coast.

Bekijk deze lijst met favicon-afbeeldingenvoor een volledige referentie.

TLDR: Deze favicon-generatorkan al deze bestanden tegelijk genereren.De generator kan ook worden geïmplementeerd als een WordPress-plug-in. Volledige openbaarmaking: ik ben de auteur van deze site.

Antwoord 2, autoriteit 39%

Kort antwoord

Het favicon hoort een set van 16×16, 32×32 en 48×48 foto’s in ICO-formaat. ICO-indeling is anders dan PNG. Niet-vierkante afbeeldingen worden niet ondersteund.

Om de favicon te genereren, om de vele redenen die hieronder worden uitgelegd, raad ik je aan om deze favicon-generatorte gebruiken. Volledige openbaarmaking: ik ben de auteur van deze site.

Lang, uitgebreid antwoord

Favicon moet vierkant zijn. Desktopbrowsers en Apple iOS ondersteunen geen niet-vierkante pictogrammen.

Het favicon wordt ondersteund door verschillende bestanden:

• Een favicon.ico-pictogram.
• Enkele andere PNG-pictogrammen.

Om de beste resultaten te krijgen in desktopbrowsers (Windows/IE, MacOS/Safari, enz.), moet u beide soorten pictogrammen combineren.

favicon.ico

Hoewel alle desktopbrowsers met dit pictogram kunnen omgaan, is het in de eerste plaats bedoeld voor een oudere versie van IE.

Het ICO-formaat verschilt van het PNG-formaat. Dit punt is lastig omdat sommige browsers slim genoeg zijn om een ​​PNG-afbeelding correct te verwerken,
zelfs wanneer het ten onrechte werd hernoemd met een ICO-extensie.

Een ICO-bestand kan meerdere afbeeldingen en Microsoft raadt aan om 16×16, 32×32 en 48×48 versies van het pictogram in favicon.icote plaatsen.
IE gebruikt bijvoorbeeld de 16×16-versie voor de adresbalk en de 32×32 voor een taakbalk-snelkoppeling.

Verklaar het favicon met:

<link rel="icon" href="/path/to/icons/favicon.ico">

Het wordt echter aanbevolen om favicon.icoin de hoofdmap van het web te plaatsen siteen om het helemaal niet te declarerenen de moderne browsers de PNG-pictogrammen te laten kiezen.

PNG-pictogrammen

Moderne desktopbrowsers (IE11, recente versies van Chrome, Firefox…) gebruiken liever PNG-pictogrammen. De gebruikelijke verwachte formaten zijn 16×16, 32×32 en “zo groot mogelijk”.
MacOS/Safari gebruikt bijvoorbeeld het 196×196-pictogram als dit het grootste is dat het kan vinden.

Wat zijn de aanbevolen maten? Kies je favoriete platforms:

• De meeste desktopbrowsers: 16×16, 32×32, “zo groot mogelijk”
• Android Chrome: 192×192
• Google TV: 96×96
• … en anderen die min of meer gedocumenteerd zijn.

De PNG-pictogrammen worden gedeclareerd met:

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...

Pas op: Firefox ondersteunt de sizesniet attribuut en gebruikt het laatste PNG-pictogram dat het vindt. Zorg ervoor dat de afbeelding van 32×32 als laatste wordt aangegeven: het is goed genoeg voor Firefox, en dat voorkomt dat het een grote afbeelding downloadt die het niet nodig heeft.edit: gerepareerd in 2016.

Houd er rekening mee dat Chrome de sizesen heeft de neiging om alle gedeclareerde pictogrammente laden. Het is beter om niet te veel pictogrammen te declareren.edit: opgelost in 2018.

Mobiele platforms

Deze vraag gaat over desktop-favicon, dus het is niet nodig om al te veel in dit onderwerp te duiken.

Apple definieert het aanraakpictogram voor het iOS-platform .
iOS ondersteunt geen niet-vierkant pictogram. Het schaalt eenvoudig niet-vierkante afbeeldingen om ze te maken vierkant (kijk naar het voorbeeld van Kioskea).

Android Chrome vertrouwt op het Apple-aanraakpictogram en definieert ook een 192×192 PNG-pictogram.

Microsoft definieert de tegelafbeeldingen de browserconfig.xml-bestand.

Conclusie

Het genereren van een favicon die overal werkt, is behoorlijk ingewikkeld. Ik raad je aan deze favicon-generatorte gebruiken. Volledige openbaarmaking: ik ben de auteur van deze site.

Antwoord 3, autoriteit 10%

Ik zie hier geen actuele informatie, dus here goes:

Om deze vraag nu te beantwoorden: 2 favicons zullen het niet doen als je wilt dat je pictogram er overal geweldig uitziet. Zie onderstaande maten:

16 x 16 Standaardformaat voor browsers
24 x 24 IE9 vastgezette sitegrootte voor gebruikersinterface
32 x 32 IE nieuw paginatabblad, Windows 7+ taakbalkknop, Safari-leeslijst-zijbalk
48 x 48 Windows-site
57 x 57 iPod touch, iPhone tot 3G
60 x 60 iPhone touch tot iOS7
64 x 64 Windows-site, Safari Reader List-zijbalk in HiDPI/Retina
70 x 70 – Win 8.1 Metro-tegel
72 x 72 iPad touch tot iOS6
76 x 76 iOS7
96 x 96 GoogleTV
114 x 114 iPhone-retina-touch tot iOS6
120 x 120 iPhone retina touch iOS7
128 x 128 Chrome Web Store-app, Android
144 x 144 IE10 Metro-tegel voor vastgezette site, iPad-retina tot iOS6
150 x 150 – Win 8.1 Metro-tegel
152 x 152 iPad retina touch iOS7
196 x 196 Android Chrome
310 x 150 – Win 8.1 brede metrotegel
310 x 310 – Win 8.1 Metro-tegel

Antwoord 4, autoriteit 7%

16×16 pixels, *.ico formaat.

Antwoord 5, autoriteit 7%

2021-standaarden dankzij faviconit

Ik gebruik faviconit.comvoor de best mogelijke browser- en apparaatondersteuning. U uploadt een afbeelding en deze site geeft u de code, de geconverteerde afbeeldingen en een browserconfig-bestand.

We kunnen eenvoudig een favicon handmatig uploaden naar onze website van 16×16 en het zal waarschijnlijk in bijna elke browser verschijnen.

Maar als je het als een van je favorieten op je smartphone of tablet markeert, hebben we grotere afbeeldingen nodig (60×60 tot 144×144).

En laten we zeggen dat een van onze gebruikers een snelkoppeling op hun bureaublad maakt. In dat geval ziet een 196×196 er beter uit!

Voorbeeldcode van wat faviconit je zou geven, naast alle geconverteerde afbeeldingen:

<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">

Sinds Windows 8

Maar dat is niet alles. Sinds Windows 8 kunnen we snelkoppelingen maken naar websites met tegels!

<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

Browserconfig.xml

Upload een bestand met de naam browserconfig.xml (om de tegels in Windows >8) in te schakelen

<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/favicon-70.png"/>
            <square150x150logo src="/favicon-150.png"/>
            <square310x310logo src="/favicon-310.png"/>
            <TileColor>#FFFFFF</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Antwoord 6, autoriteit 6%

Ik weet niet zeker of/hoe browsers grote pictogrammen schalen, maar de W3C stelt het volgende voor¹:

Het formaat voor de afbeelding die je hebt gekozen, moet 16×16 pixels of 32×32 pixels zijn, met 8-bits of 24-bits kleuren. Het formaat van de afbeelding moet PNG (een W3C-standaard), GIF of ICO zijn.

¹w3c.org: hoe u een favicon aan uw site kunt toevoegen ontwikkeling).

Antwoord 7, autoriteit 5%

Om uw favicon correct in alle browsers te laten werken, moet u meer dan 10 bestanden in de juiste formaten en indelingen toevoegen.

Mijn vriend en ik hebben speciaal hiervoor een app gemaakt! je kunt het vinden op faviconit.com

We hebben dit gedaan, zodat mensen niet al deze afbeeldingen en de juiste tags met de hand hoeven te maken, maar ze allemaal maken waar ik me erg aan erger!

Antwoord 8, autoriteit 3%

De eenvoudigste oplossing (2021)

Gebruik één(!) SVG-afbeelding

Als het u niet uitmaakt dat Safari ondersteunt, kunt u een enkel SVG-pictogram gebruiken:

<link rel="icon" href="favicon.svg" type="image/svg+xml" sizes="any">

Gebruik één (!) PNG-afbeelding

Als u volledige ondersteuning* wilt, moet u dit aan de kop van uw document toevoegen:

<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">

De laatste link is voor Apple (startscherm), de tweede voor Android (startscherm) en de eerste voor de rest.

Het formaat is precies het formaat dat het Android-startscherm gebruikt. De grootte van het Apple-startschermpictogram is 60px (3x), dus 180px en wordt verkleind. Andere platforms gebruiken het standaard snelkoppelingspictogram, dat ook wordt verkleind.

*Merk op dat deze oplossing geen “tegels” ondersteunt in Windows 8/10. Het ondersteunt echter wel afbeeldingen in snelkoppelingen, bladwijzers en browsertabbladen.

Antwoord 9, autoriteit 2%

Wikipediaheeft dit te zeggen:

Bovendien kunnen dergelijke pictogrambestanden
ofwel 16?16 of 32?32 pixels groot,
en ofwel 8-bits of 24-bits in kleur
diepte (merk op dat GIF-bestanden een
beperkt, 256 kleurenpalet inzendingen).

Ik denk dat de beste manier is om een ​​32×32 gif te gebruiken en deze met verschillende browsers te testen.

Antwoord 10

U magpictogrammen in meerdere formaten in hetzelfde bestand hebben. Ik maak routinematig favicons (.ico-bestand) van 48, 32 en 16 pixels. U kunt elke gewenste afbeelding toevoegen. De vraag is of de iPhone een ico-bestand gebruikt?

icoondersteunt ook transparantie, maar ik weet niet zeker of het een alfakanaal is zoals PNG; waarschijnlijk meer zoals GIF waar het aan of uit is.

Antwoord 11

Volgens het Wikipedia-artikel over Faviconondersteunt Internet Explorer alleen het ICO-formaat voor favicons.

Ik zou het bij twee verschillende pictogrammen houden.

Antwoord 12

Zoals ik heb geleerd, is geen van die verschillende oplossingen perfect. Het gebruik van een favicon-generatoris inderdaad een goede oplossing, maar hun aantal is overweldigend en het is moeilijk om te kiezen. Ik wil hieraan toevoegen dat als u wilt dat uw website PWA is ingeschakeld, u ook een 512×512-pictogram moet opgeven, zoals vermeld door Google Devs:

pictogrammen waaronder een 192px en een 512px versie

Ik heb niet veel favicon-generators ontmoet die die criteria handhaafden (firebase wel, maar er zijn veel dingen die het niet doet). De oplossing moet dus een mix zijn van vele andere oplossingen.

Ik weet niet, vandaag begin 2020 of het verstrekken van een 16×16, 32×32 nog steeds relevant is. Ik denk dat het in een bepaalde context nog steeds van belang is, bijvoorbeeld als uw gebruikers om de een of andere reden nog steeds IE gebruiken (dit gebeurt nog steeds in sommige privébedrijven die om de een of andere reden niet naar een nieuwere browser migreren)

Antwoord 13

Nee, je kunt geen niet-standaard formaat of afmeting gebruiken, omdat dit grote schade aanricht in de browsers van mensen, waar de pictogrammen ook worden weergegeven. Je zou het 12×16 kunnen maken (met vier pixels witte/transparante opvulling aan de kant van 12 pixels) om je beeldverhouding te behouden, maar je kunt niet groter gaan (nou ja, dat kan, maar de browser zal het verkleinen).

Antwoord 14

Je zult voor elke resolutie aparte bestanden nodig hebben, vrees ik. Er is een heel goed artikel over campagnemonitor waarin wordt beschreven hoe ze hun pictogrammen voor elk iOS-apparaat hebben gemaakt en geïmplementeerd:

http://www.campaignmonitor.com /blog/post/3234/designing-campaign-monitor-ios-icons/

Antwoord 15

Het formaat van favicon moet vierkant zijn, anders zal de browser het uitrekken. Helaas, Internet Explorer < 11 ondersteunen geen .gif- of .png-bestandstypen, maar alleen het .ico-formaat van Microsoft. U kunt een of andere “favicon-generator”-app gebruiken, zoals: http://favicon-generator.org/

Antwoord 16

favicon.ico is 16×16

<link rel="shortcut icon" href="favicon.ico"/>

En ik gebruik deze om mooi te zijn op mobiel en tablet:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="apple-touch-icon-precomposed" href="img/ico57.png">

Het is belangrijk om de naam “favicon.ico” in de hoofdmap te gebruiken, omdat veel browsers daar eerst proberen te vinden.

Antwoord 17

Het favicon hoeft niet 16×16 of 32×32 te zijn. Je kunt een favicon van 80×80 of 100×100 maken, zorg er gewoon voor dat beide waarden even groot zijn, en maak het natuurlijk niet te groot of te klein, kies een redelijk formaat.

Antwoord 18

Het lijkt erop dat je bestand van het type .icomoet zijn.

Bekijk dit bericht over favicons:

http://www.html-kit.com/support/ favicon/image-size/

Antwoord 19

het formaat voor de afbeelding die je hebt gekozen moet 16×16 pixels zijn of
32×32 pixels, met 8-bits of 24-bits kleuren. Het formaat van de
afbeelding moet een PNG (een W3C-standaard), GIF of ICO zijn. – Hoe voeg je een favicon toe aan je site – QA @ W3C

Antwoord 20

Mag ik iedereen eraan herinneren dat de vraag was:

Ik wil graag één afbeelding gebruiken als zowel een gewoon favicon als een iPhone/iPad-vriendelijk favicon? Is dit mogelijk? Zou een iPad-vriendelijke 72×72 PNG-schaal als een gewone browser-favicon worden gekoppeld? Of moet ik een aparte afbeelding van 16×16 of 32×32 gebruiken?

Het antwoord is: JA, dat kan! JA, het wordt geschaald. NEE, je hebt geen ‘gewone browser favicon’ nodig. Bekijk dit antwoord: https://stackoverflow.com/a/48646940/2397550