Ik probeer een heel eenvoudige voorbereidende oefening te doen voor het opzetten van een website die een favicon maakt.
Dit is de code die ik gebruik:
<!DOCTYPE html >
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>
Maar het werkt niet – kan iemand me alsjeblieft helpen?
Ik heb het bestand favicon.ico op hetzelfde niveau opgeslagen als mijn html-bestand (in een submap).
Hartelijk dank
Antwoord 1, autoriteit 100%
Met de introductie van (i|android|windows)telefoons is er veel veranderd, en het kost veel tijd om een correcte en complete oplossing te krijgen die op elk apparaat werkt.
Je kunt een kijkje nemen op https://realfavicongenerator.net/favicon_compatibilityof http://caniuse.com/#search=faviconom een idee te krijgen van de beste manier om iets te krijgen dat op elk apparaat werkt .
Je zou eens moeten kijken naar
http://realfavicongenerator.net/
om een groot deel van dit werk te automatiseren, en waarschijnlijk op https://github.com/audreyr/favicon -cheat-sheetom te begrijpen hoe het werkt (zelfs als deze laatste bron al heel lang niet is bijgewerkt).
Eén complete oplossing vereist het volgende aan je header toe te voegen (met de bijbehorende afbeeldingen en bestanden natuurlijk):
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">
in juni 2016, realfavicongenerator beweerde dat het volgende 5 regels code ondersteunden zoveel mogelijk apparaten als de vorige 18 regels:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
Antwoord 2, autoriteit 66%
Ik gebruik dit op mijn site en het werkt prima.
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
Antwoord 3, autoriteit 14%
Er is een heel eenvoudige methode om een favicon in te stellen, die al heel lang bestaat AFAIK.
Plaats het bestand favicon.icoop de standaardlocatie.
d.w.z.
http://www.yoursite.com/favicon.ico
Dit werkt in bijna elke browser zonder een <link>-tag.
Dit werkt echter alleen als het een *.ico-bestand is.png’s en andere formaten moeten nog worden gekoppeld met een <link>-tag
Antwoord 4, autoriteit 8%
Hieronder wat informatie over fav Icon
Wat is FavIcon?
FavIcon is niets anders dan een kleine afbeelding die linksboven verschijnt samen met de titel van de adresbalk van de applicatie. De standaardformaatspecificatie voor favicon.ico is 16 bij 16 pixels. Zie onderstaande bijgevoegde afbeelding.
Hoe werkt het?
Meestal voegen we onze FavIcon.ico-afbeelding toe aan de map met route-oplossingen en de toepassing kiest deze automatisch tijdens het uitvoeren. Maar meestal moeten we hieronder beide linkreferenties gebruiken.
<link rel="icon" href="favicon.ico" type="image/ico"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
De ene browser verwacht er een (rel=”icon”) Een andere browser verwacht een andere rel=”shortcut icon”
Type = “Afbeelding / X-pictogram” of Type = “Afbeelding / ico”: Verwacht eens Exact ICO-afbeelding en één verwacht dat elk beeld is geformatteerd van .jpg of .pn ..etc .
We moeten boven twee tags gebruiken aan de Common Pages Like – Master-pagina, hoofdframe dat op alle pagina’s
wordt gebruikt
5, Autoriteit 7%
U kunt een kijkje nemen op de w3 hoe u , ik denk vindt het nuttig
Uw koppelingstagattribuut moet rel="icon"
zijn
6
Uit ervaring van mijn favicon.ico niet verschijnen, ik deel mijn ervaring. Je kunt het niet laten zien totdat je je website op een host hebt geplaatst, probeer het daarom op een localhost te zetten met behulp van XAMPP – http://www.apachefriends.org/en/xampp.html . Dit is hoe de Favicon verschijnt en zoals anderen aanbevolen, verandering:
rel="shortcut icon"
van
rel="icon"
Ook op deze manier .png Favicons kunnen worden gebruikt voor slickness.
7
<head>
<link rel="shortcut icon" href="favicon.ico">
</head>
8
Deze methode wordt aanbevolen
<link rel="icon"
type="image/png"
href="/somewhere/myicon.png" />
9
Probeer dit in het hoofd van het document te plaatsen:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>