Kun aloin kertoa ihmisille siitä, kuinka tärkeää favicon on heidän online-brandingstrategiastaan, he yleensä sanovat samaa: "Ettekö tuo tätä brändäystä vähän liian pitkälle?"

Vastaukseni menee tavallisesti: "Ei, jos olet vakavasti oman brändäystyönne!"

Se on totta, favicons ovat hyvin pieniä asioita, todennäköisesti vähiten tärkeä osa sivustosta, mutta se on huomiota yksityiskohtiin, mikä tekee sivustosta erottuvan; ja vaikka se kuulostaa hulluksi, favicons ovat erittäin tärkeitä brändin näkökulmasta.

Koska WDD on suunnittelijayleisölle suunnattu sivusto, arvaus on, että monet teistä tietävät jo, mitkä faviconit ovat ja miten ne luodaan; mutta tämä artikkeli voi silti auttaa sinua ymmärtämään, miksi sinun pitäisi tehdä ne ja toimia myös hyvällä resurssisivuilla.

Jaamme suuren luettelon alla olevista favicon-resursseista, joten pidä tätä sivua kirjanmerkkeinä myöhempää käyttöä varten. Voi, ja jos et, huomaa WDD-favicon oikein kirjanmerkkiluettelossasi;)

Joten jos et ole suunnittelija tai minkäänlainen mustahihna favicon-taiteessa, tämä artikkeli kattaa luultavasti kaiken, mitä sinun tarvitsee tietää näistä vähättelevistä pienistä 16 × 16 pikselin neliöistä ja jopa mielenkiintoisista puustoista . Joten nauti!

Mikä on favicon?

Favicons ovat pieniä neliömäisiä kuvia yleensä 16 × 16 pikseliä, joita verkkoselaimet käyttävät näyttävän sivun graafisesta esityksestä selaimen osoiterivin vasemmassa reunassa. Olet luultavasti nähnyt paljon favicon aiemmin, vaikka et tiedä mitä he ovat. Jos on epäilyksiä, alla oleva kuva auttaa.

Favicons

Kaksi esimerkkiä faviconsista Google Chromen välilehdellä.

Jos olet kiinnostunut ymmärtämään Internetin historiaa, tässä on mielenkiintoinen tosiasia:

Sana favicon on sanan "suosikki" ja "kuvake", joka on nimetty sellaiseksi, koska sen tuki Microsoftin Internet Explorer 5 ja vain siinä tapauksessa, että et käytä IE: tä, tämä selaimen kirjanmerkkiominaisuus kutsutaan suosikkeiksi.

Mikä on favicon tarkoitus?

Internetin alkuaikoina Google Analyticsin kaltaiset työkalut olivat vain unelmia muutamien verkkokerrosten mielissä, niin outoa kuin tämä saattaa kuulostaa, silloin favicons käytettiin tapana arvioida verkkosivuston liikennettä laskemalla sivun kirjanmerkkisiä kävijöitä. (Tämä on toinen mielenkiintoinen katkelma Internetin historiassa!)

Mutta mielenkiintoisia tosiasioita sivuun, tärkein syy puhua nykyään on parantaa käyttäjien kokemuksia. Faviconeja käytetään kaikissa nykyaikaisissa selaimissa osoitekenttään, linkkipalkkiin, kirjanmerkkeihin ja sen selausvälilehtiin. Tämän lisäksi muutamat selaimet näyttävät faviconeja aina, kun luot pikakuvakkeen vastaavan verkkosivuston työpöydälle ja mobiililaitteellesi.

Varmasti tärkein syy olla favicon on ilmeinen parantaminen käyttäjäkokemusta. Sivusto ilman sitä näyttää yleisen selainnumeron kaikilla edellä mainituilla vuorovaikutuspisteillä, ja jos välität käyttäjän käyttökokemuksesta, sinun on välitettävä faviconeja.

favicons

Mutta en voi välttää näkemästä asioita brändäyslinssien kautta, osaamisalueellani, joten mielestäni faviconit ovat vielä tärkeämpiä brändin näkökulmasta. Jälleen, niin monilla vuorovaikutuskohteilla, ettet käytä niitä lisäämään brändin tunnettuutta, on rikos. Totuus on, että etsimällä luovia tapoja parantaa online-brändiäsi on aina haastava tehtävä ja suosikki on helppo ja yksinkertainen tapa saavuttaa se. Joten ota itsellesi yksi ystäväni!

Kuinka luoda favicon?

Sivuston favicon luominen on helppoa kuin piirakka. Itse asiassa sinun ei tarvitse edes olla suunnittelija tehdä niin. Varmasti se auttaa, jos olet, kun voit laittaa taitosi töihin ja luoda jotain, joka todella erottuu, mutta jopa vähemmän tech-tajuamme meistä voi tehdä sen noin 5 minuuttia tai vähemmän käyttäen oikeita työkaluja.

Alla olevassa luettelossa olevien sivustojen avulla voit luoda favicon yksinkertaisesti lataamalla esiasennetun kuvan. Joten jos haluat luoda suosikkisi brändillesi, sinun tarvitsee vain ladata logo jollakin seuraavista sivustoista ja ladata favicon-tiedosto. Helppoa kuin heinän teko.

Tässä on etsimäsi Favicon-generaattorilista:

Yllä olevat sivustot vaihtelevat paljon tuloksena olevan tiedoston suhteen. varsinkin tiedostokoko ja laajennus. Jos etsit mahdollisimman yhteensopivaa tiedostoa, suosittelen suosittelemaan 16 × 16 pikselin kuvakokoa ico-muodossa.

