onko blogissasi mukautettu favicon? Jos ei, niin pitäisi. Tänään opimme, mitä favicon on, miksi tarvitset sitä, ja lopuksi, miten luoda favicon blogiisi tai verkkosivuilla.
näen edelleen paljon blogeja ilman yhtä, joten jos blogisi on yksi niistä, tee itsellesi palvelus ja luo sellainen nyt alla olevan opetusohjelman avulla. Lupaan, että se ei kestä kauan ja se on myös hauskaa!
päivitetty: 11/4/2020
Disclosure: tämä viesti voi sisältää affiliate linkkejä (merkitään*), mikä tarkoittaa, että voin saada pienen provision, jos päätät tehdä ostoksen minun linkki. Arvostan tukeasi ja koskaan suositella tuotteita En seiso itse.
Ensinnäkin mikä on Favicon?
favicon, lausutaan fave-kuvake, on lyhenne Suosikit-kuvakkeesta, joka on nimetty, koska ne näkyvät verkkosivustojen kirjanmerkkien luettelossa, toisin sanoen suosikkisivustoillasi. Faviconit ovat pieni versio logomerkistäsi, joka näkyy selaimen välilehtikuvakkeena, kirjanmerkkikuvakkeena tai pikakuvakkeena.
Faviconit ovat nopea tapa, jolla käyttäjät tunnistavat sivustosi ensisilmäyksellä. Tutustu selaimeni välilehtiin alla. Tunnistatko suurimman osan nettisivuistani?
miksi sinun täytyy luoda Favicon?
kun et anna mukautettua faviconia blogiisi tai verkkosivustollesi, sille annetaan joko yleinen kuvake tai ei lainkaan kuvaketta. Pahimmillaan blogissa käytetään hosting-yrityksen faviconia. Parhaimmillaan jokainen selain määrittää sinulle oman juttunsa: Chrome lisää hieman maapalloa (KS.kuva yllä), Safari lisää harmaaseen laatikkoon ensimmäisen alkuperäisen verkkosivustosi URL-osoitteen (KS. kuva alla) ja Firefox ei lisää mitään. Oli miten oli, tylsästä puheen ollen!
katso uudelleen yllä olevia selaimen välilehtiä. Ottaa tunnistettavia kuvakkeita on helppo napsauttaa edestakaisin nopeasti välillä sivustot eikö? Jos tallennat verkkosivuston kirjanmerkkeihisi, näet faviconin myös kirjanmerkkiluettelossasi. Näin on helppo löytää nopeasti se, mitä etsit. Auta lukijoitasi löytämään blogisi nopeasti välilehdistään tai kirjanmerkeistään käyttämällä faviconia.
on toinenkin paikka, josta et varmaan tullut ajatelleeksi, missä faviconit näkyvät: jos sinulla on verkkosivuja, joilla käyt usein puhelimellasi, voit aina lisätä ne puhelimen aloitusnäyttöön pikanäppäimeksi. Jos lukijat rakastavat vierailevat sivustosi usein, he voivat haluta lisätä pikakuvakkeen sen aloitusnäytön niin varmasti haluat ne ovat mukavan näköinen kuvake erottuvat muista sovelluksen kuvakkeet he ovat jo lisänneet.
ja tässä Safarin Uusi välilehtisivu. Kuva sivustosi oikotie täällä. Et halua blogisi edustaa tylsä harmaa kuvake kuten ” C ” kuvake alla ethän?
miten suunnitella favicon blogiisi
Some Design Rules for Creating a favicon
First, let ’ s talk about some best practices for designing your favicon.
- faviconisi pitäisi olla havaittavissa ja heti tunnistettavissa
paras tapa tehdä faviconisi tunnistettavaksi on käyttää logoasi lähtökohtana. Vaikka blogisi ei ole vielä super kuuluisa, se on ok. Käyttämällä johdonmukaisia muotoiluelementtejä ja teemoja koko brändäyksesi auttaa sitä erottumaan muista ja auttaa ihmisiä lopulta tunnistamaan brändisi.Tässä on pari vaihtoehtoa voit harkita, kun suunnittelet favicon:- logosi tai logomerkkisi
- logosi yksinkertaisempi muunnelma
- merkki tai kuvake, joka edustaa brändiäsi
- merkkisi nimikirjaimet (tai vain ensimmäinen alkukirjaimet) – varmista, että nimikirjainten tyyli vastaa alkuperäisen logosi suunnittelua ja tyyliä
- yksinkertainen valokuva – viime aikoina olen nähnyt bloggaajien käyttävän profiilikuviaan luodakseen favicon
- faviconisi tulisi käyttää hyvin yksinkertaista rakennetta
Katso faviconeita selaimesi välilehdiltä juuri nyt. Mitä sinä huomaat? Ne ovat pieniä! Tyypillinen favicon näkyy 16 x 16 pikselin tarkkuudella. Tästä syystä on tärkeää varmistaa, että käytät hyvin yksinkertaistettua versiota logostasi tai brändäyksestäsi. Yksityiskohtainen ja yksityiskohtainen grafiikka ei skaalaa hyvin näin pienessä koossa. Ne näyttävät todennäköisesti sumealta sotkulta. - varmista, että favicon erottuu hyvin vaaleasta ja tummasta taustasta
riippuen lukijoiden mieltymyksistä, niiden selainvälilehdet voivat olla valkoisia, mustia, vaaleita tai tummanharmaita. Tästä syystä, sinun kannattaa varmistaa luoda favicon värejä, jotka kontrastia hyvin sekä vaalea ja tumma taustat.Joissakin faviconeissa on läpinäkyvät taustat ja ne toimivat, koska niiden värit erottuvat hyvin millä tahansa taustalla. Jos grafiikkasi on liian vaalea tai liian tumma, se voi auttaa lisäämään yksivärisen ympyrän tai neliön graafisen tai logon taakse, jotta se erottuu ja on luettavissa millä tahansa värillisellä välilehdellä. - Katso selaimesi välilehtiä saadaksesi inspiraatiota
klikkaa ympäri verkkoa ja katso suosikkisivustoillasi käytettyjä faviconeja. Huomaa, jos ne toimivat vaalea tai tumma tausta. Onko grafiikassa läpinäkyvä tausta vai onko se värillisellä neliöllä tai ympyrällä?
favicon Inspiration
favicons using transparency
note how these icons can stand out on either on dark or light background, except for the last one, ” Say Yes. Se olisi pitänyt sijoittaa valkoiselle neliölle. Sitä on vaikea sanoa, mutta neljännessä ikonissa, lootuskukassa, on hieno musta ääriviiva. Näin voit nähdä sen helposti, vaikka sitä katsottaisiin vaalealla välilehdellä.
värillistä taustaa käyttävät Faviconit
nämä faviconit suunniteltiin neliömäisiksi tai pyöristetyiksi neliömäisiksi, jotta ne näkyisivät selvästi sekä tummissa että vaaleissa kielekkeissä.
nimikirjaimia käyttävät Faviconit
jotkut näistä nimikirjaimista kuvakkeista käyttävät värillistä taustaväriä, jotkut käyttävät läpinäkyvää. Joka tapauksessa, varmista, että se on luettavissa.
profiilikuvaa käyttävät Faviconit
profiilikuvan käyttäminen näyttää olevan uusi trendi, joka tarttuu. Jos menet tätä reittiä, varmista, että käytät samaa profiilikuvaa kaikissa online-profiileissasi, jotta se on heti tunnistettavissa.
Kuinka luoda favicon blogiisi
luo favicon-tiedosto vaiheittain
- luo grafiikka kuvankäsittelyohjelmassa
käyttäen kuvankäsittelyohjelmaa kuten Photoshop (tilaa ilmainen kokeiluversio)*, Pixlr, BeFunky tai Canva,* luo favicon-tiedosto 512 x 512 pikselin tarkkuudella. Vaikka se näkyy vain 16×16 selaimen välilehdissä, se näkyy myös suuremmissa kooissa joissakin muissa edellä mainituissa sovelluksissa. - Esikatsele Faviconisi pienessä koossa
jos olet tehnyt graafisen faviconin luomisen, Loitonna kuvaa, kunnes grafiikkasi on pieni, suunnilleen selaimessasi näkyvien faviconien kokoinen. Onko se vielä luettavissa? Onko siinä järkeä? Jos niin käy, hienoa, siirry seuraavaan vaiheeseen. - Tallenna tiedosto
Tallenna ensin graafinen tiedosto muokattavaksi ohjelmaasi, jotta voit palata ja hienosäätää sitä tarvittaessa.Seuraava, Tallenna se PNG-tiedostona. - luo favicon.ico-tiedosto
käytä favicon-generaattoria muuntaaksesi PNG-tiedostosi ICO-tiedostoksi. Tämä vaihe on tarpeen, koska jotkut selaimet vain lukea ICO tiedostoja.
vaihtoehtoja oman suunnittelun aloittamiselle tyhjästä
jos haluat nopean ja helpon tavan luoda tekstin tai nimikirjaimet favicon, Käytä tekstiä > ICO favicon generator. Loin tämän nopeasti DYOBILLE.:
voit käyttää myös emojia > ICO favicon generaattoria, jos todella haluat tehdä sen helpoksi itsellesi. 
lisää lopuksi Uusi Favicon blogiisi tai verkkosivullesi
WordPress
helpoin tapa lisätä favicon itse isännöidyssä WordPress-blogissa on kirjautua kojelautaan. Siirry sitten kohtaan ulkonäkö > Muokkaa ja napsauta sivuston identiteetti-välilehteä. Valitse Sivuston Kuvakeosion alta Uusi favicon.ladattava ico-tiedosto.
ja boom, you ’ re done, check it out in your browser! Huomaa, että saatat joutua päivittämään muutaman kerran ja/tai tyhjentämään välimuistin selaimessasi ennen sen ilmestymistä.
miten favicon lisätään WordPress.com blogi.
Squarespace
Squarespaceen on erittäin helppo lisätä myös favicon.
Blogger
Kirjaudu blogiisi ja klikkaa Asetukset vasemmassa sarakkeessa. Valitse sitten favicon Perusosiosta. Seuraavaksi, lataa favicon.ico-Tiedosto, Tallenna ja boom!
testaa Uusi Favicon
jos haluat testata miltä favicon näyttää eri alustoilla ja asetuksissa, käytä tätä favicon-tarkistinta. Jos haluat muokata miten kuvakkeet näyttävät tahansa alustoilla, sanoa iOS (iPhonet), voit käyttää generaattoria optimoida ne kullekin asetukselle. Sitten vain seuraa ohjeita lisätä ne kaikki blogiisi.
juuri opit luomaan faviconin
Onneksi olkoon! Omaa blogia suunnitellessa halutaan varmistaa,ettei pieniäkään yksityiskohtia jätetä pois. Lisäämällä mukautetun favicon se ei vain auttaa lukijoita nopeasti löytää blogisi niiden välilehdet tai kirjanmerkit, se osoittaa, että välität pitää tuotemerkin johdonmukainen.
nyt on sinun vuorosi
kerro kommenteissa, jos sinulla on kysyttävää faviconin luomisesta tai jos tarvitset apua brändillesi luodun favicon-tyypin tunnistamisessa. Muuten, kerro favicon meille kommenteissa!
ja jos olet nauttinut tästä opetusohjelmasta, jaa se klikkaamalla yhtä allekirjoitukseni alla olevista kuvakkeista!
tämä viesti on julkaistu alun perin 8/14/2013 ja päivitetty 2/11/2015, sitten taas 11/4/2020.
Hei ystävä, Haluatko ilmaista DIY design kamaa?
I ’ ve got an entire library of FREE goods just for you! Liity 10,000 + Muut ja saada instant access nyt!