1. Si të krijoni një favicon
2. Si të krijoni një favicon në Photoshop
3. Si të ruani një favicon
4. Si të futni faqen e favicon
5. Si ta zëvendësoni favicon
6. Si të krijoni favicon më komplekse

Është e vështirë të mendosh se çfarë favicon është kur e dëgjoni së pari këtë fjalë. Ky është një ikonë miniaturë që shfaqet në skedat e shfletuesve, në linjat e adresave dhe në fusha të tjera, në varësi të sistemit operativ që po përdorni dhe shfletuesit të internetit. Mund të quhet një nga elementët më komplekse dhe kapriçioz në hartimin e faqes së internetit.

Krijimi i një favicon të mirë është mjaft e vështirë, pasi ikona është e vogël, duhet të jetë e qartë dhe të shfaq diçka që lidhet me faqen tuaj. Krijimi i një favicon që është kompatibil me të gjithë shfletuesit popullor mund të jetë gjithashtu një detyrë e frikshme. Në këtë artikull ne do të merremi me të gjitha aspektet komplekse të krijimit të saj. Nëse keni nevojë edhe për një logo, atëherë ne kemi një artikull si ta bësh.

Si të krijoni një favicon

Le të fillojmë me hartimin e favicon. Dizajni i mirë, pavarësisht nga kompaktësia e tij, duhet të pasqyrojë thelbin e sitit tuaj dhe të jetë pjesë organike e identitetit të korporatës. Në mënyrë tipike, ikona është një shenjë grafike (ikonë) e një kompanie dhe jo një logo e tërë (ikonë, tekst dhe slogan).

Si një favicon, këto faqet e internetit përdorin ikonat e tyre (ose imazhet afër tyre).

Teksti në favicon nuk duhet të përdoret, pasi ky tekst do të jetë i paqartë për shkak të madhësisë së imazhit të vogël. Përjashtimet e vetme për këtë rregull janë karaktere me tekst të famshëm botëror që lidhen automatikisht me një markë të caktuar. Për shembull, burimi online Wikipedia la në favicon shkronjën e saj të madhe "W" dhe Facebook - letrën "F".

Në këto favicons ka letra që janë të lidhur fort me një markë të veçantë. Për shembull, Facebook përdor shenjën grafike. Gjithashtu vini re se pixels janë të dukshme në imazhin e Disney. Kjo për shkak se screenshot u mor në një ekran Retina, i cili është i pajtueshëm me 16 × 16 ikona, ndërsa faqet e internetit përdorin 32 × 32 ikona.

Meqenëse favicons janë imazhe të vogla, çdo pixel luan një rol të rëndësishëm. Ndonjëherë pas reduktimit të logos, piksele individuale bëhen të dukshme, për shkak të së cilës imazhi bëhet "i paqartë". Për të arritur qartësi, ju duhet të redaktoni ikonën në nivelin e pikselës.

Për të shmangur këtë, duhet të ndryshoni logon duke përdorur redaktorë të veçantë si Photoshop ose GIMP. Së pari ju duhet të zvogëloni madhësinë e imazhit në 64x64 piksele (kjo është favicon madhësia më e madhe). Pastaj ju duhet të redaktoni çdo pixel duke përdorur veglën Pencil derisa imazhi të jetë i qartë. Ky është një proces i lodhshëm, por rezultati ia vlen. Kur favicon 64x64 është gati, duhet të bëni të njëjtën punë me imazhin e 16 × 16, 24 × 24 dhe 32 × 32 piksele. Pra, shumë madhësi që ju nevojitet për të shfaqur në mënyrë të saktë në të gjitha shfletuesit dhe veglat:

• 64x64 - shfletuesit Safari;
• 32x32 - display me rezolucion të lartë (Retina);
• 24x24 - bookmarks Internet Explorer dhe MicroSoft Edge;
• 16x16 - Google Chrome dhe shfletuesit e tjerë.

Si të krijoni një favicon në Photoshop

Së pari ju duhet të krijoni disa piktura me përmasa të mësipërme.

Pastaj ju duhet të shtoni një ikonë, një letër ose një imazh tjetër në kanavacë.

Si të ruani një favicon

