Cum se creează un Favicon pentru blogul dvs.

blogul dvs. are un favicon personalizat? Dacă nu, chiar ar trebui. Astăzi vom afla ce este un favicon, de ce aveți nevoie de unul și, în final, cum să creați un favicon pentru blogul sau site-ul dvs. web.

încă văd tone de bloguri fără unul, deci dacă blogul dvs. este unul dintre ele, Faceți-vă o favoare și creați unul acum folosind tutorialul de mai jos. Promit că nu va dura mult și este, de asemenea, un fel de distracție!

actualizat: 11/4/2020

dezvăluire: această postare poate conține link-uri afiliate (notate cu a *) ceea ce înseamnă că pot primi un mic comision Dacă alegeți să faceți o achiziție cu linkul meu. Apreciez sprijinul dumneavoastră și nu va recomanda produse nu stau de mine.

în primul rând, ce este un Favicon?

un Favicon, pronunțat fave-icon, este prescurtarea de la favorite Icon, care a fost numit, deoarece acestea apar în lista de marcaje site-ul, cu alte cuvinte, Site-urile preferate. Favicoanele sunt o versiune mică a logomark-ului dvs. care apare ca o pictogramă a filei browserului, o pictogramă de marcaj sau o pictogramă de comandă rapidă.

Favicons sunt o modalitate rapidă pentru utilizatori de a recunoaște site-ul dvs. la prima vedere. Aruncați o privire la filele browserului meu de mai jos. Recunoașteți majoritatea site-urilor pe care le-am deschis aici?

de ce trebuie să creați un Favicon?

când nu atribuiți un favicon personalizat blogului sau site-ului dvs. web, fie o pictogramă generică, fie nicio pictogramă nu i se atribuie. În cel mai rău caz, blogul dvs. folosește favicon-ul companiei dvs. de găzduire. În cel mai bun caz, Fiecare browser își atribuie propriul lucru: Chrome adaugă un mic glob (vezi imaginea de mai sus), Safari adaugă prima inițială a adresei URL a site-ului dvs. web într-o casetă gri (vezi imaginea de mai jos), iar Firefox nu adaugă nimic. Oricum ar fi, vorbește despre plictisitor!

Uită-te din nou la filele browserului de mai sus. Având pictograme recunoscute, este ușor să faceți clic înainte și înapoi rapid între site-uri web, nu-i așa? Dacă salvați un site web în marcajele dvs., veți vedea și faviconul în lista de marcaje. Acest lucru face ușor să găsiți rapid ceea ce căutați. Ajutați cititorii dvs. să găsească rapid blogul dvs. în filele sau marcajele lor prin încorporarea unui favicon.

există un alt loc pe care pariez că nu v-ați gândit unde apar favicoanele: dacă aveți site-uri web pe care le vizitați frecvent pe telefon, le puteți adăuga oricând pe ecranul de pornire al telefonului ca o comandă rapidă. Dacă cititorii dvs. adoră să viziteze site-ul dvs. des, este posibil să dorească să adauge o comandă rapidă la acesta din ecranul de pornire, astfel încât să doriți cu siguranță să aibă o pictogramă frumoasă pentru a ieși în evidență de celelalte pictograme ale aplicației pe care le-au adăugat deja.

și iată o nouă pagină de filă din Safari. Imaginați-vă comanda rapidă a site-ului dvs. aici. Nu doriți ca blogul dvs. să fie reprezentat de o pictogramă gri plictisitoare, cum ar fi pictograma „C” de mai jos, nu-i așa?

cum să proiectați un Favicon pentru blogul dvs.

câteva reguli de proiectare pentru crearea unui Favicon

în primul rând, să vorbim despre câteva bune practici pentru proiectarea faviconului.

