Program na vytváranie favicon online. Univerzálny spôsob vytvárania favicon. Kam nahrať favicon, aby bola online

Dobrý deň, milí čitatelia! Dnešný článok je o vytvorení favicon (favicon.ico) pre váš web. Z príspevku sa dozviete, čo je favicon, aké veľkosti má táto ikona a prečo je potrebné ju vyrobiť a nainštalovať na váš blog. Okrem toho článok poskytne generátory favicon, ktoré vám umožnia vytvoriť favicon online za pár minút, ako aj stránky, kde si ho môžete stiahnuť galérie a zbierky hotových favicon.

Na začiatok poďme zistiť, čo je Favicon, prečo je to potrebné, možno sa bez neho vôbec zaobídete?

1. Čo je ikona favicon a na čo slúži

koncepcia favicon pochádza z dvoch anglických slov Favorites Icon, ktoré možno preložiť ako ikona (malý obrázok) pre "obľúbené". "Obľúbené" je názov záložiek v základnom prehliadači Internet Explorer. V prehliadači Chrome vyzerajú napríklad takto:

Ku každému zdroju je malý obrázok, niečo ako mini . Súhlaste s tým, že je pohodlnejšie uložiť do záložiek nie adresy URL stránok, ale ich malé logá - favicony. Mimochodom, favicon sa okrem toho zobrazuje v paneli s adresou prehliadača bezprostredne pred adresou URL otvorenej stránky lokality alebo v názve záložky:

favicon je malý súbor (16×16 pixelov) s príponou .ico (túto príponu používajú operačné systémy na ukladanie ikon). Takmer každá stránka má favicon.ico, bez ohľadu na to, na akom hostingu sa nachádza alebo aký engine/tému používa. Online generátory favicon a galérie vám umožňujú vytvoriť ikonu za pár minút z ľubovoľného obrázka, nakresliť ju od začiatku alebo stiahnuť hotovú, takže ak ešte nepoužívate favicon na svojom blogu, napravte situáciu ako čo najskôr.

Načo je tento malý obrázok? Po prvé, je to mini-logo pre vašu stránku, vaši návštevníci si ho lepšie zapamätajú. Preto, ak sa rozhodnete pre jej vytvorenie, skúste sa uistiť, že favicon priťahuje pozornosť návštevníkov a je ľahko zapamätateľný. A po druhé, Yandex, najpopulárnejší vyhľadávací nástroj v Runete, umiestni svoju favicon vedľa každej stránky vo svojich výsledkoch, čo vám umožní rozlíšiť váš zdroj od ostatných, ktoré nemajú ikony. Používatelia s väčšou pravdepodobnosťou navštívia tie stránky, vedľa ktorých sa vychvaľuje obrázok (nezáleží na tom, ktorý z nich), čo znamená, že favicon to umožňuje.

Mimochodom, Yandex má dokonca špeciálny robot, ktorý neindexuje obsah na stránke, ale indexuje iba favicony zdrojov. Po vytvorení favicon a jeho inštalácii na webe budete musieť chvíľu počkať, kým ho tento robot Yandex nezaindexuje, a tento proces zvyčajne trvá týždeň až mesiac. Existujú tri spôsoby, ako skontrolovať, či Yandex indexoval vašu favicon:

• Zadajte adresu svojho webu do vyhľadávacieho poľa Yandex (napríklad http: // web) a zistite, či sa v blízkosti nenachádza ikona favicon.
• Kliknite na odkaz http://favicon.yandex.net/favicon/ stránky(kde musíte nahradiť „site“ adresou URL vašej stránky). Ak je ikona indexovaná, uvidíte ju.
• Prejdite na stránku Yandex.Webmaster (http://webmaster.yandex.ru) a vyhľadajte favicon.ico

2. Online generátory favicon a galérie

Takže sme už prišli na to, čo je favicon, ktorý je pre stránku taký potrebný. Dozvedeli sme sa, že by to malo byť 16 x 16 v pixeloch a jeho prípona by mala byť .ico. Teraz existuje niekoľko spôsobov, ako vytvoriť favicon.ico:

1. Stiahnite si hotovú ikonu z galérií favicon.
2. Vytvorte si favicon od začiatku pomocou Photoshopu alebo online generátora.
3. Z hotového obrázka vytvorte favicon (rozmery obrázka nie sú dôležité).

2.1 Zbierky a galérie Favicon

1. http://www.thefavicongallery.com/ — malá galéria, ktorá obsahuje ikony rôznych predmetov. Obsahuje cca 300 obrázkov. Ak chcete stiahnuť obrázok, ktorý sa vám páči, musíte naň kliknúť pravým tlačidlom myši a vybrať možnosť „uložiť ako“ a potom uložiť ikonu favicon do počítača.
2. http://www.iconj.com/- viac ako 3 000 ikon pre každý vkus a farbu. Obrázok je možné uložiť vo formáte .gif alebo .ico. Môžete si dokonca vziať html kód ikony. Existujú animované ikony favicon. Jedinou nevýhodou kolekcie je, že na jednej stránke je iba 30 ikon, takže musíte prezerať veľa stránok, aby ste si vybrali ten správny obrázok.
3. http://www.favicon.cc/- obrovská zbierka favicon, ale na jednej stránke je len 20 kusov, bude to trvať dlho, kým sa to posunie.
4. http://www.favicon.co.uk/- tiež dobrá galéria obsahujúca veľa favicon. Na každej stránke je 144 ikon, vďaka čomu je prehliadanie veľmi pohodlné. Favicony majú rôzne témy.
5. - malá zbierka (84 kusov) miniobrázkov pre vašu stránku.

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

Výhodou vytvorenia favicon od začiatku je, že výsledný favicon bude jedinečný a jedinečnosť je veľmi dôležitá! Preto je lepšie nebyť lenivý a stráviť 5-10 minút vytváraním vlastných favicon.

S generovaním ikony by nemali byť žiadne problémy, pretože všetko je tu jasné.

2.2.4 Favicon-Generator.org

Ďalší dobrý online generátor favicon. Dá sa k nemu dostať cez tento odkaz - http://favicon-generator.org/.

Ani s týmto generátorom by nemali byť problémy. Na obrazovke sú preložené funkcie online generátora favicon.

2.3 Ako vytvoriť favicon pre stránku z existujúceho obrázka

Ak si nechcete vytvoriť favicon pre svoju stránku od začiatku, môžete použiť obrázok, ktorý sa stane základom miniloga. V takom prípade si budete musieť vopred pripraviť obrázok (najlepšie štvorcový, inak môže byť vzor pri vytváraní favicon.ico skreslený) a potom ho použiť v online službe generátor favicon. Pozrime sa na dva najpopulárnejšie zdroje.

2.3.1 Favicon.ru

Online generátor je veľmi jednoduchý na používanie, ľahko prevedie akýkoľvek obrázok akejkoľvek veľkosti na malú ikonu 16x16 pixelov. Teraz sa sami presvedčíte, aké jednoduché je používanie tejto služby.

Existujú dva spôsoby, ako pridať obrázok:

• Pomocou tlačidla „Vybrať súbor“ nájdite požadovaný obrázok v počítači a nahrajte ho.
• Do poľa zadajte adresu obrázka na internete (v tomto prípade tento súbor nemusí byť ani vo vašom počítači) a služba urobí všetko sama.

Po odovzdaní súboru stačí kliknúť na „ Vytvorte favicon.ico!“ a počkajte niekoľko sekúnd. Ďalej si budete musieť stiahnuť favicon do svojho počítača.

2.3.2 Favicon.cc

Tento online generátor je výkonnejší ako predchádzajúci, ale aj komplikovanejší ako on. Ak chcete začať, kliknite na odkaz - favicon.cc a potom kliknite na „Importovať obrázok“ (v ľavom okne).

Ďalej kliknite na tlačidlo „Vybrať súbor“ a nahrajte požadovaný obrázok. Na základe neho sa vytvorí favicon pre vašu stránku. V takom prípade si budete musieť vybrať, čo robiť s obrázkom, keď je zmenšený:

• Zachovať rozmery – ponechajte pomer strán obrázka nezmenený.
• Ikona Zmenšiť na štvorec – privedie strany obrázka do štvorcového tvaru, pričom obrázok môže byť zdeformovaný.

Po nahraní obrázku ho môžete upraviť v online generátore alebo ho nechať nezmenený. Ak vám výsledný favicon.ico vyhovuje, stiahnite si ho do počítača.

3. Ako nainštalovať favicon na blog WordPress

Najčastejšie sa favicon nachádza v koreňovom priečinku lokality, navyše je to pohodlnejšie, takže túto možnosť zvážime. Toto sa vykonáva v dvoch krokoch.

PRVÝ KROK. Najprv budete musieť v téme nájsť riadok html kódu, ktorý špecifikuje cestu k favicon. Pre blog WordPress musíte nájsť súbor header.php (Header) a nájsť riadok, mal by vyzerať asi takto (môže sa mierne líšiť v závislosti od témy):

Tento riadok musíte nahradiť nasledujúcimi dvoma:

< link rel= "icon" href= "/favicon.ico" type= "image/x-icon" >

< link rel= "shortcut icon" href= "/favicon.ico" type= "image/x-icon" >

DÔLEŽITÉ! Tieto riadky by mali byť umiestnené vo vnútri značiek a

DRUHÝ KROK. Teraz musíte pridať favicon do koreňového priečinka lokality. Prejdite na svoj hosting a umiestnite súbor s názvom favicon.ico(veľkosť 16×16 pixelov).

Ak ste urobili všetko správne, vaša stránka má teraz svoju vlastnú favicon.

Zdravím vás, milí návštevníci môjho blogu. Dnes som si pre vás pripravil výber 10 služieb, ktoré vám pomôžu urobiť favicon online. A na konci článku som podľa môjho názoru zdôraznil 5 najpohodlnejších stránok.

Na začiatok stojí za to pochopiť, čo je favicon? Myslím, že mnohí z vás tento pojem poznajú, ale poviem vám to znova. Jedným slovom je to ikona vášho webu. Pri vyhľadávaní v Yandex ste vedľa stránky videli malú ikonu 16x16, takže toto je favicon. Vidno to aj v paneli s adresou a v záložkách niektorých prehliadačov.

Tento malý obrázok je v prvom rade vašou značkou. Ľudia podľa toho spoznajú vašu stránku. Preto musí byť originálny a nezabudnuteľný, aby bol okamžite viditeľný vo vyhľadávaní Yandex. Je ťažké nakresliť takú malú ikonu sami a na pomoc prichádzajú online služby, ktoré vám pomôžu vytvoriť favicon z obrázka. Poďme sa na niektoré z nich pozrieť v poradí a identifikovať ich silné a slabé stránky.

• Pohodlné použitie.
• Favicon je možné vyrobiť z obrázka alebo si ho nakresliť sami.
• Môžete si objednať od profesionálov.
• Náhľad na výsledok.
• Myslím, že tam nie sú, všetko potrebné je na stránke, môžem len vyzdvihnúť, že tu nie je galéria hotových ikon.

1. 
   

   • Je možné vytvoriť z obrázka alebo si ho sami nakresliť.
   • Po vygenerovaní sa zobrazí príklad odkazu na pridanie na stránku.
   • Všetko je v angličtine.
   • Škaredý dizajn.
   • Počas vytvárania nie je možné orezať obrázok.

2. 3 www.chami.com

3. 
   

   • Krásne užívateľsky prívetivé rozhranie.
   • Favicon je možné vyrobiť z obrázka alebo si ho nakresliť sami.
   • Veľká paleta farieb na kreslenie.
   • Neexistuje žiadny náhľad.
   • Všetko je v angličtine.
   • Nechýba galéria hotových ikon.

4. 
   

   • Pohodlné rozhranie.
   • Nič extra.
   • Nechýba galéria hotových ikon.
   • Nevieš kresliť sám seba.
   • Počas generovania nemôžete obrázok orezať.

5. 
   

   • Pohodlné krásne rozhranie.
   • Nič extra.
   • Je možné nakresliť seba alebo vygenerovať z obrázka.
   • K dispozícii je galéria hotových ikon.
   • Veľkosť ikony môžete pri vytváraní zachovať alebo ju skomprimovať.
   • Náhľad.
   • Môžete vytvoriť animovanú ikonu.
   • Obrovské množstvo farieb na kreslenie.
   • Všetko je v angličtine.

6. 
   

   • Na výber je veľkosť ikon 16x16 a 32x32.
   • Neexistujú žiadne ďalšie funkcie, iba vytvorenie favicon z obrázka.
   • Neexistuje žiadny náhľad.

7. 
   

   • Náhľad.
   • Veľká zbierka hotových ikon.
   • Existuje možnosť orezania obrázka.
   • Všetko je v angličtine.
   • Na stránke sú chyby.
   • Nepohodlné rozhranie.

8. 
   

   • Môžete si vybrať veľkosť ikony 16x16, 32x32, 48x48 a 64x64.
   • Všetko je v angličtine.

9. 
   

   • Nič extra.
   • Je možné zvoliť veľkosť ikony.
   • Môžete nakresliť seba alebo vytvoriť favicon online z obrázka.
   • Neexistuje žiadna možnosť orezania obrázka.
   • Neexistuje žiadny náhľad.

Predstavil som vám iba 10 online služieb, aj keď ich je oveľa viac. Podľa môjho názoru sú tieto najobľúbenejšie zo všetkých. Ak používate nejaké iné, napíšte ich do komentárov, bude to pre mňa a ostatných čitateľov zaujímavé dozvedieť sa o nich.

A teraz, ako som sľúbil, podľa môjho názoru TOP-5 pohodlných a kvalitných služieb.

Toto je moja päťka. Chcem vedieť, ktorú službu dáte na prvé miesto a ktorú na posledné? Odpovede si rád vypočujem v komentároch.

P.S. Ak ste ešte neprišli s favicon pre seba, potom sa určite pozrite na stránku faviconka.ru. Na ňom nájdete viac ako 2000 hotových ikon pre každý vkus. Dúfam, že článok bol pre vás užitočný a našli ste si službu vytvorenia favicon online.

Neoddeliteľnou súčasťou moderných webových stránok je ikona Favicon, ktorá vám umožňuje rýchlo identifikovať konkrétny zdroj v zozname kariet prehliadača. Je tiež ťažké predstaviť si počítačový program bez vlastného jedinečného označenia. Stránky a softvér zároveň v tomto prípade spája nie úplne zrejmý detail – obe využívajú ikony vo formáte ICO.

Tieto malé obrázky je možné vytvárať ako vďaka špeciálnym programom, tak aj pomocou online služieb. Mimochodom, práve tieto sú na tieto účely oveľa populárnejšie a v tomto článku s vami zvážime niekoľko takýchto zdrojov.

Grafické práce nie sú najobľúbenejšou kategóriou webových služieb, no čo sa týka generovania ikoniek, rozhodne je z čoho vyberať. Podľa princípu fungovania možno takéto zdroje rozdeliť na tie, v ktorých si nakreslíte obrázok sami, a stránky, ktoré vám umožňujú previesť už hotový obrázok na ICO. Ale v podstate všetky generátory ikon ponúkajú oboje.

Metóda 1: Editor ikon X

Táto služba je najfunkčnejším riešením na vytváranie obrázkov ICO. Webová aplikácia umožňuje detailne nakresliť ikonu ručne alebo použiť hotový obrázok. Hlavnou výhodou nástroja je možnosť exportu obrázkov s rozlíšením až 64×64.

Ak teda potrebujete vytvoriť celú sadu rovnakých typov ikon rôznych veľkostí, nenájdete na tieto účely nič lepšie ako X-Icon Editor.

Metóda 2: Favicon.ru

Ak potrebujete pre webovú stránku vygenerovať ikonu favicon s rozlíšením 16x16, ako vynikajúci nástroj môže slúžiť aj ruská online služba Favicon.ru. Rovnako ako v prípade predchádzajúceho riešenia, aj tu si môžete ikonu nakresliť sami, pričom vyfarbíte každý pixel samostatne, alebo vytvoríte favicon z hotového obrázka.

V dôsledku toho sa do vášho počítača uloží súbor ICO, ktorý predstavuje obrázok s rozmermi 16 x 16 pixelov. Služba je ideálna pre tých, ktorí potrebujú iba previesť obrázok na malú ikonu. Nie je však zakázané ukázať predstavivosť na Favicon.ru.

Metóda 3: Favicon.cc

Názov a princíp fungovania podobný predchádzajúcemu, ale ešte pokročilejší generátor ikon. Okrem vytvárania bežných obrázkov 16×16 služba uľahčuje kreslenie animovaného favicon.ico pre váš web. Okrem toho zdroj obsahuje tisíce vlastných ikon dostupných na bezplatné stiahnutie.

Ak vás rozhranie v anglickom jazyku neobťažuje, neexistujú absolútne žiadne argumenty v prospech práce s predchádzajúcou službou. Okrem toho, že Favicon.cc dokáže generovať animované ikony, zdroj správne rozpoznáva aj priehľadnosť importovaných obrázkov, o ktorú je, žiaľ, ruský náprotivok zbavený.

Metóda 4: Favicon.by

Ďalšia možnosť generátora ikon favicon pre webové stránky. Je možné vytvoriť ikonu od začiatku alebo na základe konkrétneho obrázka. Medzi rozdielmi je možné vyzdvihnúť funkciu importu obrázkov z webových zdrojov tretích strán a pomerne štýlové, stručné rozhranie.

Vo všeobecnosti neexistujú žiadne rozdiely v práci so službami, ktoré už boli diskutované v tomto článku, zdroj Favicon.by sa však oveľa lepšie vyrovná s prevodom obrázkov na ICO, čo je celkom ľahké si všimnúť.

Metóda 5: Online konverzia

Je pravdepodobné, že túto stránku už poznáte ako takmer všežravý online prevodník súborov. Nie každý však vie, že ide o jeden z najlepších nástrojov na konverziu akýchkoľvek obrázkov na ICO. Vďaka tomu môžete získať ikony s rozlíšením až 256 × 256 pixelov.

Ako vidíte, vytvorenie ikony ICO pomocou webovej stránky Online-Convert nie je vôbec ťažké a vykoná sa iba niekoľkými kliknutiami myšou.

Nová lekcia v štýle workshopu a tentokrát spoznávame tajomstvá favicon. favicon - malá ikona, ktorá sa zobrazuje v záložkách a na paneli prehliadača. Ak máte vlastnú webovú stránku a chcete sa porovnávať s ostatnými aj v maličkostiach - favicon nevyhnutné. Najprínosnejšie to, samozrejme, vyzerá medzi záložkami, na pozadí vyblednutého zoznamu adries bez akejkoľvek grafickej identifikácie. Naša lekcia však nie je ani tak o tom, ako pripojiť favicon k riadku prehliadača, ale o tom, ako nakresliť svoju vlastnú favicon vo Photoshope.

V akom formáte sa má favicon uložiť?

Všetko závisí od prehliadača. Pre Microsoft Explorer prispôsobiť formát ikony ICO. S týmto formátom sme sa už stretli pri vytváraní kurzora. Pre iné prehliadače od Google Chrome predtým Apple Safari normálne prispôsobenie gif alebo PNG. favicon môže byť priesvitný. Aby to bolo možné, musí byť uložený v priesvitnom PNG a potom skonvertujte do formátu ICO. Môžete to urobiť v dobrom programe IcoFX. Existuje však veľa stránok tretích strán na generovanie favicon a najzreteľnejšia z nich je www.favicon.ru

Ako umiestniť favicon na webovú stránku?

Ako si tým byť istý favicon bude to fungovať? Musia byť splnené 4 podmienky.

• Súbor by sa mal volať - favicon.
• Veľkosť favicon 16 na 16 pixelov
• Najlepším miestom pre favicon je koreňový priečinok lokality.
• Napíšte adresu ikony do meta tagov hlavička v indexe lokality.

V HTML to vyzerá takto:

Môžete vytvoriť niekoľko ikon pre rôzne prehliadače, napríklad jednu vo formáte ICO, a druhý v PNG a to všetko je uvedené prostredníctvom značky odkaz . Moderné prehliadače najčastejšie samy hľadajú súbor v koreňovom adresári lokality tzv favicon, pre istotu však nezaškodí uviesť presné odkazy.

Vytvorte favicon vo Photoshope

Vytvorte favicon veľmi jednoduché. Chcete urobiť to isté? favicon ako Vkontakte alebo Odnoklassniki? Dobre favicon Nemôžete to urobiť zmenšením veľkých obrázkov vo všetkých druhoch „generátorov“ favicon, ktorých je na internete veľa. Favicon je veľmi malý. V skutočnosti sme druh pixel art, ktorý má svoje vlastné charakteristiky. Nemôžete napísať list a len ho zredukovať na 16 pixelov .

Páči sa mi to favicon bude rozmazané a neostré, pretože okraje písmena sa pri zmene veľkosti predĺžia o niekoľko pixelov. Získajte trochu anti-alias, čo je zvyčajne dobrá vec, ale v prípade pixel artu takéto prechody jednoducho nie sú potrebné. Na druhej strane stojí za to vyhnúť sa nadmernej „roztrhanosti“ na zaoblení, inak z toho budú ahoj gify 1999.

Vytvorte súbor veľkosti 16 X 16 pixelov . Vytvoríme veľmi jednoduchý priesvit favicon s vo forme listu, s trochou hĺbky. Hĺbku vytvorí tieň a gradient.

Nakreslite pozadie

Prečo v úvode tejto lekcie vidíte obrovské hladké a ligotavé favicon? Pretože som to zvýšil na úvod hodiny. Ako sa mi podarilo zväčšiť obrázok 16 pixelov? Veľmi jednoduché, vždy pracujem vo vektore, ak sa to dá použiť a ak to má zmysel. A vektor ľahko prenáša akúkoľvek transformáciu a nestráca na kvalite.

Vyberte si nástroj Nástroj Zaoblený obdĺžnik. Na paneli nastavení vyberte režim, ktorý vám umožní kresliť vektorovo. V rozbaľovacej ponuke panela začiarknite políčko - Prichytiť na pixely. Je to potrebné, aby sa dráhy vektorov prichytávali k pixelom a nevkresľovali sa medzi ne.

Máme povrch favicon a priesvitné okraje vytvoria hladké zaoblenie. Teraz je čas zbaviť sa bieleho pozadia, nepotrebujeme to. Vypnite jeho viditeľnosť. Alebo dvakrát kliknite na vrstvu, premeňte ju na bežnú vrstvu a potom ju odstráňte.