Hva er poenget med favikoner?

Når jeg begynner å fortelle folk om viktigheten av et favicon til deres overordnede strategi for online branding, sier de vanligvis det samme: "Tar du ikke denne merkevaren litt for langt?"

Mitt svar går som regel: "Ikke hvis du er seriøs med din egen merkevarearbeid!"

Det er sant, favicons er svært små ting, sannsynligvis den minst viktige delen av et nettsted, men det er oppmerksomhet på detaljer som gjør et nettsted skiller seg ut; og selv om det høres gal, er favikoner svært viktige fra et merkevarebyggingspunkt.

Tatt i betraktning WDD er et nettsted som er orientert for et designer publikum, min gjetning er at mange av dere allerede vet hva favikoner er og hvordan de skal skape dem; men denne artikkelen kan fortsatt hjelpe deg med å forstå hvorfor du burde lage dem, og også tjene som en god ressursside.

Jeg deler en stor liste med favicon-relaterte ressurser nedenfor, så vær så snill å bokmerke denne siden for fremtidig referanse. Oh, og hvis du gjør det, legg merke til WDD-favicon rett i bokmerkelisten din;)

Bare i tilfelle du ikke er designer eller en slags svartebelt i favicon-kunst, dekker denne artikkelen trolig alt du trenger å vite om disse unnvikende små 16 × 16 piksler, og til og med noen interessante favicuriosities også . Så kos deg!

Hva er et favicon?

Favicons er små firkantede bilder, vanligvis 16 × 16 piksler, som brukes av nettlesere for å vise en grafisk representasjon av nettstedet som besøkes på venstre side av nettleserens adressefelt. Du har sikkert sett mange favicons før, selv om du ikke vet hva de er. Hvis det er noen tvil, vil bildet nedenfor hjelpe.

To eksemplarer av favikoner på en Google Chrome-faneblad.

Hvis du er interessert i å forstå et nettverkshistorie, er det et interessant faktum:

Ordet favicon er et portamentau laget av ordene "favoritt" og "ikon", og det ble oppkalt som sådan fordi det først ble støttet av Microsofts Internet Explorer 5 og bare hvis du ikke bruker IE, vil denne nettleserens bokmerkefunksjon kalles favoritter.

Hva er formålet med et favicon?

Tilbake i de tidlige dagene av internett var verktøy som Google Analytics bare drømmer i tankene til noen nettnerdder, så merkelig som dette kan høres, da ble favikoner brukt som en måte å estimere trafikken på nettsiden til teller antall besøkende som bookmarked siden. (Det er en annen interessant utdrag i historien til Internett!)

Men interessante fakta bortsett, den viktigste grunnen til å ha favicons i dag er å forbedre brukeropplevelsen. Favikoner brukes i alle moderne nettlesere på adressefeltet, i koblingslinjen, i bokmerkingsområdet og i bla gjennom fanene. Dessuten viser noen nettlesere også favicons når du lager en snarvei-kobling for den tilsvarende nettsiden på skrivebordet og mobilenheten.

Sikkert den viktigste grunnen til å ha en favicon er den åpenbare forbedringen i brukeropplevelsen. Et nettsted uten en vil vise et generisk nettlesersymbol på alle punkter i samspillet jeg nevnte ovenfor, og hvis du bryr deg om brukeropplevelsen din, må du bryr deg om favikoner.

Men jeg kan ikke unngå å se ting gjennom merkevarebransjen, mitt kompetanseområde, så jeg tror at favikoner er enda mer relevante fra en merkevarebasert synspunkt. Igjen, med så mange samspill, bruker de ikke å øke merkevarebevisstheten, er en forbrytelse. Sannheten er at å finne kreative måter å forbedre din online branding er alltid en utfordrende oppgave, og å ha en favicon er en enkel og enkel måte å oppnå det på. Så få deg en min venn!

Hvordan lage en favicon?

Å lage et nettsidefavicon er enkelt som paj. Faktisk trenger du ikke engang å være designer for å gjøre det. Sikkert hjelper det hvis du er, som du kan sette dine ferdigheter til å fungere og skape noe som virkelig skiller seg ut, men selv de mindre teknikkvennlige av oss kan gjøre det på omtrent 5 minutter eller mindre ved å bruke de riktige verktøyene.

Nettstedene i listen nedenfor lar deg lage et favicon ved å laste opp et eksisterende eksistensbilde. Så hvis du vil lage et favicon for merkevaren din, er alt du trenger å gjøre, å laste opp logoen din til en av de følgende nettstedene og laste ned favicon-filen. Lett som en plett.

Her er Favicon-generatorlisten du leter etter:

