Cum de a crea un favicon pentru site: sfaturi utile și servicii

1. Cum se creează un favicon
2. Cum se face un favicon în Photoshop
3. Cum de a salva un favicon
4. Cum să inserați site-ul favicon
5. Cum se înlocuiește favicon
6. Cum de a crea favicoane mai complexe

Este greu de ghicit ce este un favicon atunci când auziți pentru prima dată acest cuvânt. Aceasta este o pictogramă miniaturală care este afișată pe filele browserelor, în liniile de adrese și în alte zone, în funcție de sistemul de operare pe care îl utilizați și de browserul de Internet. Acesta poate fi numit în siguranță unul dintre cele mai complexe și capricioase elemente ale designului site-ului web.

Crearea unui bun favicon este destul de dificilă, deoarece pictograma este mică, ar trebui să fie clară și să afișeze ceva legat de site-ul dvs. Crearea unui favicon compatibil cu toate browserele populare poate fi, de asemenea, o sarcină descurajantă. În acest articol vom aborda toate aspectele complexe ale creării sale. Dacă aveți nevoie de un logo, atunci avem un articol cum se face.

Cum se creează un favicon

Să începem cu designul faviconului. Designul bun, în ciuda compactității sale, ar trebui să reflecte esența site-ului dvs. și să fie o parte organică a identității corporative. În mod obișnuit, pictograma este un semn grafic (pictogramă) al unei companii și nu un logo întreg (pictogramă, text și slogan).

Ca favicon, aceste site-uri utilizează icoanele lor (sau imagini apropiate acestora).

Textul din favicon nu ar trebui să fie utilizat, deoarece acest text va fi necitit din cauza dimensiunii mici a imaginii. Singurele excepții de la această regulă sunt caracterele de text celebre care sunt asociate automat cu o anumită marcă. De exemplu, resursa online Wikipedia a lăsat pe favicon majusculă litera ei "W", și Facebook - litera "F".

Pe aceste favicoane există scrisori care sunt puternic asociate cu o anumită marcă. De exemplu, Facebook folosește semnul grafic. De asemenea, rețineți că pixelii sunt vizibili în imaginea Disney. Acest lucru se datorează faptului că imaginea de ecran a fost făcută pe un afișaj Retina, compatibil cu icoane 16 × 16, în timp ce site-urile web utilizează 32 × 32 de icoane.

Deoarece favicoanele sunt mici imagini, fiecare pixel joacă un rol important. Uneori, după reducerea logo-ului, pixelii individuali devin vizibili, din cauza cărora imaginea devine "neclară". Pentru a obține claritate, trebuie să editați pictograma la nivelul pixelilor.

Pentru a evita acest lucru, trebuie să redimensionați logo-ul folosind editorii speciali precum Photoshop sau GIMP. Mai întâi trebuie să reduceți dimensiunea imaginii la 64x64 pixeli (aceasta este cea mai mare dimensiune favicon). Apoi trebuie să editați fiecare pixel folosind instrumentul Creion până când imaginea este clară. Acesta este un proces laborios, dar rezultatul merită. Atunci când faviconul 64x64 este gata, trebuie să faceți același lucru cu imaginile de 16 × 16, 24 × 24 și 32 × 32 pixeli. Multe dimensiuni trebuie să afișați corect în toate browserele și gadgeturile:

• 64x64 - marcaje de browser Safari;
• 32x32 - afișe de înaltă rezoluție (retină);
• 24x24 - marcaje Internet Explorer și MicroSoft Edge;
• 16x16 - Google Chrome și alte browsere.

Cum se face un favicon în Photoshop

Mai întâi trebuie să creați câteva pânze cu dimensiunile de mai sus.

Apoi, trebuie să adăugați o pictogramă, o literă sau o altă imagine pe pânză.

Cum de a salva un favicon

