Vytvorte favicon z obrázka. Vytvorte si Favicon online

Dnes sa dotkneme veľmi zaujímavej témy. Pri práci na svojom webe si skôr či neskôr budete musieť vytvoriť favicon. Zjednodušene povedané, favicon je ikona vášho webu, ktorá sa zobrazuje na karte v prehliadači. Môžete to vidieť aj v oblasti rýchleho prístupu vášho prehliadača, ak bola vaša lokalita pridaná do obľúbených.

Favicony najpopulárnejších stránok

Myslím si, že nemá zmysel hovoriť, že favicon by mal byť kvalitný, pretože je do istej miery tvárou vašej stránky. V tomto článku sa naučíme, ako vytvoriť favicony, ktoré spĺňajú naše potreby, a tiež sa zoznámime so službou na ich konverziu. Prečítajte si viac nižšie.

Verzia videa:

Aká by mala byť favicon?

Pred začatím vytvárania samotnej favicon by bolo pekné pozastaviť sa nad tým, aké by v ideálnom prípade mali byť. Takže ideálna favicon:

Je jasné a zrozumiteľné
Vyrobené v dobrej kvalite
Vyjadruje význam vašej stránky
Má spoločný štýl s vašou stránkou
Odlišuje sa od ikon iných stránok

Vyššie uvedené parametre možno klasifikovať ako ideálny favicon. A práve takúto ikonu potrebujeme vytvoriť pre našu stránku. Diskutuje sa však o tom, čo presne by malo byť zobrazené na favicon. Domnievam sa, že v tejto veci musíte vychádzať zo všeobecného štýlu a témy vašej stránky. Môže obsahovať nejaký obrázok alebo text. Ak je na favikone umiestnený text, nemal by pozostávať z viac ako 2 písmen. V opačnom prípade nikto nebude môcť čítať takýto text, pretože rozmery favicon sú spravidla 16*16 pixelov.

Aké veľkosti majú ikony webových stránok?

Ako viete, v súčasnosti existuje veľké množstvo prehliadačov, monitorov a zariadení. A ich požiadavky na veľkosti favicon sú rôzne. Je potrebné zvážiť nasledujúce možnosti veľkosti:

16*16px - štandardné veľkosti favicon, vhodné pre väčšinu prehliadačov a zariadení
32*32px – používa sa v niektorých prípadoch v internet Explorer A Safari
57*57px – používa sa pri zobrazení na iPhone
72*72px – používa sa pri zobrazení na iPad
114*114px – používa sa pri zobrazovaní na displejoch sietnice (57*2=114)
144*144px – používa sa pri zobrazovaní na displejoch sietnice iPad (72*2=144)

Aký formát by mal mať favicon?

Predtým prehliadače akceptovali iba ikony favicon vo formáte "ico". Teraz sa naučili rozumieť iným formátom, vrátane "png". V našom prípade zabijeme 2 muchy jednou ranou. Najprv vytvoríme favicon vo formáte "png" a potom ho skonvertujte na "ico".

Niekoľko spôsobov, ako vytvoriť favicony

Dnes existujú dva hlavné spôsoby vytvárania favicon:

Prostredníctvom špeciálnych online služieb
Vytvorte si ho sami pomocou špeciálnych programov, ako sú Photoshop a Adobe Illustrator

Každá metóda má svoje vlastné charakteristiky. Výhodou vytvorenia favicon prostredníctvom online služieb je, že na to nepotrebujete mať žiadne špeciálne zručnosti. Jednoducho nahráte požadovaný obrázok, upravíte ho a stiahnete hotovú favicon. Alebo jednoducho pracujete s textom a nakreslíte ikonu pomocou nástrojov online služby. Vo všeobecnosti je hlavnou výhodou tejto metódy jej jednoduchosť. Druhou stranou mince však je, že kvalita takýchto ikon webových stránok nie je veľmi žiaduca. Jedinečnú favicon nedostanete z jednoduchého dôvodu, že galéria ikon pre online služby nie je neobmedzená. A pri použití vlastných obrázkov pomocou nástrojov služby nie je také ľahké vytvoriť vysokokvalitný produkt. V prípade manuálneho kreslenia ikony pomocou nástrojov online služby je výsledkom „niečo nepredstaviteľné“.

