Bij webdesign is, zoals je waarschijnlijk weet, elk detail van belang. Een persoon die is overgestapt op uw bron, ziet niet elk van de elementen afzonderlijk, maar ziet het hele beeld als een pakket bestaande uit andere kleine details. Dus als je iets mist tijdens het ontwikkelen van je hulpmiddel, kan dit detail later het hele complex, de hele compositie, bederven.
Zo'n kleinigheid kan bijvoorbeeld de achtergrond van een knop zijn, een verkeerd gekozen lettertype van een klein element en zelfs een favicon. Inderdaad, kijk zelf maar - grote, bekende sites hebben een individueel pictogram dat dit aangeeft in het gedeelte "Bladwijzers" van de browser van de gebruiker. Zonder dit zouden de ontwikkelaars van de bron niet in staat zijn geweest om de compositie te creëren waarnaar ze oorspronkelijk streefden.
Daarom moet u bij het maken van een ontwerp voor uw site rekening houden met een detail als het favicon. In dit artikel zullen we het hebben over hoe we deze kunnen afstemmen op de algemene stijl van de bron, en ook welke formaten deze afbeelding zou moeten hebben.
Site icoon
Laten we eerst definiëren wat dit element is. Kijk nu eens naar de titel van uw browsertabblad. Zoals je kunt zien, is er een kleine afbeelding links ervan, die een vereenvoudigde versie van het logo van de bron aangeeft. Dezelfde afbeelding staat ook in de buurt van de naam van de site die wordt weergegeven in de zoekresultaten. Dit is waar de gebruiker zich door laat leiden als hij de titel ziet.
Veel webmasters begrijpen dat zo'n afbeelding nodig is - maar weinig mensen weten welk faviconformaat voor de site het meest geschikt is. Daarom zullen we in dit artikel niet alleen informatie geven over hoe je zo'n pictogram kunt maken en hoe je het op je bron kunt installeren, maar ook over afbeeldingsformaten.
Het doel van de favicon
Dus, de afbeelding bij de koptekst van de site wordt gebruikt voor identificatie. Dit is het oorspronkelijke doel: om de site uit te drukken waarvan we de naam zien, en om het te laten opvallen in de ogen van de rest. Dit wordt zo eenvoudig mogelijk gedaan door het gebruik van afbeeldingen: we nemen intuïtief informatie in afbeeldingen veel sneller en gemakkelijker waar dan in tekstformaat. Favicons helpen ons daarbij. Maar vergeet niet dat de grootte van de favicon in de ogen van de gebruiker minimaal is. Dit is geen logo in de "header" van de site, die aanvullende informatie kan bevatten in de vorm van inscripties, enkele verduidelijkingen of contactgegevens. Alles wat in het pictogram naast de naam kan worden weergegeven, moet zoveel mogelijk passen in de grootte van het favicon. En hij is, zoals al aangegeven, gewoon miniatuur (slechts 16 bij 16 pixels).
Hoe te kiezenfavicon?
Dus hoe kan een webmaster een pictogram voor zijn site ontwerpen? Opgemerkt moet worden dat het eenvoudigweg comprimeren van het sitelogo meestal niet werkt. Op de emblemen die in de vorm van een logo van een bepaalde hulpbron worden aangebracht, zijn vaak verschillende elementen zichtbaar, die in miniatuurvorm niet altijd correct weergegeven zullen worden. Het is beter om zo'n onderneming onmiddellijk op te geven.
Natuurlijk laat de grootte van het favicon het niet toe om gewoon een inscriptie daar in te voegen. Elke tekst is bij deze resolutie gewoon onzichtbaar. We moeten een nieuw pictogram ontwikkelen dat de stijl van de site overbrengt. Laten we opnieuw naar de grootste sites gaan om oplossingen te vinden.
Veel mensen gebruiken de gestileerde eerste letter van de servicenaam als favicon. Dit is de manier waarop bijvoorbeeld Bing, Yahoo, Yandex, Wikipedia, Google. Er is een andere benadering: als u een korte sitenaam heeft, kunt u deze instellen als achtergrond van uw pictogram. Om ervoor te zorgen dat de grootte van het favicon (in pixels bereikt het, ik herhaal, 16 bij 16 pixels) deze inscriptie correct wordt weergegeven, mag deze niet langer zijn dan 3 letters. Dit is bijvoorbeeld wat de Aol-service doet.
Hoe maak je een favicon aan?
Er zijn verschillende manieren om een pictogram voor de sitenaam te maken. Het makkelijkst is natuurlijk om met verschillende kant-en-klare oplossingen te werken. We kunnen praten over sommige services of programma's waarmee u een pictogram kunt maken van een volwaardige afbeelding door deze te verkleinen. Ik zou echter aanraden om zelf zo'n logo te ontwikkelen. Dit zal in de eerste plaats gevende mogelijkheid om iets te leren; en ten tweede zal het meer tools bieden. Het enige dat u hiervoor hoeft te weten, is wat u moet tekenen en ook hoe groot het favicon moet zijn in de definitieve versie. We zullen iets later praten over de pictogramgrootte voor de site, maar voor nu zullen we enkele subtiliteiten van het werken met dergelijke afbeeldingen opmerken. In het bijzonder, zonder de grootte van het favicon voor de site te noemen, moet het formaat van een dergelijke afbeelding worden verduidelijkt. Zoals ervaren ontwerpers opmerken, moet de afbeelding worden opgeslagen als een-p.webp
Je kunt de afbeelding bijvoorbeeld opslaan met Photoshop, waar het embleem wordt getekend.
Favicon afmetingen
Laten we het nu hebben over hoe groot de afbeelding moet zijn die we naast de sitenaam in de zoekresultaten zien. Zoals eerder vermeld, is de grootte standaard slechts 16 pixels (aan elke kant). Als u deze afbeelding echter in Photoshop probeert te bewerken, zult u zelf zien hoe onhandig het is. Daarom raden we aan om met een vergrote afbeelding te werken, die in de toekomst eenvoudig langs de randen kan worden gecomprimeerd en in het gewenste formaat kan worden opgeslagen.
Multiplatform
Over hoe groot het favicon op uw site moet zijn, moet u echter nog iets in gedachten houden. Niet alle platforms geven een resourceafbeelding op dezelfde manier weer. Apparaten met een Retina-display 'zien' bijvoorbeeld je favicon op 32 bij 32 pixels. En in Safari en op het nieuwe Windows-platform, en helemaal niet, bereiken deze pictogrammen een grootte van 64pixels.
Daarom raden we u aan verschillende versies van het pictogram op te slaan en in de toekomst eenvoudig te voorzien in de wijziging ervan, afhankelijk van het gebruikersplatform. Een ander interessant punt - u kunt proberen het pictogram in het grootste formaat te laden, ervan uitgaande dat het zal "krimpen", afhankelijk van de browser.
Buitenredactie
Natuurlijk is het goed als je goed bent met Photoshop en weet hoe groot het favicon moet zijn en hoe je dit kunt bereiken terwijl je je afbeelding opslaat. Er zijn echter veel beginners die grafische editors nog niet zo dichtbij hebben ontmoet, dus ze kunnen de gewenste afbeelding niet zo gemakkelijk tekenen. Om dergelijke webmasters te helpen, zijn er verschillende diensten waarmee u automatisch het pictogram kunt maken waarin u geïnteresseerd bent. Velen van hen zijn zelfs gratis, wat geen enkele investering van de gebruiker vereist.
Soms hoef je je alleen maar te registreren om te werken, maar zoals je begrijpt, gebeurt dit één keer - bedrijven veranderen hun favicon immers niet zo vaak. Kijk eens naar Google, die het logo elke dag verandert, maar het pictogram niet aanraakt.
Hoe installeer ik een favicon?
In het algemeen is het heel eenvoudig om je site zo in te stellen dat de afbeelding die je nodig hebt correct wordt weergegeven. Het is voldoende om een reeks eenvoudige stappen uit te voeren waarmee zowel zoekmachines als eenvoudige browsers de informatie kunnen lezen.
Om dit te doen, moet de resulterende afbeelding worden opgeslagen metmet de naam favicon.ico en in de hoofdmap van uw bron geplaatst. Dat is het, nu wordt uw afbeelding automatisch herkend en na enige tijd wordt deze aan uw site gekoppeld.
Naast deze binding, kun je nog een regel toevoegen die "suggereert" waar je pictogram zich bevindt. Het ziet er zo uit:
Installeer de code in de kop van de site.
Conclusies
Dus, na het lezen van ons artikel, ben je erachter gekomen hoe groot een favicon moet zijn voor een site en wat het is. Ik denk ook dat u begreep dat het vinden van het juiste pictogram voor uw bron een noodzaak is, omdat het u zowel in termen van toenemende herkenning als in termen van wat extra opv alt bij uw concurrenten in de hand werkt. In ieder geval doen de grootste sites hetzelfde, wat als een goed voorbeeld kan worden beschouwd. En bovendien kost het niet veel moeite - als je eenmaal een favicon hebt gemaakt en correct op je site hebt geïnstalleerd, kun je het de komende maanden vergeten.
Experimenteer daarom gerust, bedenk iets nieuws, probeer - en alles komt goed!