Duke krijuar ikona me madhësi të ndryshme, ruani secilën prej tyre si një skedar transparent PNG (24 bit). Në Photoshop, ju mund të përdorni funksionin Save for Web në dispozicion në menunë File. Pastaj ju duhet të bashkoni të gjitha dosjet PNG në një skedar ICO. Ju mund të përdorni të dy skedarët PNG dhe skedarët ICO në të njëjtën kohë, por shpesh Safari dhe Chrome preferojnë vetëm formatin ICO. Sipas mendimit tim, është më e lehtë të krijoni një skedar të ICO-së. Formati i ICO-së nuk është shumë i zakonshëm, por për fat të mirë ka një numër mjetesh që mund t'ju ndihmojnë të konvertojnë skedarët tuaj në këtë format. Për këtë qëllim, preferoj të përdor X-Icon Editor . Ky është një shërbim i lirë në internet që menjëherë i konverton imazhet e shkarkuar në një skedar ICO, pas së cilës ju mund ta shkarkoni. Kjo nuk është e komplikuar, vetëm ndiqni udhëzimet në faqe. Nëse e konsideron veten një person të dëshpëruar, mund të eksperimentosh me redaktorin e pikselit të këtij shërbimi dhe të nxjerrë një favicon vetë. (Edhe pse preferoj të modifikoj favicons në një redaktor më profesional, për shembull, në Photoshop).

Duke ngarkuar imazhet tuaja PNG tek Redaktuesi X-Icon, do të merrni një skedar ICO në dalje.

Si të futni faqen e favicon

Pra, ju tashmë keni një skedar ICO. Tani ju duhet ta shtoni në faqen e internetit. Riemëroni skedarin në favicon.ico dhe vendoseni në dosjen rrënjë të faqes suaj (ku ruhen file index.html dhe skedarë të tjerë standardë). Pas shtimit të suksesshëm, ju mund ta shikoni atë në faqen tuaj te internetit. Com / favicon.ico. Pothuajse të gjithë shfletuesit kërkojnë skedarin favicon.ico në dosjen rrënjë. Prandaj, është e rëndësishme që të shkarkoni favicon në këtë dosje. Për pajtueshmëri me shfletues të ndryshëm, është më mirë të mos shtoni elementë HTML ose lidhje që tregojnë vendndodhjen e saj. Ky mashtrim funksionon për të gjithë shfletuesit, deri në IE6. Gjithashtu, nëse keni një faqe WordPress, atëherë në shumë tema mund të shtoni një favicon në cilësimet e temës. Kjo metodë mund të përdoret gjithashtu.

Si ta zëvendësoni favicon

Për disa arsye të pashpjegueshme, shfletuesit e shtojnë atë në cache. Prandaj, kur ngarkoni një skedar të ri ICO, shfletuesi mund të vazhdojë të tregojë favicon tuaj të vjetër. Çfarë duhet të bëni në këtë rast? Ju mund të shtoni një skedar HTML të përkohshëm që tregon vendndodhjen e favicon tuaj të ri. Gjithashtu në fund të URL-së ju duhet të shtoni një string të shkurtër query:

<link rel = "ikona e shkurtore" href = "faqja juaj e internetit / favicon.ico? v = 2" />

Pra, shfletuesi do të mendojë se ky është një URL unike dhe prandaj do të detyrohet të shfaqë një ikonë të re. Pas përditësimit të favicon, ky kod HTML mund të hiqet tërësisht. Nëse keni nevojë të bëni ndryshime në favicon, përdorni të njëjtën teknikë, çdo herë duke rritur numrin pas "v" në string query. Kështu, shfletuesi çdo herë e percepton këtë URL si unik dhe shfaq versionin e ri. Dhe mos harroni të fshini kodin HTML pas një përditësimi të suksesshëm.

Si të krijoni favicon më komplekse

Në këtë artikull kam dashur të përshkruaj një mënyrë universale dhe të lehtë për të krijuar favicon që do të punojnë pothuajse në çdo platformë. Por në dizajnimin dhe zhvillimin e internetit nuk ka kufi për përsosmëri. Nëse dëshironi të mësoni se si të krijoni ikona më komplekse, mund të provoni ta përdorni shërbimin favico.js . Kjo ju lejon të krijoni imazhe dinamike me numra të ndryshëm. Falë kësaj ikone, mund të shihni numrin e mesazheve të palexuara, edhe kur skeda përkatëse nuk është aktive. Nëse dëshironi të krijoni favicons animuar në internet, mund të provoni duke përdorur një gjenerator favicon favicon.cc .

Më shumë gjeneratorë online ju mund të gjeni këtu .

Nëse doni të ndani këshillat tuaja për krijimin e favicon ose bëni një pyetje, unë jam duke pritur për ju në komentet!