Preto volíme druhé, zložitejšie, ale úspešné riešenie. Na vytvorenie favicon použijeme program Photoshop. Ak s týmto programom nemáte skúsenosti, nevadí. Podľa mojich pokynov úlohu ľahko dokončíte.

Vytvára sa favicon

Ako som už spomenul, favicon je možné vytvoriť pomocou obrázka alebo len písmen. V našom prípade použijem nejaký obrázok. Predstavme si napríklad, že máme automobilový web. Preto musíme nájsť obrázok z auto oblasti. Navrhujem vytvoriť ikonu našej stránky vo forme kolieska.

Výber obrázka

Obrázky môžete robiť odkiaľkoľvek. Napríklad cez to isté Obrázky Yandex. Hlavnou podmienkou je, aby bol obraz jednoduchý, bez tieňov alebo objemov. Je to spôsobené tým, že pri zmenšení na 16 pixelov nebude mať veľa detailov. V dôsledku nadmerného objemu a tieňov môže byť obraz rozmazaný.

Pomocou vyhľadávania nájdem vhodný obrázok google na želanie "koleso". Všetko, čo musím urobiť, je uložiť ho kliknutím pravým tlačidlom myši a výberom možnosti „Uložiť obrázok ako“.

Relevantný obrázok na obrázkoch google

Ďalej tento obrázok otvoríme pomocou Photoshop. Je veľmi dôležité, aby favicon mala priehľadné pozadie. V našom prípade to tak nie je. Na odstránenie pozadia použijeme nástroj Magic Wand. Podstata jej práce je veľmi jednoduchá. Pomocou tohto nástroja môžeme na obrázku vybrať oblasti rovnakej farby. Keďže pozadie nášho obrázka jasne kontrastuje so samotným kolesom, bude to veľmi jednoduché. Jedným kliknutím vyberieme jednofarebnú oblasť. Stlačením klávesovej skratky CTRL+Delete túto oblasť odstránime.

Odstránenie pozadia nášho kolesa

Robíme to so všetkými časťami pozadia obrázka. Na našom obrázku je teda koleso na priehľadnom pozadí, čo sme potrebovali urobiť. Takže šablóna pre ikonu našej webovej stránky je pripravená.

Vytvorte si favicon v 2 rôznych veľkostiach

Navrhujem vytvoriť 2 ikony favicon s veľkosťou 64px a 16px. Najprv musíme vytvoriť väčšiu ikonu (64px). Ak to chcete urobiť, stlačte klávesovú skratku CTRL+N. V zobrazenom okne vyberieme výšku a šírku obrázka 64px.

Nastavenie rozmerov budúcej favicon

Ďalej musíme presunúť koleso do oblasti novovytvoreného obrázka. Za týmto účelom sa vrátime na obrázok pomocou kolieska a vyberieme nástroj "Presunúť". Ďalším krokom je kliknúť na obrázok kolesa a podržaním ľavého tlačidla myši ho presunúť do oblasti nového obrázka. Pri pohybe sa uistite, že je vybratá vrstva s kolieskom. V opačnom prípade prenos zlyhá.

Presunutie kolesa na nový obrázok

Po presunutí kolies do nového imidžu vidíme, že nesedia. Potrebujeme zmenšiť koliesko na 64 px. Ak to chcete urobiť, podržte kláves SHIFT a kliknutím na diagonálny bod obrázku ho zmenšíme. Tak sme vytvorili prvú favicon pre náš web. Pripomínam, že naša veľkosť je 64*64px. Teraz ho musíme uložiť výberom funkcie „Uložiť pre web“ na karte „Súbor“. Vyberáme formát PNG-24 a priečinok snímky. Samotný favicon nazývame aj latinkou - "favicon".

Uložte favicon

Skvelé. Teraz nám ostáva už len vytvoriť menšiu favicon. Ak to chcete urobiť, kliknite na kartu „Obrázok“ a vyberte funkciu „Veľkosť obrázka“. Tu nastavíme šírku a výšku na 16px. Teraz už len musíme tento obrázok uložiť na web. Môžeme to nazvať „favicon-2“.

Takže tu sme, vytvárame 2 favicony pre našu webovú stránku vo formáte "png". Najprv sme vytvorili možnosť s veľkosťou 64px, aby sme ju potom jednoducho zmenšili na 16px. Ak najprv vytvoríte možnosť so 16 pixelmi, nebudete ju môcť zväčšiť na 64 pixelov bez straty kvality. Majte to preto na pamäti, aby ste nerobili dvojitú prácu.

