Vraag
- Wat is de beste werkwijze voor het maken van een faviconop een website?
- en is een .icobestand met zowel 16×16 als 32×32 afbeeldingen beter dan een .pngbestand met alleen 16×16?
- Zou de juiste methode die tegenwoordig de voorkeur heeft, niet kunnen werken in redelijk oude browsers?
Methode 1
Het plaatsen van een bestand met de naam favicon.icoin de hoofdmap is één manier. De browser vraagt altijd om dat bestand. Je kunt dat zien in de apache-logbestanden.
Methode 2
HTML-tag in het gedeelte <head>:
<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
Antwoord 1, autoriteit 100%
Er zijn verschillende manieren om een favicon te maken. De beste manier voor u hangt af van verschillende factoren:
- De tijd die je aan deze taak kunt besteden. Voor veel mensen is dit “zo snel mogelijk”.
- De inspanningen die je bereid bent te leveren. Zoals het met de hand tekenen van een 16×16-pictogram voor betere resultaten.
- Specifieke beperkingen, zoals ondersteuning van een specifieke browser met vreemde specificaties.
Eerste methode: gebruik een favicon-generator
Als je de klus goed en snel wilt klaren, kun je een favicon-generatorgebruiken. Deze maakt de afbeeldingen en HTML-code voor alle grote desktop- en mobiele browsers. Volledige openbaarmaking: ik ben de auteur van deze site.
Voordelen van een dergelijke oplossing: het is snel en alle compatibiliteitsoverwegingen zijn al voor u behandeld.
Tweede methode: maak een favicon.ico (alleen desktopbrowsers)
Zoals u aanmeldt, kunt u een favicon.ico-bestand maken die 16×16 en 32×32-afbeeldingen bevat (merk op Microsoft beveelt 16×16, 32×32 en 48×48 aan.
Verklaar het dan in uw HTML-code:
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
Deze methode werkt met alle desktopbrowsers, oud en nieuw. Maar de meeste mobiele browsers zullen de Favicon negeren.
Over uw suggestie van het plaatsen van de favicon.icoBestand in de root en niet declareren: pas op, hoewel deze techniek op de meeste browsers werkt, is het niet 100% betrouwbaar. Windows Safari kan bijvoorbeeld niet vinden (toegekend: deze browser is op de een of andere manier af te wijzen op Windows, maar u krijgt het punt). Deze techniek is handig in combinatie met PNG-pictogrammen (voor moderne browsers).
Derde methode: Maak een Favicon.ico, een PNG-pictogram en een Apple Touch-pictogram (alle browsers)
In uw vraag vermeld u de mobiele browsers niet. De meesten van hen zullen de favicon.ico-bestand negeren. Hoewel uw site mogelijk is toegewijd aan desktopbrowsers, is de kans groot dat u de mobiele browsers niet helemaal wilt negeren.
U kunt een goede compatibiliteit bereiken met:
favicon.ico, zie hierboven.- A 192×192 PNG-pictogram voor Android Chrome
- A 180×180 Apple Touch-pictogram (voor iPhone 6 Plus; ander apparaat zal deze naar beneden schalen).
Verklaar ze met
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">
Dit is niet het volledige verhaal, maar in de meeste gevallen is het goed genoeg.
Antwoord 2
- u kunt met deze website werken voor het genereren van favin.ico
- Ik raad aan om het .ico-formaat te gebruiken omdat de png niet werkt met methode 1 en ico zou meer details kunnen hebben!
- beide methoden werken met alle browsers, maar wanneer het automatisch werkt, wat wilt u er dan een code voor typen? dus ik denk dat methode 1 beter is.
Antwoord 3
Ik heb https://iconifier.netgebruikt
Ik heb mijn afbeelding geüpload, het zipbestand van afbeeldingen gedownload, afbeeldingen aan mijn server toegevoegd, de aanwijzingen op de site gevolgd, inclusief het toevoegen van de links naar mijn index.html en het werkte. Mijn favicon wordt nu weergegeven op mijn iPhone in Safari bij ‘Toevoegen aan startscherm’
Antwoord 4
Aangezien SVG-favicon ondersteuning krijgt in de belangrijkste browsers, is een andere optie om over te schakelen naar SVG:
<link rel="icon" sizes="any" type="image/svg+xml" href="favicon.svg">
Base64 SVG-pictogram gecodeerd met deze online tool:
<link rel="icon" sizes="any" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5e400' d='m6 21 2-7-6-5h7l3-7 3 7h7l-6 5 2 7-6-4z'/%3E%3C/svg%3E%0A">
Dit artikellegt enkele voordelen uit van het overschakelen naar SVG; met name:
- Toekomstbestendig (garandeer dat ons favicon er op toekomstige apparaten helder uitziet)
- Ondersteuning voor donkere modus
Dit berichtgeeft een goed antwoord of/waar het veilig is om een SVG-afbeelding voor favicon te gebruiken.
Sites zoals GitHub gebruiken SVG-favicons.