1. faviconul dvs. ar trebui să fie vizibil și ușor de recunoscut
   cel mai bun mod de a face faviconul dvs. recunoscut este să utilizați logo-ul dvs. ca punct de plecare. Chiar dacă blogul dvs. nu este încă foarte faimos, este în regulă. Folosind elemente de design consistente și teme de-a lungul branding-ul va ajuta să iasă în evidență de restul și de a ajuta oamenii să recunoască în cele din urmă brand-ul.Iată câteva opțiuni pe care să le luați în considerare în timp ce vă proiectați faviconul:
   • logo – ul sau logomark-ul dvs.
   • variație mai simplă a logo-ului dvs.
   • un simbol sau o pictogramă care reprezintă marca dvs.
   • inițialele (sau doar prima inițială) a numelui dvs. de marcă-asigurați-vă că stilul inițialelor se potrivește cu designul și stilul logo-ului dvs. inițial
   • o fotografie simplă-în ultima vreme am văzut bloggeri folosind fotografiile lor de profil pentru favicon
2. favicon-ul dvs. ar trebui să utilizeze un design foarte simplu
   aruncați o privire bună la favicons filele browserului dvs. chiar acum. Ce observi? Sunt mici! Faviconul tipic este afișat la 16 x 16 pixeli. Din acest motiv, este important să vă asigurați că utilizați o versiune foarte simplificată a logo-ului sau a elementului de branding. Grafica detaliată și elaborată nu se va scala bine la o dimensiune atât de mică. Cel mai probabil vor arăta ca o mizerie încețoșată.
3. asigurați-vă că faviconul dvs. contrastează bine cu fundalurile deschise și întunecate
   în funcție de preferințele cititorilor dvs., filele browserului lor pot fi albe, negre, deschise sau gri închis. Din acest motiv, veți dori să vă asigurați că creați un favicon cu culori care contrastează bine atât pe fundaluri deschise, cât și pe cele întunecate.Unele favicoane au fundaluri transparente și funcționează deoarece culorile lor contrastează bine pe orice fundal. Dacă graficul dvs. este prea deschis sau prea întunecat, vă poate ajuta să adăugați un cerc sau un pătrat colorat solid în spatele graficului sau logo-ului pentru a-l ajuta să iasă în evidență și să poată fi citit pe orice filă colorată.
4. Uită-te la filele browserului pentru inspirație
   Faceți clic pe web și uitați-vă la favicoanele utilizate pe site-urile dvs. preferate. Observați dacă vor funcționa pe fundaluri deschise sau întunecate. Grafica are un fundal transparent sau este pe un pătrat sau cerc colorat?

Favicon Inspiration

Favicons folosind transparența

observați cum aceste pictograme pot ieși în evidență fie pe un fundal întunecat, fie pe unul deschis, cu excepția ultimului, ‘spune da. Acela ar fi trebuit probabil să fie așezat pe un pătrat alb. Și este un pic greu de spus, dar a patra pictogramă, floarea de lotus are de fapt un contur negru foarte fin. În acest fel îl puteți vedea cu ușurință chiar dacă este vizualizat pe filele de culoare deschisă.

Favicoane folosind un fundal colorat

aceste favicoane au fost proiectate cu un fundal pătrat sau rotunjit pătrat pentru a se asigura că sunt clar vizibile atât pe filele întunecate, cât și pe cele luminoase.

Favicoane folosind inițialele

unele dintre aceste pictograme inițiale folosesc un backround colorat, unele folosesc unul transparent. Oricum, asigurați-vă că este lizibil.

Favicons folosind o fotografie de profil

folosind o fotografie de profil pare a fi o nouă tendință care prinde pe. Dacă mergeți pe acest traseu, asigurați-vă că utilizați aceeași fotografie de profil în toate profilurile dvs. online, astfel încât să fie recunoscută instantaneu.

cum se creează un Favicon pentru blogul dvs.

creați un fișier Favicon pas cu pas