Inštalácia favicon na webe

Inštalácia ikony favicon na webe v rámci značky píšeme:

Ak máme favicon vo formáte " ico" potom my namiesto toho" png" napíš" ico". Napríklad:

Ako vidíte, ikona lokality sa zobrazuje tak, ako sme zamýšľali.

Konverzia ikony webu do formátu „ico“.

Moderné prehliadače dokážu ľahko rozpoznať a zobraziť ikony favicon vo formáte "png". Možno ho však budete musieť previesť na "ico". Jednou z výhod tohto formátu je ukladanie favicon všetkých veľkostí do jedného súboru. Súhlaste s tým, že je to veľmi pohodlné. Takže na konverziu našich ikon použijeme skvelú službu - xiconeditor.com. Práca s ním je veľmi jednoduchá. Všetko prebieha v 4 krokoch:
1. Najprv musíme nahrať naše favicony. Za týmto účelom klikneme na tlačidlo "Import".

Nahrávanie favicon do služby xiconeditor.com

3. Ak chcete, môžete kliknúť na tlačidlo "Náhľad" a uvidíte, ako sa budú zobrazovať. Na stiahnutie našich favicon vo formáte "ico" klikneme na tlačidlo "Export".

Takže tu sa učíme, ako vytvoriť favicony "png" a previesť ich do formátu "ico". Konkrétne som neuvažoval o detailnom spracovaní obrázkov vo Photoshope, pretože pre mnohých by to bolo zbytočné. V prípade potreby môžete samozrejme ešte zlepšiť kvalitu favicon prácou s pixelmi vo Photoshope. Všetko podstatné som sa snažil podať v zjednodušenej forme. A to je z mojej strany všetko. Dúfam, že táto lekcia bola pre vás užitočná. Ak je to pravda:

Zverejnite tento článok na sociálnych sieťach, aby z neho malo úžitok viac ľudí;
Prihláste sa na odber môjho bulletinu, aby ste nezmeškali užitočné a zaujímavé blogové príspevky.

Tu sa s tebou nelúčim. Ďakujem za pozornosť a vidíme sa pri ďalších publikáciách!

Favicon(skrátene z anglického FAVorites ICON - „ikona pre obľúbené“, z názvu priečinka so záložkami v MSIE) - ikona pre webovú stránku alebo webovú stránku. Prehliadač ho zobrazuje v paneli s adresou pred adresou URL stránky, ako aj ako obrázok vedľa záložky, na kartách a v iných prvkoch rozhrania.

Väčšina profesionálnych webov ich zvykne mať, na jednej strane to vašu stránku nielen zaradí medzi profesionálov, ale pomôže vám to aj odlíšiť sa od ostatných stránok.

Ak ho chcete, je veľmi ľahké ho podpísať pomocou nášho generátora. Všetko, čo potrebujete, je obrázok (akejkoľvek veľkosti), odošlite ho pomocou nižšie uvedeného formulára a o niekoľko sekúnd dostanete späť nejaké komprimované obrázky, ktoré môžete použiť ako favicon. Je to naozaj jednoduché!

Väčšina verzií hlavných prehliadačov podporuje ikony favicon. Napríklad Internet Explorer 5/6/7+, Firefox 1/2+, Mozilla 1/2+, Netscape 7+, Opera 7+, Avant 1.1, Konqueror 3+, Safari a ďalšie.

Pôvodný obrázok (maximálna veľkosť: 150 kB):

Favicon je tvár vášho zdroja v prehliadači