Nettstedene ovenfor varierer mye med hensyn til den resulterende filen du får; spesielt når det gjelder filstørrelse og utvidelse. Hvis du ønsker å få den mest kompatible filen mulig, anbefaler jeg sterkt at du laster ned et bilde som er 16 × 16 piksler med "ico" -formatet.

Hvis du trenger litt inspirasjon, kan du prøve å sjekke ut favicon galleriene nedenfor:

Hvordan bruker du favicon?

Når du har faviconet nøye utformet, bør det ikke ta mer enn et par minutter i to enkle trinn å installere den på serveren din. For det trenger du tilgang til websidens rotasjonsmappe og et tekstredigeringsverktøy for å endre HTML-koden til nettstedet ditt.

Trinn 1

Du må laste opp filen "favicon.ico" til serveren din. For å gjøre det, pek nettleserens adresselinje til FTP-serveren din; Nettadressen din bør se ut som dette:

ftp://[email protected]

Trykk enter og nettleseren vil be deg om et brukernavn og passord før du gir tilgang til filserveren. Når du er i, bare last opp filen "favicon.ico" til rotmappen og du er ferdig.

Steg 2

Nå må du redigere HTML-siden til nettstedet ditt for å hjelpe nettleserne til å finne ditt favicon-bilde. Hold FTP-vinduet ditt åpent, finn og last ned filen "index.html" eller "header.php" fra serveren din og følg trinnene nedenfor i henhold til filen du får:

Hvis nettstedet ditt er laget av vanlig HTML, legger du koden under i HEAD-området i "index.html" -filen, og ikke glem å endre "yoursite.com" for din egen nettsideadresse.

Hvis du bruker WordPress, legger du inn koden under i HEAD-området i "header.php" -filen din.

Med det gjort, last opp filen tilbake til hvor du fikk den fra. Du er ferdig!

Faktisk er de fleste moderne nettlesere klare nok til å finne faviconfilen din selv uten noen kode, men bare så lenge favicon-bildet har 16 × 16 piksler, har det blitt kalt "favicon.ico" og er det lagret i rotmappen til nettsiden din.

Hvordan lage et favicon i Photoshop

Med så mange verktøy tilgjengelig for å hjelpe deg med å lage ditt favorittikon, hvorfor vil du ta den harde veien og lage den i Photoshop? Vel, hvis du er designer og vil ha det beste ut av faviconet ditt, er det sikkert den profesjonelle måten å gjøre det på. Trikset er at Photoshop ikke støtter "ico" -filer, så du må Last ned dette pluginet fra Telegraphics .

Pass på å installere den før du følger opp veiledningen nedenfor. Photoshop vil ikke fungere uten det.

Se etter alternativet "ICO" i boksen "Lagre som" i Photoshop for å bekrefte at pluginet er installert.

Opprett et nytt dokument i Photoshop, velg menypunktet "File" og det følgende alternativet "New", og sett deretter lerretet ditt på 64 × 64 piksler. Hvorfor? Siden den 16 × 16 finale faviconstørrelsen er så liten, kan du få en kreativ juice flytende med et større lerret å jobbe med. Legg deretter inn logoen din i dokumentet, og slipp din magiske enhjørnings-kreative kraft.

Når du er ferdig, velg menyen "Bilde" og følgende alternativ "Bildestørrelse" og reduser bildet til 16 × 16 piksler. Husk å klikke på "Resample Image" og velg "Bicubic Sharper", dette er for å sikre at bildet ikke blir uskarpt når størrelsen endres. Hvis du ikke liker det endelige resultatet, kan du bare angre de siste endringene med "AltCtrl / AltCmd + Z" og fortsett å jobbe med designet til du er fornøyd med det.

For å fullføre favicon alt du trenger å gjøre er å klikke på menyen "File" og det følgende alternativet "Save As", det husker du å navngi filen som "favicon.ico". Igjen, jobb gjort!

Konklusjon

Favicons er en av de små tingene som vi vanligvis ikke betaler for mye oppmerksomhet til, men sannheten er at langt fra å være ubetydelig, er de en svært viktig del av nettet, både fra et brukergrensesnittsperspektiv og et branding point- of-view.

Noen sier at gode ting kommer i små størrelser, og jeg tror det også gjelder favikoner, fordi noen webdesigner og / eller branding-spesialist som alltid tar seg tid til å legge til et favicon på kundens nettsteder, selv når klienten ikke har noe Ideen om hva et favicon er, demonstrerer mye profesjonalitet og oppmerksomhet på detaljer; den typen kvalitet som hver klient setter pris på.

Skaper du favikoner for dine kunder? Er de for mye trøbbel for for liten belønning? Gi oss beskjed om dine tanker i kommentarene.

Utvalgt bilde / miniatyrbilde, bemused bilde via Shutterstock

webdesign branding hvordan favicon Tips og triks

Hva er Point of Favicons?