Wat is het nut van favicons?

Wanneer ik mensen begin te vertellen over het belang van een favicon voor hun algemene online merkstrategie, zeggen ze meestal hetzelfde: "Neemt u deze branding niet een beetje te ver op?"

Mijn antwoord luidt meestal: "Niet als je serieus bent over je eigen merkinspanningen!"

Het is waar, favicons zijn heel kleine dingen, waarschijnlijk het minst belangrijke deel van een site, maar het is aandacht voor detail waardoor een site opvalt; en zelfs als het gek klinkt, zijn favicons erg belangrijk vanuit het oogpunt van branding.

Gezien het feit dat WDD een website is die is gericht op een ontwerperspubliek, denk ik dat velen van jullie al weten wat favicons zijn en hoe ze te maken; maar dit artikel kan u misschien nog helpen te begrijpen waarom u ze zou moeten maken en dient ook als een goede bronpagina.

Ik deel hieronder een grote lijst met favicon-gerelateerde bronnen, dus overweeg deze pagina als bladwijzer te maken voor toekomstige referentie. Oh, en als je dat doet, let dan op het WDD favicon in je bladwijzerslijst;)

Voor het geval je geen ontwerper bent, of een soort zwarte riem in favicon-arts, bespreekt dit artikel waarschijnlijk alles wat je ooit zult moeten weten over deze ongrijpbare kleine 16 × 16 pixels vierkanten, en zelfs een aantal interessante favicuriositeiten . Dus geniet!

Wat is een favicon?

Favicons zijn kleine vierkante afbeeldingen van meestal 16 × 16 pixels die door webbrowsers worden gebruikt om een grafische weergave te tonen van de site die aan de linkerkant van de adresbalk van de browser wordt bezocht. Je hebt waarschijnlijk al veel favicons gezien, zelfs als je niet weet wat ze zijn. Als er enige twijfel is, zal de afbeelding hieronder helpen.

Twee voorbeelden van favicons in een browser met tabbladen van Google Chrome.

Als je geïnteresseerd bent in het begrijpen van een stukje internetgeschiedenis, is dit een interessant feit:

Het woord favicon is een portamentau gemaakt van de woorden "favoriet" en "pictogram", en het werd als zodanig genoemd omdat het voor het eerst werd ondersteund door Microsoft's Internet Explorer 5 en voor het geval u geen IE zou gebruiken, deze browser bookmarking-functie wordt favorieten genoemd.

Wat is het doel van een favicon?

In het begin van het internet waren tools zoals Google Analytics slechts dromen in de hoofden van een paar web-nerds, dus hoe vreemd dit ook mag klinken, toentertijd werden favicons gebruikt als een manier om het websiteverkeer te schatten door het aantal bezoekers tellen dat de bladwijzer van de pagina heeft gemaakt. (Dat is een ander interessant fragment in de geschiedenis van het internet!)

Maar interessante feiten terzijde, de belangrijkste reden om tegenwoordig favicons te hebben, is het verbeteren van de gebruikerservaring. Favicons worden gebruikt in alle moderne browsers op de adresbalk, in de koppelingenbalk, in het bladwijzergebied en op de browsertabbladen. Daarnaast geven enkele browsers ook favicons weer wanneer u een snelkoppeling maakt voor de betreffende website op uw bureaublad en op uw mobiele apparaat.

De belangrijkste reden om een favicon te hebben is natuurlijk de voor de hand liggende verbetering van de gebruikerservaring. Een website zonder een zal een generiek browsersymbool tonen op alle wisselpunten die ik hierboven heb genoemd, en als u om uw gebruikerservaring geeft, moet u om gunsten geven.

Maar ik kan niet voorkomen dat ik dingen door de lens van branding zie, mijn vakgebied, dus ik denk dat favicons nog relevanter zijn vanuit het oogpunt van branding. Nogmaals, met zoveel interactiepunten is het geen misdaad om ze niet te gebruiken om merkbekendheid te vergroten. De waarheid is dat het vinden van creatieve manieren om uw online branding te verbeteren altijd een uitdagende taak is, en het hebben van een favicon is een eenvoudige en eenvoudige manier om dat te bereiken. Dus zorg dat je er een bent, mijn vriend!

Hoe een favicon maken?

Het maken van een website favicon is eenvoudig als taart. Eigenlijk hoef je zelfs geen ontwerper te zijn om dat te doen. Het helpt toch wel als je bent, omdat je je vaardigheden kunt gebruiken om iets te maken dat echt opvalt, maar zelfs de minder technisch onderlegde mensen kunnen het in ongeveer 5 minuten of minder doen met de juiste hulpmiddelen.

Met de websites in de onderstaande lijst kun je een favicon maken door simpelweg een bestaande afbeelding te uploaden. Dus als u een favicon voor uw merk wilt maken, hoeft u alleen maar uw logo te uploaden naar een van de volgende sites en het favicon-bestand te downloaden. Een eitje.

Hier is de Favicon-generatorlijst die u zoekt:

De bovenstaande websites variëren erg in termen van het resulterende bestand dat u krijgt; vooral in termen van bestandsgrootte en extensie. Als u op zoek bent naar het meest compatibele bestand dat mogelijk is, raad ik u ten zeerste aan een afbeelding van 16 × 16 pixels te downloaden met het "ico" -formaat.