Pri otváraní stránky v prehliadači používatelia veľmi často vidia malú ikonu vedľa adresy URL zdroja - favicon (favicon, favicon), ktorá je v skutočnosti tvárou internetového projektu. Favicon je skratka pre anglickú frázu „favorites ICON“, čo znamená „ikona pre obľúbené“. Ak ste svoj zdroj „vybavili“ ikonou favicon, bude sa môcť odlíšiť od iných stránok otvorených používateľom na kartách prehliadača. Veľmi často je favicon menšou kópiou loga internetového projektu alebo spoločnosti (napríklad Wikipedia, Google alebo Facebook), no môžete vidieť aj špeciálne vytvorené ikony, ktoré jednoducho zobrazujú podstatu alebo tému projektu. Prvá favicon sa objavila v roku 1999, keď vyhľadávacia spoločnosť Microsoft predstavila svoj webový prehliadač Internet Explorer 5: práve v tejto verzii prehliadača začala podpora miniatúrnych ikon pre webové stránky. A v roku 2003 bol formát favicon oficiálne zaregistrovaný úradom IANA (Internet Assigned Numbers Authority). Teraz Microsoft stratil svoj monopol v tomto výklenku a všetky moderné prehliadače (počítačové aj mobilné) podporujú ikony favicon. Na čo sa používa nástroj Favicon Generator? Pomocou nástroja Favicon Generator môžete vytvoriť jedinečnú favicon pre svoju webovú stránku. Na to stačí nahrať pôvodný obrázok do špeciálneho poľa, ktorého veľkosť by nemala presiahnuť 150 KB, vybrať požadovanú veľkosť budúcej ikony (16x16 alebo 32x32 pixelov) a kliknúť na tlačidlo "Konvertovať". Výslednú ikonu vo formáte ICO je možné použiť na uverejňovanie na internete: bude kompatibilná s väčšinou moderných prehliadačov. Upozorňujeme, že mnoho moderných webových prehliadačov automaticky načítava favicon.ico z koreňového adresára zdroja bez toho, aby to vyžadovalo zadanie v kódoch stránok. Ak však správca webu chce použiť samostatnú favikonu pre každú stránku webu, musí uviesť jej pozíciu v rámci sekcie v kóde HTML zdroja. Všimnite si tiež, že ikona sa v prehliadači nezobrazí, ak sa jej Typ obsahu v odpovedi webového servera nezhoduje so zadaným poľom nadpisu v kóde stránky. Ako by mala vyzerať dobrá favicon? Napriek tomu, že veľkosť favicon je veľmi malá (16x16 alebo 32x32 pixelov), táto ikona nesie veľmi veľkú sémantickú záťaž a jej vytvorenie je pomerne zložitý proces, ktorý webovým dizajnérom zaberie rovnaké množstvo času ako vývoj úplného osadené logo. Často sa stáva, že logo spoločnosti absolútne nie je vhodné pre úlohu favicon. V tomto prípade budete musieť použiť všetku svoju zručnosť a predstavivosť. Budúca favikona by sa mala vryť do pamäte používateľa tak silno, že v budúcnosti bude túto ikonu spájať výlučne s vaším zdrojom. Pri vytváraní favicon nebudete mať možnosť „rozhádzať“ pixely: každý z 256 (alebo 1024) pixelov má svoj význam. Vopred manuálne opravte pixely, ktoré majú „hmlistú“ farbu, pretože pri kompresii obrázka môže byť ikona rozmazaná a bude vyžadovať úpravy v grafickom editore. Upozorňujeme, že editor fotografií Adobe Photoshop neukladá obrázky vo formáte ICO, takže môžete obrázok previesť do tohto formátu pomocou našej služby Favicon Generator.

Veľmi dôležitým prvkom dizajnu blogu je favicon – malý obrázok (16x16 pixelov). Malá veľkosť – ale obrovský efekt! Tento článok je venovaný tomu, ako vytvoriť favicon (favicon.ico) pre webovú stránku online pomocou špeciálnych služieb. Dozviete sa viac o tom, čo je táto ikona favicon, na čo sa používa, aké má funkcie, ako ju pridať na svoj blog a vytvoriť online. Dozviete sa aj kde stiahnite si zbierku hotových ikon favicon pre webovú stránku.

Vo všeobecnosti je príspevok veľmi informatívny a zaujímavý, dôrazne odporúčam tým, ktorí ešte nemajú favicon, aby si ho prečítali.

Najprv sa pozrime bližšie na to, čo je Favicon a na čo sa používa.

Favicon je skratka dvoch slov (anglicky FAVorites ICON), čo sa prekladá ako ikona (veľmi malý obrázok) pre „Favorites“. Obľúbené– takto sa nazývajú záložky v prehliadači Internet Explorer. Favicon vyzerá asi takto:

Vytvorenie favicon pre webovú stránku sa stalo veľmi jednoduchým, takže tento mini si získal veľkú popularitu. Okrem toho si môžete stiahnuť hotovú ikonu favicon ico pre stránku, ktorú stačí pridať. Keď si z galérie vyberiete ten správny, môžete ním ozdobiť svoj web a obdivovať ho v prehliadači (takto vyzerá tento miniobrázok v prehliadači Chrome):