1. creați graficul într-un Editor de imagini
   folosind un editor de imagini precum Photoshop (înscrieți-vă pentru încercare gratuită)*, Pixlr, BeFunky sau Canva,* creați fișierul favicon la 512 x 512 pixeli. Chiar dacă este afișat la doar 16 16 în filele browserului, acesta va fi afișat și la dimensiuni mai mari în unele dintre celelalte aplicații pe care le-am menționat mai sus.
2. Previzualizați faviconul în dimensiune mică
   dacă ați terminat de creat un favicon grafic, micșorați imaginea până când graficul dvs. devine mic, aproximativ dimensiunea favicoanelor pe care le vedeți în browserul dvs. Este încă lizibil? Are sens? Dacă da, minunat, treceți la pasul următor.
3. salvați fișierul
   mai întâi, salvați graficul ca fișier editabil în programul software, astfel încât să puteți reveni și să îl reglați dacă este necesar.Apoi, salvați-l ca fișier PNG.
4. generează un Favicon.fișier ico
   utilizați un generator favicon pentru a converti fișierul PNG într-un fișier ICO. Acest pas este necesar, deoarece unele browsere vor citi doar fișierele ICO.

alternative la proiectarea proprie de la zero

dacă doriți o modalitate rapidă și ușoară de a crea un text sau inițiale favicon, utilizați textul > ICO favicon generator. Am creat rapid asta pentru DYOB:

puteți utiliza, de asemenea, Emoji > ICO favicon generator dacă doriți cu adevărat să vă ușurați.

în cele din urmă, adăugați noul Favicon pe blogul sau site-ul dvs. web

WordPress

cel mai simplu mod de a adăuga un favicon într-un blog WordPress găzduit de sine este să vă conectați la tabloul de bord. Apoi accesați aspect > Personalizați, apoi faceți clic pe fila Identitate Site. Sub secțiunea pictogramă Site, selectați noul favicon.fișier ico pentru încărcare.

și boom, ați terminat, verificați-l în browser! Rețineți că poate fi necesar să reîmprospătați de câteva ori și/sau să ștergeți memoria cache din browser înainte de a apărea.

cum se adaugă un favicon la un WordPress.com blog.

Squarespace

este foarte ușor să adăugați un favicon la Squarespace, de asemenea.

Blogger

Conectați-vă la blogul dvs. și faceți clic pe Setări în coloana din stânga. Apoi faceți clic pe Favicon sub secțiunea de bază. Apoi, încărcați faviconul.fișier ico, salvați și boom!

testați noul Favicon

dacă doriți să testați cum arată faviconul dvs. în diferite platforme și setări, utilizați acest verificator Favicon. Dacă doriți să editați modul în care pictogramele dvs. arată în oricare dintre platforme, să zicem iOS (iPhone), puteți utiliza generatorul pentru a le optimiza pentru fiecare setare. Apoi urmați instrucțiunile pentru a le adăuga pe toate pe blogul dvs.

Tocmai ai învățat cum să creezi un Favicon

Felicitări! Când vă proiectați propriul blog, doriți să vă asigurați că nu lăsați niciun detaliu, chiar și cele mai mici. Adăugarea unui favicon personalizat nu numai că îi ajută pe cititorii dvs. să vă localizeze rapid blogul în filele sau marcajele lor, ci arată că vă pasă de menținerea consecventă a brandingului.

acum este rândul tău

Anunță-mă în comentarii dacă ai întrebări despre cum să creezi un favicon sau dacă ai nevoie de ajutor pentru identificarea unui tip de favicon pe care să-l creezi pentru marca ta. În caz contrar, vă rugăm să împărtășiți favicon cu noi în comentarii!
și dacă v-a plăcut acest tutorial, vă rugăm să îl împărtășiți făcând clic pe una dintre pictogramele de sub semnătura mea!
această postare a fost publicată inițial pe 8/14/2013 și actualizată pe 2/11/2015, apoi din nou pe 11/4/2020.