Favicons zijn de kleine pictogrammen die u ziet op de tabbladen in de browser. Meestal zijn ze gewoon simpel ICO-bestanden, maar de laatste jaren ben geworden als een pictogram voor uw website, met tal van concurrerende soorten en maten.
Hoe Gebruik Je een Favicon?
De meeste browsers ondersteunen meerdere soorten favicons. De meeste van de tijd, zal uw browser automatisch op te halen favicons in de waarschijnlijke locaties zonder dat u zelfs maar te vertellen, maar u kunt deze handmatig toevoegen aan uw website.
Als u niet de exacte maat of indeling, de meeste browsers gebruikt de hoogste resolutie kan ondersteunen, en de schaal van favicons omhoog of omlaag. Je hoeft er niet echt te zijn 20 verschillende favicon bestanden voor elk van de “officiële” pictogram resolutie, slechts een paar high-res die in aanvulling op de standaard. Maar, als je moet een ieder, kunt u verwijzen naar deze cheat sheet voor meer informatie.
Zodra u een foto die u wilt gebruiken als pictogram kunt u favicons handmatig in een foto-editor. Voor het belang van gezond verstand, maar, zult u waarschijnlijk wilt gebruiken om een favicon generator om automatisch doen. Dit zal het genereren van een groot aantal bestanden dat u wilt koppelen in de <link> en <meta> – tags in de <head> sectie van je website HTML-code.
Als je niet aan het beheren van uw eigen web-server (d.w.z. als u managed hosting met een dienst als SquareSpace), je hebt contact op met uw serviceprovider voor de instellingen met betrekking tot de favicon bestanden. Meestal zullen ze behandelen voor u, en u hoeft het alleen maar om de bestanden.
Regelmatig Favicon Tags
De oorspronkelijke favicons zijn favicon.ico-bestanden. De minimale grootte is 16×16, maar ICO-bestanden kunnen bevatten meerdere verschillende resoluties. Meestal favicon.ico wordt een set van 16×16, 32×32 en 48×48 iconen, allemaal gebundeld. Kunt u dit pictogram van een PNG met behulp van online favicon generator.
U kunt uw favicon door het toevoegen van een link naar het favicon.ico-bestand, meestal geplaatst in de root (hoofdmap) van uw web server, naast je index.html en andere bestanden.
<link rel=”shortcut icon” href=”favicon.ico” />
Je hoeft eigenlijk niet altijd nodig, de tag, zoals de meeste browsers automatisch te controleren voor het bestand, maar het is goed om te zijn. Dit is veruit de meest voorkomende soort van de favicon, en zal ondersteund worden bijna overal dat ondersteunt favicons op alle.
Als uw favicon werkt niet, het is het meest waarschijnlijk, omdat het bestand niet op de juiste plek. Controleer of http://www.yourwebsite.com/favicon.ico toegankelijk is, en als het rendeert goed in uw browser. Als u geüploade handmatig het bestand, is het mogelijk niet de juiste machtigingen kunnen worden gecorrigeerd met behulp van een opdrachtregel met:
sudo chmod +r favicon.ico
Die zal toelaten om te worden gelezen door de webserver.
PNG Favicons
De meeste nieuwere browsers ondersteunen een hogere resolutie PNG favicons, voor gebruik in andere gebieden dan de tab-bar, zoals de pagina ‘nieuw tabblad’ in Chrome, of de Android desktop. U zult waarschijnlijk willen deze zo uw pictogram ziet er niet korrelig wanneer opgeblazen.
U kunt deze gebruiken naast de favicon.ico-bestand, als de browser wordt de hogere resolutie.
<link rel=”icon” type=”image/png” grootte=”96×96″ href=”/favicon-96×96.png”>
<link rel=”icon” type=”image/png” grootte=”32 x 32″ href=”/favicon-32×32.png”>
<link rel=”icon” type=”image/png” grootte=”16 x 16″ href=”/favicon-16×16.png”>
De favicon generator genereert ook een android-chrome-512 x 512.png-bestand, maar dit zal gecontroleerd worden automatisch en hoeft niet van een tag. Chrome op Android zal gebruik maken van de Apple-Touch-Icon om op terug te vallen als het ontbreekt. Als u wilt opnemen, kunt u de grootte PNG-icoon door het veranderen van de afmetingen en het wijzen naar een ander bestand:
<link rel=”icon” type=”image/png” grootte=”512 x 512″ href=”/favicon-512 x 512.png”>
Het is niet veel van een probleem toe te voegen meer links, zoals de meeste browsers zal u alleen om de favicon ze nodig hebben.
Apple-Touch-Icon
Dit is het pictogram dat wordt gebruikt wanneer uw webpagina wordt toegevoegd aan een iOS-gebruikers Home Scherm van Safari, en voor verschillende andere plaatsen in de iOS-UI. Met Retina-schermen hebben een hoge resolutie-pictogram maakt een groot verschil.
De exacte grootte van er is een hoop veranderd met de verschillende versies van iOS, maar het zal altijd een plein, met de huidige breedte 180px voor Retina iPhones. Je kunt een iOS-icoon met een apple-touch-icon-link, zoals:
<link rel=”apple-touch-icon” grootte=”180×180″ href=”/apple-touch-icon.png”>
iOS zal automatisch de schaal van de hogere resolutie van de iconen, maar u kunt meerdere pictogrammen in verschillende maten en bewaar een beetje voor de bandbreedte in op dezelfde manier als PNG iconen.
De meeste browsers zal u controleren automatisch voor /apple-touch-icon.png, dus je kan het niet eens nodig de tag. Omdat dit pictogram wordt gemeengoed, het is ook gebruikt als fallback voor veel browsers als u niet opgeeft met een high-res PNG-pictogram.
Safari en Touch Bar Pictogram
Safari de optie van het gebruik van monochrome pictogrammen voor de macOS Touch Bar. Dit is niet helemaal nodig, en Safari wordt nog steeds gebruik van reguliere favicons als dit is er niet, maar het ziet er een beetje beter als je het icoon heeft een gekleurde achtergrond.
U kunt deze automatisch met de favicon generator, en je hebt om toe te voegen:
<link rel=”masker-icon” href=”/icons/safari-vastgemaakte-tabblad.svg” color=”#5bbad5″>
Om uw groeiende lijst van links. Safari niet te controleren of deze automatisch.
Windows 10 Metro Tegels
Als iemand pinnen van uw site om hun Start-menu of op het bureaublad, zal het display van uw site pictogram.
Dit moet terugvallen op andere mogelijkheid als je het niet hebt, zo veel als Safari is het niet geheel noodzakelijk. Maar om er beter uitzien wanneer deze zijn vastgemaakt aan het menu Start, moet u een paar meta-tags voor de configuratie:
<meta name=”msapplication-TileColor” content=”#000000″>
<meta name=”msapplication-config” content=”/browserconfig.xml”>
<meta name=”thema-kleur” content=”#ffffff”>
Eigenlijk gewoon het definiëren van de kleur van de achtergrond tegel, en de kleur van het thema. De rest van de configuratie is geplaatst in een XML-bestand:
<?xml version=”1.0″ encoding=”utf-8″?>
<browserconfig>
<msapplication>
<tegel>
<square150x150logo src=”/mstile-150×150.png”/>
<TileColor>#000000</TileColor>
</tegel>
</msapplication>
</browserconfig>
Dat lijkt een beetje overbodig maar voor een bestand koppelen. U zult nog steeds nodig hebt om de mstile-150×150.png-bestand in de hoofdmap van uw webserver voor het goed te laten werken.
Het krijgen van Rond de Hosting van Bestanden op Uw webserver Root
Als je echt niet wilt blootstellen alle bestanden die worden gehost op de server root, kan u altijd redirect /favicon.ico naar een andere locatie. Bijvoorbeeld, in nginx, je zou kunnen doen:
locatie = /favicon.ico {
root /nieuw/images/path;
}
Die zou nginx kijk in /nieuw/images/path voor uw favicons. Dit zal geen effect hebben, client, zodat je nog steeds wilt linken /favicon.ico alsof alles was hetzelfde.