Als je wat inspiratie nodig hebt, probeer dan eens de onderstaande favicon-galerijen:

Hoe je favicon te gebruiken?

Zodra u uw favicon met zorg hebt ontworpen, zou het installeren ervan op uw server niet meer dan een paar minuten in twee eenvoudige stappen moeten duren. Daarvoor hebt u toegang nodig tot de hoofdmap van uw website en een hulpprogramma voor tekstbewerking om de HTML-code van uw website te wijzigen.

Stap 1

U moet het bestand "favicon.ico" uploaden naar uw server. Om dit te doen, richt u de adresbalk van uw browser naar uw FTP-server; uw URL zou er ongeveer zo uit moeten zien:

ftp://[email protected]

Druk op Enter en de browser vraagt u om een gebruikersnaam en wachtwoord voordat u toegang verleent tot de bestandsserver. Als je eenmaal binnen bent, upload je gewoon het bestand "favicon.ico" naar de hoofdmap en je bent klaar.

Stap 2

Nu moet je de HTML-pagina van je website aanpassen om te helpen bij het vinden van je favicon-afbeelding. Houd uw FTP-venster open, zoek en download het bestand "index.html" of "header.php" van uw server en voer de onderstaande stappen uit volgens het bestand dat u krijgt:

Als uw website is gemaakt van gewone HTML, voegt u de onderstaande code toe in het gedeelte HEAD van het bestand "index.html" en vergeet niet om "uwsite.com" te wijzigen voor uw eigen websiteadres.

Als u WordPress gebruikt, plaatst u de onderstaande code in het HEAD-gebied van uw "header.php" -bestand.

Met dat gedaan, upload het bestand terug naar waar je het vandaan kwam. Je bent klaar!

Overigens zijn de meeste moderne browsers slim genoeg om jouw favicon-bestand te vinden, zelfs zonder een stuk code, maar alleen zolang de favicon-afbeelding 16 × 16 pixels heeft, is het genoemd als "favicon.ico" en is het opgeslagen in de hoofdmap van uw websitemap.

Hoe maak je een favicon in Photoshop

Met zoveel hulpmiddelen beschikbaar om u te helpen bij het maken van uw favicon, waarom wilt u de moeilijke weg nemen en het maken in Photoshop? Welnu, als je een ontwerper bent en het beste uit je favicon wilt halen, is dat zeker de professionele manier om het te doen. De truc is dat Photoshop geen "ico" -bestanden ondersteunt, dus dat moet download deze plugin van Telegraphics .

Zorg ervoor dat u het installeert voordat u de zelfstudie hieronder volgt. Photoshop werkt niet zonder.

Zoek naar de "ICO" -optie in uw Photoshop "Opslaan als" -vak om te bevestigen dat de plug-in is geïnstalleerd.

Maak een nieuw document in Photoshop door het menu-item "Bestand" en de volgende optie "Nieuw" te selecteren en stel vervolgens uw canvas in op 64 × 64 pixels. Waarom? Omdat de uiteindelijke favicon-afmeting van 16 × 16 zo klein is, kun je je creatieve sap laten stromen dankzij een groter canvas waarop je kunt werken. Plak vervolgens uw logo in het document en maak uw magische eenhoorn-creatieve kracht vrij.

Als u klaar bent, selecteert u gewoon het menu "Afbeelding" en de volgende optie "Beeldformaat" en verkleint u de afbeelding tot 16 × 16 pixels. Vergeet niet om op "Resample Image" te klikken en "Bicubic Sharper" te kiezen, dit om ervoor te zorgen dat het beeld niet vervaagt wanneer het wordt gewijzigd. Als je het eindresultaat niet leuk vindt, maak je je veranderingen in de modder eenvoudig ongedaan met "AltCtrl / AltCmd + Z" en blijf doorwerken tot je tevreden bent.

Om je favicon te voltooien hoef je alleen maar op het menu "Bestand" en de volgende optie "Opslaan als" te klikken, daar herinner je je het bestand als "favicon.ico". Nogmaals, werk gedaan!

Conclusie

Favicons zijn een van die kleine dingen waar we meestal niet te veel aandacht aan besteden, maar de waarheid is dat ze verre van onbeduidend zijn, maar een zeer belangrijk onderdeel van het internet, zowel vanuit het oogpunt van de gebruikersinterface als vanuit het oogpunt van branding. of-view.

Sommigen zeggen dat geweldige dingen in kleine maten worden geleverd, en ik denk dat dat ook op favicons van toepassing is, omdat elke webontwerper en / of merkenspecialist altijd de tijd neemt om een favicon toe te voegen aan de sites van hun klanten, zelfs wanneer de klant geen favicon heeft idee van wat een favicon is, toont een grote mate van professionaliteit en aandacht voor detail; het soort kwaliteit dat elke klant waardeert.

Creëert u favicons voor uw klanten? Zijn ze teveel moeite voor te weinig beloning? Laat ons je mening weten in de reacties.

Uitgelichte afbeelding / thumbnail, verbijsterd beeld via Shutterstock

webontwerp branding hoe favicon tips en trucs

Wat is het Point of Favicons?