Favicon je teda malý obrázok s veľkosťou 16 x 16 px s príponou .ico (prípona ikony). Pretože Ikona si získala veľkú popularitu, má ju takmer každá stránka, a to je ďalší dôvod na vytvorenie favicon pre online stránku. Nezáleží na tom, aký typ hostingu používate, na akom motore váš blog beží – v každom prípade si môžete vytvoriť online a potom nainštalovať favicon alebo stiahnuť hotovú favicon pre web. Vďaka moderným generátorom ikon ich tvorba nezaberie veľa času – jednu či dve minúty a všetko je pripravené.

Ešte nemáte favicon? Uzdrav sa čoskoro!

Na čo slúži tento miniobrázok? Po prvé, favicon pre webovú stránku je ako logo obchodnej spoločnosti, je to spôsob, ako vyčnievať z davu. Návštevníci spoznajú vašu stránku podľa obrázka favicon. Po druhé, Yandex tiež používa obrázky favicon a zobrazuje ich vedľa výsledkov vyhľadávania, čo umožňuje webom s faviconmi vyzerať lepšie v porovnaní s ostatnými. To znamená, že používatelia budú chodiť na vašu stránku častejšie, pretože ich ikona „naláka“. Inými slovami, tento miniobrázok vám pomôže. Vyzerá to takto:

No, teraz chcete vedieť, ako vytvoriť favicon? Čítajte ďalej a môžete si vybrať favicon pre svoj web z mnohých kolekcií.

Mimochodom, vyhľadávací nástroj Yandex má dokonca špeciálneho robota, ktorý indexuje tieto ikony a načítava ich do databázy vyhľadávacieho nástroja. Keď vytvoríte favicon a nainštalujete ju na svoje stránky, Yandex ju po určitom čase (zvyčajne nie viac ako mesiac) zaindexuje a začne ju zobrazovať vo výsledkoch vyhľadávania. Kedykoľvek si môžete skontrolovať, či sa vaše mini-logo už nachádza v databáze vyhľadávača. Môžete to urobiť jedným z 3 spôsobov:

Zadajte svoju stránku do vyhľadávacieho poľa Yandex a uvidíte, či sa vedľa nej nachádza ikona favicon.
Do prehliadača zadajte odkaz http://favicon.yandex.net/favicon/ site.ru, kde miesto site.ru nahraďte adresou svojho webu. Ak je fava indexovaná, budete ju môcť vidieť.
Prejdite na panel Yandex.Webmaster, tam sa odráža aj ikona favicon.

Teraz poďme zistiť, kde si môžete stiahnuť favicon pre web.

2. Online generátory favicon a zbierky

Teraz vieme, čo je favicon a prečo ju stránka potrebuje. Nezabudnite, že jeho veľkosť v pixeloch sa musí presne rovnať 16 x 16 a prípona musí byť iba .ico. Teraz poďme zistiť, ako vytvoriť takéto mini-logo:

Stiahnite si hotovú favu z galérie.
Vytvorte si svoj vlastný pomocou generátora favicon.
Vytvorte z hotového obrázka (opäť pomocou generátora favicon)

2.1 Favicon zbierok a galérií

http://www.thefavicongallery.com/ - aj keď malá zbierka, je užitočná. Tu nájdete ikony na rôzne témy. Celkovo je ich asi 300. Ak si chcete stiahnuť svoju obľúbenú ikonu favicon pre stránku, kliknite na ňu pravým tlačidlom myši a uložte ju do počítača.
http://www.iconj.com/favicon-gallery-page1.html - ďalšia zbierka favicon pre stránku, ktorá obsahuje viac ako 3 000 miniobrázkov. Svoj obľúbený si môžete uložiť v dvoch formátoch (ico alebo gif). Má to však nevýhodu: naraz môžete zobraziť iba 30 ikon; ak chcete zobraziť ďalšie, musíte prejsť na novú stránku.
http://www.favicon.cc/?action=icon_list&order_by_rating=1 – vďaka tejto galérii si nemusíte vytvárať favicon sami online. Stačí si vybrať a stiahnuť obrázok, ktorý sa vám páči. Opäť si môžete zobraziť 20 favicon naraz, čo spomaľuje proces výberu.
http://www.favicon.co.uk/gallery.php - táto stránka vám umožňuje nielen vytvoriť favicon pre stránku, ale aj stiahnuť hotové možnosti. Naraz môžete zobraziť 144 ikon, čo je oveľa pohodlnejšie ako v predchádzajúcich dvoch možnostiach. Favas na rôzne témy.
http://favicon-generator.org/gallery/ - aj keď malá, ale užitočná zbierka 84 favicon. Vyberte si ľubovoľné!

