Favicon on se viileä pieni kuva osoiterivin vieressä selaimessasi. Se erottaa sivustosi kirjanmerkkivälilehdestä ja sitä voidaan käyttää bränditietoisuuden lisäämiseen. Jos sinulla on sivusto, mutta et ole koskaan harkinnut faviconin luomista, sinun on harkittava päätöstäsi uudelleen. Ohjelmistokehittäjät käyttävät yhä enemmän suosikkeja sovellustensa eri osa -alueisiin, kuten aloitusnäytön kuvakkeisiin tableteissa. Onneksi faviconin suunnittelu, luominen ja toteuttaminen on melkein kuka tahansa, jos he noudattavat oikeita ohjeita.
Askeleet
Menetelmä 1/3: Faviconin suunnittelu
Vaihe 1. Luo verkkosivustoasi edustava suosikkikuvake
Sivustosi tyypin pitäisi määrittää suosikkisi ulkonäkö. Yritä suunnitella jotain, joka kiinnittyy brändikuvaasi ja joka on tunnistettava ja mieleenpainuva ihmisille. Favicon on ensimmäinen asia, jonka ihmiset näkevät, kun he katsovat selaimensa välilehtiä, ja ne näkyvät myös ihmisten kirjanmerkeissä.
- Jos sinulla on esimerkiksi ruoka -sivusto, voit valita siitä mieleenpainuvamman faviconin, jonka suunnittelussa on hedelmä tai vihannes.
- Jos verkkosivustosi on lakitoimistolle tai sijoitusyhtiölle, perinteinen ja tyylikäs favicon on paras.
- Jos verkkosivustosi on suunnattu nuoremmille ihmisille, kokeile luoda leikkisä ja värikäs favicon.
Vaihe 2. Päätä haluatko läpinäkyvän taustan
Jos et määritä taustaa, se täyttää valkoisen, joka ei välttämättä liity brändiisi. Läpinäkyvä tausta ottaa henkilön selaimen värin ja näyttää virtaviivaisemmalta joissakin tapauksissa. Muissa tapauksissa taustavärin saaminen saa etualan kirjaimet tai grafiikan ponnahtamaan. Päätä, mikä olisi paras suunnittelullesi, ja pidä se mielessä sitä tehdessäsi.
Perus favicon on 16x16 neliö ja taustaväri
Vaihe 3. Luo favicon, joka on helppo lukea
Koska käyttämäsi favicon -kuva on pieni, on tärkeää, että saat brändisi esille hämmentämättä kävijöitä. Favicon, jota on vaikea lukea, jättää negatiivisen vaikutelman ja voi luoda vierailijan mieleen kysymyksiä työn laadusta, jonka voit tarjota. Liian monimutkaiset kuvat ja logot eivät näytä hyviltä, kun ne supistetaan 16 x 16 tai 32 x 32 pikseliin.
- Jos nykyinen logosi on liian monimutkainen, voit yksinkertaistaa sitä taktiikoilla, joten se voidaan tunnistaa favicon -koosta. Käytä nimikirjaimia koko yrityksen nimen näyttämisen sijaan tai suunnittele yksinkertainen kuvake kuvan sijaan.
- Jos sinulla on jo yksinkertainen logo, voit pienentää kuvaa ja asettaa sen suosikiksi. Sinun on ehkä muutettava sitä ennen kuin muutat sen kuvaketiedostoksi.
- Voit myös käyttää kuvaa kohteesta, joka kuvaa sivustosi yleistä teemaa.
Vaihe 4. Luo esteettisesti miellyttävä favicon
Faviconin rakennetta kutsutaan sen muotoksi. Faviconit saavat tyypillisesti muotoja, kuten ympyrän tai neliön. Kun suunnittelet faviconia, on yleensä parempi, jos se mahtuu johonkin näistä perusmuodoista, koska vapaamuotoiset muodot voivat usein sekoittua tai sekoittua 16 x 16 pikselin tarkkuudella. Toinen tärkeä osa suunnittelua on nimeltään esteettinen yhtenäisyys. Esteettinen yhtenäisyys sisältää faviconin eri komponenttien yksityiskohdat ja koot sekä faviconin tasapainon. Mitä yhtenäisemmät yksityiskohdat, sitä yhtenäisempi favicon näyttää. Esimerkiksi eri kirjasintyyppien tai -kokojen käyttäminen faviconissa ei miellytä silmää ja voi tehdä faviconistasi sekavan tai sotkuisen.
- Toinen esimerkki esteettisestä yhtenäisyydestä on pyöristettyjen kulmien säilyttäminen faviconin muodoissa.
- Hyvä esimerkki kuvakkeesta, joka on muuttanut muotoaan, on Googlen suosikkikuvake. Se on muuttunut neliöstä ympyräksi.
Vaihe 5. Käytä brändiisi sopivia värejä
Kun luot faviconin, sinun on luotava se 8 -bittisellä (256 väriä) tai 24 -bittisellä (16,7 miljoonaa väriä) värisyvyydellä, koska tämä toimii nykyaikaisissa selaimissa. Varmista, että valitsemasi värit löytyvät muualta verkkosivustoltasi tai että ne liittyvät jollain tavalla brändiisi. Favicon, jonka värit eivät näy verkkosivustollasi, logossasi tai sovelluksissasi, ei jää mieleen, eivätkä ihmiset voi yhdistää kuvaketta brändiisi.
- Joitakin favicon -värin luovia käyttötapoja ovat GitHub, joka muuttaa värejä järjestelmän tilan mukaan, ja Trello, joka muuttuu taustavärisi mukaan.
- Faviconeissa yleisimmin käytetyt värit ovat punainen ja sininen.
Vaihe 6. Ota huomioon yleisösi, kun suunnittelet faviconia
Lukuun ottamatta brändisi tunnistamista, faviconin on näytettävä houkuttelevalta vierailijoillesi. Ihmiset, joilla on erilainen maku, kiinnostuksen kohteet ja yhteiskunnalliset normit, katsovat eri ikonologiaa eri näkökulmista. Kulttuurieroja esiintyy yhteiskunnassamme ja ne voivat hämmentää tai torjua yleisöä, jota yrität houkutella.
Esimerkiksi Mac Os X käyttää postimerkkiä, joka on postin yleinen symboli. Postilaatikon käyttö ei olisi yhtä tehokasta, koska postilaatikot vaihtelevat eri puolilla maailmaa
Vaihe 7. Pyydä ystävien ja työtovereiden mielipide
Vaikka se ei ole uskomattoman graafisesti intensiivinen, favicon on tärkeä osa brändiäsi. Ajattele esimerkiksi suosikkisivustojasi, kuten Twitter, Gmail, Facebook tai wikiHow, ja kuinka paljon yhdistät suosikin brändiin. Jos sinulla ei ole hyviä näkökulmia suunnitteluun tai olet järkyttynyt siitä, millainen muotoilu sinun pitäisi olla sivustollesi, ota yhteyttä ystäviin, joilla on silmää suunnittelulle tai jotka työskentelevät graafisen suunnittelun parissa.
- Kysy kaveriverkostostasi, voiko kukaan antaa suunnitteluvinkkejä ilmaiseksi.
- Suuremmilla yrityksillä on sisäisiä graafisia suunnittelijoita, jotka voivat luoda favicon-kuvan.
Tapa 2/3: Faviconin luominen
Vaihe 1. Luo favicon valokuvankäsittelyohjelmistolla
Voit käyttää kuvankäsittelyohjelmistoa, kuten Adobe Photoshopia tai Illustratoria, luodaksesi kuvan faviconillesi. Näiden sovellusten avulla voit myös muuttaa kuvan kokoa ja viedä sen oikeassa muodossa. Joidenkin ohjelmistojen avulla voit luoda faviconin käsin.
- Netistä löytyy myös favicon -erityisiä muokkausohjelmia.
- Käytä hakukonetta ja kirjoita "favicon editorit".
- Tee kangaskokosi 512x512 pikseliä, koska tämä luku jakautuu useimpiin soveltuviin suosikkikokoihin ja on silti tarpeeksi suuri, jotta voit muokata tehokkaasti.
- Muita suosittuja kuvankäsittelyohjelmia ovat GIMP, PhotoScape ja Paint. NET.
- Kun käytät tätä ohjelmistoa, et voi muokata.ico -tiedostoja suoraan, mutta voit käyttää.png-,.jpg- tai-g.webp" />
Vaihe 2. Muuta faviconin kokoa ja tallenna se
32x32 px on Windowsin työpöytäkohteiden koko ja 16x16 px selaimen välilehden suosikkikuvien koko. Kun olet luonut faviconin suuremmassa muodossa, on tärkeää pienentää sen kokoa, jotta näet, miltä se näyttää ihmisten selaimissa. Jos se ei ole luettavissa tai se ei ole esteettisesti miellyttävä, aloita alusta. Ajattele alustoja, joilla verkkosivustoasi tai sovellustasi todennäköisesti käytetään, ja luo sitten suosikki kattamaan kaikki tukikohdat.
- On tärkeää huomata, että eri laitteistot ja ohjelmistot käyttävät erilaisia favicon -kokoja.
- Joitakin muita favicon -kokoja ovat 57x57px iOS -perusnäytössä, 72x72px iPadissa, 96x96px Google TV: ssä, 128x128px Chrome Web Storessa ja 195x195px Opera -pikavalinnassa.
- Jos haluat kattaa kaikki tukikohdat, voit luoda favicon -versiot jokaiseen näistä kooista.
- Tallenna faviconin erilliset versiot, jotta et menetä tekemääsi työtä.
Vaihe 3. Yhdistä tiedostot muuntimen avulla
Hienoa.ico -tiedostoissa on, että voit yhdistää useita tiedostoja sen luomiseksi. Tämä on hyödyllistä, koska eri selaimet ja ohjelmistot haluavat erikokoisen faviconin. Varmistaaksesi, että favicon näyttää hyvältä kaikilla eri alustoilla, muunna tiedostosi verkkomuuntimen avulla. Kirjoita "icon converter" suosikkihakukoneeseesi löytääksesi ilmaisia online -sovelluksia tätä varten. Tallenna yhdistetty tiedosto nimellä "favicon.ico".
- Voit myös käyttää GIMP -tyyppistä ohjelmaa, jossa on sisäänrakennettu ominaisuus, tai ladata ICO FORMAT -laajennuksen Adobe Photoshopiin.
- Luo uusi kansio, jotta voit tallentaa uusia suosikkeja tai käynnissä olevia töitä.
- Kirjoita hakukoneeseen ".ico converter" tai "favicon generator" löytääksesi erilaisia työkaluja, joita voit käyttää.
Tapa 3/3: Faviconin käyttöönotto
Vaihe 1. Lataa favicon, jos käytät verkkosivustojen muokkausohjelmaa
Monissa verkkosivustojen muokkausohjelmissa on sisäänrakennettu lomake, jonka avulla voit ladata faviconin verkkosivustollesi automaattisesti. Jos käytät verkkosivustojen editoria, jossa on tämä sisäänrakennettu, etsi vaihtoehtoja, jotka sanovat "Lataa Favicon" tai "Lisää Favicon" verkkosivustosi asetusvalikosta. Valitse favicon.ico -tiedostosi ja lataa se sivustoosi.
Jos et löydä paikkaa, jolla voit ladata faviconin verkkosivustosi editorissa, sinun on tehtävä se manuaalisesti
Vaihe 2. Lataa tiedosto sivustosi juurihakemistoon
Jos verkkosivustosi tukee tiedostonsiirtoprotokollaa tai FTP: tä, voit ladata uuden favicon.icon -tiedoston juuri (hakemisto) -hakemistoosi FTP -asiakasohjelman avulla. Jos ei, sinun on siirryttävä web -isäntäsivullesi ja ladattava kuva manuaalisesti. Muista korvata olemassa oleva favicon.ico -tiedosto uudella tiedostolla.
Vaihe 3. Lisää tiedosto otsikkoosi
Etsi paikka, josta voit käyttää sivustosi PHP- ja CSS -tiedostoja. Siirry sivustosi header.php -tiedostoon ja muokkaa sitä. Tunnistetyypin alla"
-
Tämän pitäisi yhdistää sivustosi faviconiin.
Koska käytät PHP: tä, se tarkoittaa, että kaikilla otsikkotiedostoasi käyttävillä sivustoilla on nyt sama suosikkikuvake
Luo oma Favicon -kuvake Vaihe 14 Vaihe 4. Päivitä selaimesi
Kun olet ladannut faviconin, voit päivittää selaimesi nähdäksesi uuden kuvan osoiterivin vieressä. Jos haluat siirtyä suoraan päivitetyn faviconin kuvaan, kirjoita "https://www.yourdomain.com/favicon.ico".
- Jos favicon ei näy aluksi, sinun on ehkä nollattava selaimesi välimuisti.
- Voit tyhjentää välimuistin siirtymällä selaimesi asetuksiin ja poistamalla väliaikaiset Internet -tiedostot, evästeet ja historian.