Jos tarvitset inspiraatiota, kokeile alla olevia favicon gallerioita:

Kuinka käyttää faviconia?

Kun suosikki on suunniteltu huolella, asentaminen palvelimeen ei saisi kestää kauemmin kuin pari minuuttia kahteen helppoan vaiheeseen. Sitä varten sinun on käytettävä sivustosi pääkansioa ja tekstinmuokkaustyökalua verkkosivustosi HTML-koodin muuttamiseen.

Vaihe 1

Sinun täytyy ladata "favicon.ico" -tiedosto palvelimellesi. Voit tehdä tämän osoittamalla selaimen osoiterivin FTP-palvelimellesi. URL-osoitteesi pitäisi näyttää samanlaiselta:

Paina Enter-näppäintä ja selain pyytää käyttäjää ja salasanaa, ennen kuin se myöntää pääsyn tiedostopalvelimeen. Kun olet, lähetä vain "favicon.ico" tiedosto pääkansioon ja olet valmis.

Vaihe 2

Nyt sinun on muokattava verkkosivustosi HTML-sivua, jotta selaimet löytävät favicon-kuvan. Pidä FTP-ikkuna auki, etsi ja lataa "index.html" tai "header.php" -tiedosto palvelimellasi ja noudata seuraavia ohjeita saatavan tiedoston mukaan:

Jos verkkosivustosi on tehty tavallisesta HTML-koodista, lisää alla oleva koodi "index.html" -tiedoston HEAD-alueelle, äläkä unohda vaihtaa "yoursite.com" omalle verkkosivustollesi.

Jos käytät WordPressiä, syötä alla oleva koodi header.php-tiedoston HEAD-alueelle.

Kun tämä on tehty, lataa tiedosto takaisin siihen, mistä olet saanut sen. Olet valmis!

Itse asiassa useimmat nykyaikaiset selaimet ovat riittävän älykkäitä etsimään favicon-tiedostoasi ilman koodinpätkää, mutta vain niin kauan kuin favicon-kuvassa on 16 × 16 pikseliä, se on nimetty "favicon.ico "ksi ja se on tallennetaan sivustokansion kansioosi.

Kuinka luoda favicon Photoshopissa

Niin monia työkaluja, joiden avulla voit luoda suosikkisi, miksi haluat tehdä kovaa tietä ja luoda sen Photoshopissa? No, jos olet suunnittelija ja haluat saada parhaan mahdollisuuden faviconista, varmasti se on ammattimainen tapa tehdä se. Usko on, että Photoshop ei tue luonnollisesti "ico" -tiedostoja, joten sinun tarvitsee lataa tämä plugin Telegraphicsista .

Asenna se ennen seuraavaa opetusohjelmaa. Photoshop ei toimi ilman sitä.

Etsi "ICO" -vaihtoehto Photoshopin "Tallenna nimellä" -ruudusta vahvistaaksesi, että laajennus on asennettu.

Luo uusi dokumentti Photoshopissa valitsemalla valikkokohta "Tiedosto" ja seuraava vaihtoehto "Uusi" ja aseta sitten kankaalle 64 × 64 pikseliä. Miksi? Koska 16 × 16 lopullinen favicon koko on niin pieni, että isompi kangas voi työskennellä, auttavat sinua luomaan luovia mehuja. Liitä sitten logoasi asiakirjaan ja vapauta maaginen yksisarvinen luova voima.

Kun olet valmis, valitse valikosta "Kuva" ja seuraava vaihtoehto "Kuvan koko" ja vähennä kuvaa 16 × 16 pikseliin. Muista klikata "Resample Image" ja valita "Bicubic Sharper", jotta varmistat, että kuva ei ole hämärtynyt, kun sitä muutetaan. Jos et pidä lopullisesta tuloksesta, yksinkertaisesti kumota latesteiden muutokset "AltCtrl / AltCmd + Z": llä ja jatka työskentelyä, kunnes olet tyytyväinen siihen.

Jotta voit lopettaa favicon, sinun tarvitsee vain klikata valikkoa "Tiedosto" ja seuraava vaihtoehto "Tallenna nimellä", muistat nimesi tiedostoksi "favicon.ico". Jälleen kerran työ on valmis!

johtopäätös

Favicons on yksi niistä pienistä asioista, joita emme yleensä kiinnitä liikaa huomiota, mutta totuus on, että kaukana olemisesta merkityksettömältä, ne ovat erittäin tärkeä osa verkkoa sekä käyttöliittymän näkökulmasta että brändäyspisteestä - näkökulmasta.

Jotkut sanovat, että hienot asiat ovat pienikokoisia, ja mielestäni tämä koskee myös faviconeja, koska kaikki web-suunnittelija ja / tai brändäysasiantuntija, jotka aina vievät aikaa lisätä favicon asiakkaidensa sivustoihin, vaikka asiakkaalla ei olisi ajatus siitä, mikä favicon on, osoittaa suurta ammattitaitoa ja huomiota yksityiskohtiin; minkälaista laatua jokainen asiakas arvostaa.

Teetkö faviconeja asiakkaillesi? Ovatko he liikaa vaivaa liian vähän palkkiona? Kerro meille mielipiteesi kommentteihin.

Esitetty kuva / pikkukuva, hämmästynyt kuva kautta Shutterstock