2.2 Ako vytvoriť Favicon pre webovú stránku od začiatku

Samozrejme, môžete si stiahnuť hotovú favu pre svoj web, ale oveľa lepšie je vytvoriť si vlastnú. V tejto veci nám pomôžu takzvané generátory Favicon, ktoré vám umožňujú vytvárať krásne miniobrázky online.

2.2.1 Logaster.ru

Náš zoznam začína online generátorom favicon
Hlavnou výhodou služby je, že vôbec nemusíte kresliť favicon alebo konvertovať z loga.
Všetko, čo musíte urobiť, je zadať názov stránky alebo spoločnosti a vybrať tému.
Potom služba vytvorí hotové návrhy favicon. Vyberte požadovanú ikonu, písmo, farbu.
To je veľmi výhodné pre tých, ktorí nevedia kresliť alebo pracovať s grafickými programami.

Súbory favicon si môžete stiahnuť vo formátoch ICO alebo PNG.
Môžete si prečítať viac o tom, ako vytvoriť favicon pomocou Logaster

Okrem favicon služba vytvára aj logá, vizitky, obálky a hlavičkové papiere.

2.2.2 Favicon.cc – generátor favicon

Tento jednoduchý generátor je jedným z najjednoduchších a najpopulárnejších používaných na vytváranie online favicon pre webovú stránku. Budete môcť nakresliť každý pixel budúcej favy (celkovo ich je 256). Keď prejdete na stránku, získate prístup k pracovnému oknu, v ktorom môžete experimentovať.

Modrá farba na snímke obrazovky vyššie zobrazuje pracovnú oblasť - tu priamo vytvoríte favicon pre stránku. Hneď nižšie môžete vidieť, ako vyzerá fava v pôvodnej mierke (zvýraznená čiernou farbou).

Práca s týmto generátorom je taká jednoduchá, že pravdepodobne nebudete mať žiadne otázky o tom, ako vytvoriť ikonu favicon pre webovú stránku. V podstate si na tejto stránke môžete vytvárať online celé zbierky favicon a potom ich napríklad predávať.

Každý štvorec v pracovnej oblasti je pixel. Musíte ho natrieť požadovanou farbou. Farbu si môžete vybrať v palete umiestnenej napravo od pracovnej oblasti. Pixel môžete vymaľovať stlačením ľavého tlačidla a vymazanú farbu stlačením pravého tlačidla.

Obraz je možné presúvať a presúvať po pracovnej ploche, na čo slúži predmet pohybovať sa.

Ak chcete stiahnuť výslednú favicon, ktorú ste vytvorili pre stránku, kliknite na odkaz Stiahnuť favicon (zvýraznený červenou farbou).

2.2.3. Generátor Amichurin.Appspot.com

Ďalší generátor krásnych favicon, v ktorom si môžete vytvoriť krásny obrázok online. Celý generátor je v ruštine, ale jeho funkčnosť bude jednoduchšia ako v predchádzajúcom prípade. Mimochodom, podpisy robené v bordovej farbe nie sú moje.

Žiaľ, na tejto stránke som nenašiel žiadne hotové zbierky favicon, ktoré by sa dali stiahnuť pre stránku, takže ju používajte iba ako generátor.

2.2.4 Generátor Favicon-Generator.org

Veľmi dobrý generátor favicon. Veľmi podobná druhej možnosti, ale o niečo nižšia ako tá. Vo všeobecnosti, ako ste si už všimli, princíp fungovania na všetkých týchto stránkach je rovnaký. Preto by s nimi nemali byť žiadne problémy. Vyberte si a pracujte s tým, ktorý sa vám najviac páči.

2.3 Favicon z hotového obrázka