După crearea unor pictograme de dimensiuni diferite, salvați fiecare fișier PNG transparent (24 biți). În Photoshop, puteți utiliza funcția Salvare pentru Web disponibilă în meniul Fișier. Apoi trebuie să fuzionați toate fișierele PNG într-un singur fișier ICO. Puteți folosi simultan fișierele PNG și fișierele ICO, dar de multe ori chiar și Safari și Chrome preferă numai formatul ICO. În opinia mea, este mai ușor să creați un fișier ICO. Formatul ICO nu este foarte comun, dar, din fericire, există o serie de instrumente care vă pot ajuta să vă convertiți fișierele în acest format. În acest scop, prefer să folosesc X-Editor de pictograme . Acesta este un serviciu gratuit online care convertește instantaneu imaginile descărcate într-un fișier ICO, după care îl puteți descărca. Nu este nimic complicat, trebuie doar să urmați instrucțiunile de pe site. Dacă te consideri o persoană disperată, poți experimenta cu editorul pixel al acestui serviciu și poți desena un favicon. (Deși prefer să editez favicoane într-un editor mai profesionist, de exemplu, în Photoshop).

Prin încărcarea imaginilor PNG în editorul X-Icon, veți obține un fișier ICO la ieșire.

Cum să inserați site-ul favicon

Deci, aveți deja un fișier ICO. Acum trebuie să îl adăugați pe site. Redenumiți fișierul la favicon.ico și plasați-l în directorul rădăcină al site-ului dvs. (unde sunt stocate fișierul index.html și alte fișiere standard). După adăugarea cu succes, îl puteți vedea la site-ul dvs. .com / favicon.ico. Aproape toate browserele caută fișierul favicon.ico din dosarul rădăcină. Prin urmare, este important să descărcați faviconul în acest folder. Pentru compatibilitatea cu diferite browsere, este mai bine să nu adăugați elemente HTML sau linkuri care să indice locația sa. Acest truc funcționează pentru toate browserele, până la IE6. De asemenea, dacă aveți un site WordPress, atunci în mai multe teme puteți adăuga un favicon în setările temei. Această metodă poate fi de asemenea utilizată.

Cum se înlocuiește favicon

Din motive inexplicabile, browserele o adaugă în memoria cache. Prin urmare, atunci când încărcați un nou fișier ICO, browserul poate continua să afișeze vechiul dvs. favicon. Ce să facem în acest caz? Puteți adăuga un fișier HTML temporar care indică locația noului dvs. favicon. De asemenea, la sfârșitul adresei URL trebuie să adăugați un șir de interogări scurt:

<link rel = "pictograma de comenzi rapide" href = "site-ul dvs. .com / favicon.ico? v = 2" />

Deci, browserul va crede că aceasta este o adresă URL unică și, prin urmare, va fi nevoită să afișeze o nouă pictogramă. După actualizarea faviconului, acest cod HTML poate fi eliminat complet. Dacă trebuie să faceți modificări în favicon, utilizați aceeași tehnică, de fiecare dată când creșteți numărul după "v" din șirul de interogare. Astfel, browserul va percepe de fiecare dată această adresă URL ca fiind unică și va afișa noua sa versiune. Și nu uitați să ștergeți codul HTML după o actualizare de succes.

Cum de a crea favicoane mai complexe

În acest articol, am vrut să descriu o modalitate universală și ușoară de a crea favicoane care vor funcționa pe aproape orice platformă. Dar în designul și dezvoltarea web nu există limită la perfecțiune. Dacă doriți să învățați cum să creați pictograme mai complexe, puteți încerca să utilizați acest serviciu favico.js . Acesta vă permite să creați imagini dinamice cu numere diferite. Datorită acestei pictograme, puteți vedea numărul de mesaje necitite, chiar dacă fila corespunzătoare nu este activă. Dacă doriți să creați favicoane animate online, puteți încerca să utilizați un generator favicon favicon.cc .

Mai multe generatoare online puteți găsi aici .

Dacă doriți să împărtășiți sfaturile dvs. pentru a crea favicoane sau pentru a pune o întrebare, vă aștept în comentarii!