Generátor faviconov
Vložte svoje logo a získajte kompletnú sadu súborov favicon, od 16-pixelovej ikony karty prehliadača po 512-pixelovú ikonu aplikácie, plus kód HTML na prilepenie. Všetko sa to deje vo vašom prehliadači, takže váš obrázok sa nikdy neodovzdá.
Qwyzzle
Summit Roasters
Fox EsportsSem vložte svoje logo
PNG, JPG, WebP alebo SVG. Najlepšie funguje štvorec, 512 pixelov alebo väčší.
Vytvorené vo vašom prehliadači. Váš obrázok sa nikdy neodovzdá.
Čo je favicon a kde sa zobrazuje
Favicon je malá štvorcová ikona, ktorá predstavuje váš web. Názov je skratkou pre „obľúbenú ikonu“: prvý prehliadač, ktorý ju zobrazuje, ju umiestnil vedľa vašich záložiek, ktoré nazval Obľúbené.
Vidíte to na kartách prehliadača, vedľa názvu stránky, 16 pixelov na šírku alebo 32 na ostrejšej obrazovke. Označí vašu stránku v záložkách a tiež v histórii prehliadania. Keď niekto uloží vašu stránku na domovskú obrazovku telefónu, stane sa z nej ikona aplikácie. A Google ho zobrazuje vedľa názvu vašej stránky vo výsledkoch vyhľadávania.
Jeho úloha je všade rovnaká: byť rozpoznaný na prvý pohľad medzi ostatnými ikonami.
Prečo sa jedna favicon stane súborom súborov
Každé z týchto miest prišlo v inom čase a pýta si vlastný súbor. Generátor favicon vyššie ich všetky vytvorí z jedného obrázka.
Karty prehliadača, záložky a história používajú favicon.ico, jeden súbor so 16, 32 a 48 pixelmi vo vnútri. Je to najstarší formát: keď stránka nemá žiadnu ikonu, prehliadače stále hľadajú favicon.ico v koreňovom priečinku stránky.
Ak začnete so SVG, získate aj favicon.svg pre prehliadače, ktoré podporujú ikony SVG. Tvoria ho tvary namiesto pixelov, preto zostane ostrý na každej obrazovke.
iPhone a iPad používajú apple-touch-icon.png, 180 pixelov štvorcových, keď niekto pridá vašu stránku na domovskú obrazovku. IPhone vypĺňa priehľadné oblasti čiernou farbou, takže táto ikona má vždy plné pozadie: vašu farbu alebo bielu, ak ste zvolili priehľadné.
Telefóny so systémom Android a stránky nainštalované ako aplikácie z prehliadača používajú ikonu-192.png a ikonu-512.png. Nájde ich prostredníctvom site.webmanifest, malého textového súboru, ktorý prehliadačom oznámi názov vašej stránky, ak ste ho zadali do nástroja, a kde sa nachádzajú jej väčšie ikony.
Voľné PNG od 16 do 48 pixelov sú náhradné diely pre služby, ktoré chcú PNG. Pri výsledkoch vyhľadávania Google číta odkazy na ikony v kóde HTML vašej domovskej stránky.
Ako pridať súbory favicon na vašu stránku
Ak vy alebo váš vývojár upravujete súbory lokality, trvá to dva kroky.
Najprv rozbaľte stiahnutý súbor a vložte súbory do koreňového priečinka vašej lokality, teda do horného priečinka, kde sa nachádza domovská stránka. Ak chcete skontrolovať, pridajte /favicon.ico na adresu svojej stránky: ikona by sa mala otvoriť.
Po druhé, vložte riadky HTML zo súboru README (nástroj ich zobrazuje tiež) do hlavičky svojich stránok: do sekcie v hornej časti kódu HTML, ktorá obsahuje názov stránky. Je tam riadok pre súbor ICO, dotykovú ikonu Apple a manifest plus SVG, ak ho máte.
Každá stránka zvyčajne zdieľa jednu šablónu, takže ich prilepíte iba raz. Najprv odstráňte všetky staršie riadky ikon, inak môžu prehliadače naďalej vyberať starú ikonu.
V nástroji na tvorbu stránok môžete preskočiť oba kroky: odovzdať ikonu-512.png v nastavení ikony lokality a tvorca pridá kód HTML za vás.
Ako dosiahnuť, aby logo fungovalo pri 16 pixeloch
Pri veľkosti 16 x 16 má celá ikona 256 malých farebných štvorčekov. Väčšina log na to nebola nakreslená.
Začnite symbolom, nie názvom. Ak osem písmen vtesnáte do 16 pixelov, na každé zostanú len dva pixely. Ak nemáte symbol, použite veľké a výrazné prvé písmeno. Hrubé ťahy zostanú čitateľné pri menších rozmeroch dlhšie než tenké.
Potom vytiahnite detaily. Veľmi tenké čiary a malé medzery sa rozmazávajú do okolia a slogan sa mení na šmuhu.
Dôležité je svetlo proti tme, nie samotné farby. Karty sú svetlé alebo tmavé v závislosti od témy a na tmavom paneli kariet zmizne námornícka ikona. Ak je vaša značka tmavá, dajte jej svetlé pozadie v nástroji alebo naopak.
Výplň, priestor medzi vaším logom a okrajom štvorca, je kompromisom. Príliš veľa a logo sa v záložke zmenšuje. Príliš málo a iPhone, ktorý zaokrúhľuje ikony na domovskej obrazovke, orezáva rohy loga.
Nakoniec si pozrite náhľady na svetlej a tmavej karte v skutočnej veľkosti, bez priblíženia. Bezplatná kontrola loga ho zmenší na 32 pixelov a zmeria, koľko detailov zostane viditeľných.
Kedy značku prekresliť namiesto zmenšovania
Niekedy to nič nezachráni. V detailnej ilustrácii alebo 3D vzhľade postavenom na tieňovaní je detailom dizajn a pri 16 pixeloch je to preč. Tento nástroj dokáže zmeniť veľkosť vášho loga, ale nedokáže ho prekresliť.
To neznamená, že je to zlé logo, iba jedno vytvorené pre väčšie miesta. Zámerne nakreslite malú verziu: zjednodušený symbol alebo iniciály v písme vašej značky. Zachovajte si farby a niečo z tvaru a ľudia to spoja. Zakaždým by sme použili jasnú iniciálu na rozmazanú miniatúru.
Potrebujete novú známku? Náš generátor loga AI navrhne jedno z názvu vašej značky plus krátky popis, ak chcete. Logá z našich šablóny loga sa dodávajú so symbolom ako samostatný súbor, ak ho majú, a každé logo, ktoré si od nás kúpite, obsahuje súbory favicon.
Favicon otázky
Je to zadarmo, bez registrácie a bez vodoznaku. Aj váš imidž vám zostane. Tento nástroj funguje úplne vo vašom prehliadači: robí každú veľkosť a zips priamo na vašom zariadení a obrázok sa nikdy neodošle na naše servery. Vďaka tomu je vhodné použiť na logo, ktoré ste ešte nikomu neukázali.
Štvorec a aspoň 512 pixelov na každej strane. Najväčšia ikona v súprave má 512 pixelov, takže menší PNG, JPG alebo WebP sa musí natiahnuť, aby ju vyplnil, a veľké ikony vyjdú jemne. Nástroj vám povie, kedy sa to stane. SVG nemá žiadny takýto limit: je vyrobený z tvarov, nie z pixelov, takže zostáva ostrý pri každej veľkosti. Široké logo vypĺňa iba tenký pásik štvorca, takže začnite od svojho symbolu alebo iniciály.
Potrebujete všetky súbory, pretože prehliadače a telefóny používajú rôzne formáty. Kód HTML z nástroja im určí správny súbor. ICO podporuje každý prehliadač. PNG sú pre telefóny a nainštalované aplikácie, k dispozícii sú aj malé veľkosti. Ak začnete so SVG, získate aj SVG, ktoré zostane ostré na každej obrazovke v podporovanom prehliadači.
Váš prehliadač s najväčšou pravdepodobnosťou zobrazuje uloženú kópiu. Prehliadače držia ikony favicon oveľa dlhšie ako zvyšok stránky, takže stará ikona môže zostať aj po zverejnení nových súborov. Vyskúšajte tvrdé obnovenie, ktoré znova načíta stránku bez uložených súborov: Ctrl+Shift+R v systéme Windows, Cmd+Shift+R v systéme Mac (Option+Cmd+R v Safari). Ak to nepomôže, otvorte adresu svojej stránky s /favicon.ico na konci a obnovte ju, alebo sa pozrite do súkromného okna. Prehliadače iných ľudí dobiehajú časom.
Do nastavení staviteľa, nie do priečinka. Väčšina tvorcov webových stránok a platforiem online obchodov má ikonu lokality alebo nastavenie ikony favicon, kde nahráte jeden štvorcový súbor PNG. Vyberte si icon-512.png, najväčší súbor v zip, takže tvorca má veľa práce, keď robí menšie veľkosti. Ak nastavenie vyžaduje konkrétnu veľkosť, použite súbor, ktorý sa zhoduje. Tvorcovia pridajú kód HTML za vás, takže súbor README môžete preskočiť.
Google zachytí novú favicon, keď jeho prehľadávač, program, ktorý číta webové stránky pre Google, najbližšie navštívi vašu domovskú stránku. Neexistuje na to žiadny pevný harmonogram. Google chce v kóde HTML vašej domovskej stránky štvorcový obrázok a odkaz na ikonu, takže skontrolujte, či sú obe na svojom mieste. Potom, čo to ukáže a kedy, záleží na Google, tak tomu dajte čas.
Nemáte ešte logo? Vytvorte si ho
Navrhnite si ho pomocou nášho generátora loga AI alebo šablóny v tvorcovi loga. Každé logo, ktoré si stiahnete z DepthLogo, už obsahuje svoje favicony.