Ak nechcete vytvoriť favicon pomocou online generátorov od nuly a galérie a zbierky ikon favicon pre túto stránku nie sú pre vás vhodné, skúste vytvoriť mini-obrázok z hotového obrázka. Môžete dokonca použiť svoju fotografiu. Takéto obrázky sa vytvárajú aj online pomocou špeciálnych generátorov favicon.

Vopred si pripravte obrázok, ktorý chcete použiť ako základ.

2.3.1 Služba Favicon.ru

Jedna z najpopulárnejších služieb, ktorá vám pomôže vytvoriť favicon pre webovú stránku (mimochodom, webová stránka v ruskom jazyku). Jednoduché a ľahko použiteľné vám pomôže vytvoriť mini logo z hotového obrázka.

Môžete pridať obrázok alebo fotografiu (základňu) takto:

Kliknite na tlačidlo vyberte súbor» a odovzdajte požadovanú fotografiu.
Do bieleho poľa zadajte adresu URL obrázka (urobte to, ak súbor nie je uložený v počítači, ale na internete).

Po pridaní obrázka kliknite na „ Vytvortefavicon.ico!" a chvíľu počkajte, generátor vygeneruje ikonu. Potom si stiahnite obrázok do počítača. Mimochodom, táto stránka má okrem generátora aj veľkú zbierku ikon favicon pre vašu stránku.

2.3.2 Služba Favicon.cc

Podobný generátor, ale s výkonnejšou funkčnosťou. Ak chcete vytvoriť obľúbený obrázok z hotového obrázka, najprv prejdite na kartu „Importovať obrázok“.

Teraz kliknite na „Vybrať súbor“ a pridajte súbor, ktorý sťahujete. Na jej základe sa pre vašu stránku vytvorí ikona favicon. Mimochodom, možno budete potrebovať funkciu roztiahnutia obrazu:

Zachovať rozmery – ak sa pomer strán zníži, obrázky zostanú rovnaké
Ikona Zmenšiť na štvorec – strany obrázka budú štvorcové (obrázok môže byť zdeformovaný).

Po stiahnutí súboru ho môžete upravovať online pomocou tohto generátora favicon. Keď ste s výsledkom spokojní, stiahnite si fava do svojho počítača.

3. Ako pridať favicon na blog WordPress

Zistili sme, kde stiahnuť hotovú favicon pre webovú stránku alebo ako si vytvoriť vlastnú. Teraz poďme diskutovať o tom, ako pridať fava do blogu WordPress.

Favicon sa spravidla nachádza v koreňovom adresári stránky (v koreňovom priečinku) - na to sa zameriame. Ak sa vaša fava nenachádza v koreni, jednoducho ju tam presuňte.

Pridanie favicon.ico v dvoch krokoch.

KROK JEDNA

Najprv musíte vo svojej téme nájsť riadok kódu, ktorý je zodpovedný za zobrazenie favicon. Otvorte hlavičkový súbor (header.php) na úpravu a nájdite tento (alebo podobný) riadok:

Ak vôbec nič podobné neobsahuje slovo favicon.ico, potom stačí pridať tieto dva riadky niekde medzi značky A.

KROK DRUHÝ

Teraz je potrebné pridať samotnú favicon na váš hosting, presne do koreňového priečinka stránky (inak sa nezobrazí). Prejdite na svoj hosting a nahrajte fava do koreňového adresára stránky (vyžaduje sa názov súboru favicon.ico, rozmery sú povinné 16 x 16 pixelov).
To je všetko, favicon bude čoskoro indexovaný vyhľadávacími nástrojmi a bude sa zobrazovať vo výsledkoch vyhľadávania Yandex. A vaša stránka bude mať svoju vlastnú favicon.

Na konci uvádzam video tutoriál o tom, ako vytvoriť favicon pre webovú stránku.

Teraz je ikona osobnej stránky - Favicon - akousi vizitkou akéhokoľvek webového zdroja. Táto ikona zvýrazní požadovaný portál nielen v zozname kariet prehliadača, ale napríklad aj vo výsledkoch vyhľadávania Yandex. Favicon spravidla neplní žiadne iné funkcie okrem zvyšovania povedomia o stránke.

Vytvorenie ikony pre svoj vlastný zdroj je pomerne jednoduché: nájdite vhodný obrázok alebo ho nakreslite sami pomocou grafického editora a potom obrázok skomprimujte na požadovanú veľkosť - zvyčajne 16 x 16 pixelov. Výsledný výsledok uložte do súboru favicon.ico a umiestnite ho do koreňového priečinka lokality. Tento postup je však možné výrazne zjednodušiť pomocou jedného z generátorov Favicon dostupných na internete.

Väčšina editorov webových ikon ponúka všetky potrebné nástroje na vytváranie Favicon. V tomto prípade nie je potrebné kresliť obrázok od začiatku - môžete použiť hotový obrázok.

Metóda 1: Favicon.by

Online generátor favicon v ruskom jazyku: jednoduchý a vizuálny. Umožňuje vám nakresliť ikonu sami pomocou vstavaného plátna 16x16 a minimálneho zoznamu nástrojov, ako je ceruzka, guma, kvapkadlo a výplň. K dispozícii je paleta so všetkými farbami RGB a podporou priehľadnosti.

Ak chcete, môžete nahrať hotový obrázok do generátora - z počítača alebo webového zdroja tretej strany. Importovaný obrázok sa tiež umiestni na plátno a bude k dispozícii na úpravu.

Výsledkom je grafický súbor ICO s názvom favicon s rozlíšením 16 x 16 pixelov. Táto ikona je už pripravená na použitie ako ikona pre váš web.

Metóda 2: X-Icon Editor

Aplikácia prehliadača HTML5, ktorá vám umožňuje vytvárať podrobné ikony s veľkosťou až 64 x 64 pixelov. Na rozdiel od predchádzajúcej služby má X-Icon Editor viac nástrojov na kreslenie a každý z nich je možné flexibilne konfigurovať.

Rovnako ako v Favicon.by, aj tu môžete nahrať hotový obrázok na stránku a previesť ho na favicon av prípade potreby ho správne upraviť.

Ak chcete zachovať detaily obrázka, ktorý chcete zmeniť na favicon, X-Icon Editor je na to skvelý. Schopnosť generovať ikony s rozlíšením 64x64 pixelov je hlavnou výhodou tejto služby.

Generátor favicon – pomôže vám konvertovať a upravovať akýkoľvek obrázok a premení ho na favicon webu. Dnes je článok o najlepšom generátore favicon pre webové stránky súčasnosti.

V súčasnosti je ťažké predstaviť si webovú stránku, ktorá nemá favicon. Favicon je ikona, ktorá sa nachádza v adresnom riadku prehliadača alebo v nadpise okna (v závislosti od prehliadača) a ktorá odlišuje otvorenú stránku/kartu od mnohých iných. Pôvodne boli tieto ikony vyvinuté v IE, aby zvýraznili stránku v zozname záložiek prehliadača (v IE sa tieto záložky nazývali Obľúbené), a teda názov Favicon - ikona obľúbených.

Ale urobiť favicon vlastnými rukami nie je také jednoduché. Musí mať formát ICO, ktorý si vyžaduje špeciálny softvér, aby mohol robiť niečo hodnotné a má značné zručnosti. Na uľahčenie života je preto lepšie použiť online generátor favicon.

Existuje mnoho služieb, ktoré vám umožňujú generovať favicony z obrázkov (môže to byť logo alebo špeciálne navrhnutá ilustrácia). Väčšina z nich má ale problémy s transparentnosťou.

Problémy s transparentnosťou služby generátora favicon

Pre prehľadnosť uvádzame ilustráciu „Ako rôzne generátory favicon spracúvajú transparentnosť a zmenšenie veľkosti obrázka“.

V tomto porovnaní sme použili výsledky získané zo služieb favicon.cc a favicon-generator.org. Aby som bol úprimný, donedávna sme sami používali službu favicon.cc, ale nedávno sa našla vynikajúca náhrada - generátor favicon č.1.

Najlepší generátor favicon - www.xiconeditor.com

Podobne ako favicon.cc aj tento generátor favicon má zabudovaný vlastný online editor ikon, ale jeho výhodou je výborná práca s transparentnosťou.

Je úplne zrejmé, že je rozdiel v kvalite priehľadnosti (zrejme je rozdiel v kvalite zmeny veľkosti načítaného obrázku).

Okrem toho má xiconeditor.com ďalšiu výhodu – výborný systém náhľadu favicon, ktorý umožňuje zobraziť výsledok v rôznych podobách bez sťahovania vygenerovanej favicon. Ich náhľad je oveľa informatívnejší ako favicon.cc.

Môže byť užitočné prečítať si: