Postupujte podľa tohto funkčného príkladu a potom prispôsobte rovnaké ovládacie prvky svojmu vlastnému obrázku. Otvoriť Generátor favicon / ICO.
Vyberte jasné logo alebo začnite iniciálami
Otvorte Generátor Favicon / ICO a vyberte Obrázok. Nahrajte PNG, JPG, JPEG, WebP alebo GIF, alebo vyberte Vyskúšať vzorku. Pracovný príklad používa favicon-orbit.png, fialovú obežnú značku 512 × 512 pixelov s priehľadnými rohmi. Vstup má 202,491 bajtov.
Pre značku bez hotového loga vyberte na stránke nástroja Text. Zadajte jedno alebo dve písmená a vyberte Pokračovať. Editor ponúka písma Modern sans, Classic serif a Monospace, plus samostatné farby textu a pozadia. Akceptované sú až tri znaky, ale extra znaky môžu byť pri malých veľkostiach ťažko rozpoznateľné.
Ponechajte si pôvodnú grafiku. Generátor vytvorí nové súbory ikon a neprepíše zdroj. Vstup GIF sa stane statickou ikonou namiesto animovaného faviconu.
Pre monogram začína ponuka Písmo tromi zahrnutými štýlmi. Vyberte Použiť systémové písma na podporovanom desktopovom prehliadači a povoľte prístup na pridanie písiem nainštalovaných vo vašom zariadení. Použite predchádzajúce a nasledujúce šípky na porovnanie susedných písiem, alebo vyberte rodinu a skontrolujte živý náhľad, najmä pri 16 pixeloch. Písma zostávajú vo vašom zariadení; zahrnuté štýly fungujú bez povolenia.
Použite jednoduchú siluetu. Detailná fotografia môže vyzerať atraktívne pri 512 pixeloch, ale pri 16 pixeloch sa stane nerozoznateľným bodom.
Upravte rámovanie a skontrolujte malé náhľady
Editor zobrazuje svetlé a tmavé karty prehliadača plus náhľady pri bežných veľkostiach ikon. Najprv skontrolujte príklad 16 pixelov; je to najprísnejší test toho, či značka zostáva rozpoznateľná. Náhľad Apple Touch predstavuje export 180 pixelov a v pracovnom priestore sa zobrazuje menší.
V telefóne otvorte Nastavenia. Ponechajte Vytvoriť z nastavené na Nahraný obrázok a Prispôsobenie obrázka nastavené na Zobraziť celý obrázok. Pre túto vzorku nastavte Priestor okolo obsahu na 0 a povoľte Priehľadné pozadie. Zdroj už obsahuje svoj vlastný zaoblený fialový tvar a čisté okraje, takže nepotrebuje ďalšie farebné pozadie.
S iným zdrojom Zobraziť celý obrázok zachováva svoje okraje, zatiaľ čo Vyplniť ikonu ich môže orezať. Zaoblený štvorec, Štvorec a Kruh definujú vonkajší tvar. Priehľadné pozadie zachováva čisté oblasti, ale nedokáže odstrániť nepriehľadné pozadie už nakreslené do fotografie. Po každej zmene rámovania skontrolujte najmenší náhľad.
Logo s priehľadnými rohmi môže získať nežiaduci druhý rám, ak pridáte samostatné nepriehľadné pozadie. Skontrolujte obe možnosti pozadia.
Príklad v tejto príručke
Vyskúšajte ukážku: favicon-orbit.png, 512 × 512 px. Nahraný obrázok; Zobraziť celý obrázok; Zaoblený štvorec; Priestor okolo obsahu 0%; Priehľadné pozadie povolené; Balík ikon webovej stránky (ZIP); Názov webovej stránky My website.
- Zdrojový obrázok
- 512 × 512 PNG · 202,491 bajtov
- ICO rámcov
- 16, 24, 32, 48, 64, 128 a 256 px
- Balík
- 9 súborov · 304,351 bajtov
- Zobrazený výsledok
- Skutočný 256 × 256 ICO rámec
Vyberte viacveľkostný ICO alebo balík webových stránok
V časti Stiahnuť vyberte pre tento príklad balík ikon webovej stránky (ZIP). Názov webovej stránky ponechajte ako My website pre ukážku, alebo ho nahraďte skutočným názvom značky pre svoj vlastný projekt. Tento názov sa používa v súbore site.webmanifest; nepridáva sa ako text cez obrázok.
Vyberte Spustiť. Prehliadač vygeneruje sedemrámcový favicon.ico so štvorcovými obrázkami s rozmermi 16, 24, 32, 48, 64, 128 a 256 pixelov. Vytvorí tiež PNG ikon s rozmermi 16, 32, 48, 180, 192 a 512 pixelov, manifest a pokyny na inštaláciu. Výsledkom je jeden súbor ZIP namiesto samostatného tlačidla na stiahnutie pre každú ikonu.
Ak potrebujete iba klasický favicon.ico, vyberte namiesto toho Multi-size ICO. Je to užitočné, keď platforma webovej stránky akceptuje nahranie ICO a nevyžaduje samostatný balík.
Balík je súborom aktív ikon webovej stránky. Automaticky nepremení stránku na progresívnu webovú aplikáciu.
Stiahnite, nainštalujte a overte súbory ikon
Stiahnutie uloží website-icons.zip. Skutočný funkčný príklad obsahuje deväť súborov a má 304,351 bajtov. Porovnanie vyššie zobrazuje zdroj s veľkosťou 512 pixelov vedľa skutočného rámca s veľkosťou 256 pixelov extrahovaného z exportovaného ICO, namiesto simulovanej snímky obrazovky prehliadača.
Rozbaľte ZIP, nahrajte súbory ikon do koreňového adresára vašej webovej stránky a prečítajte si INSTALL.txt. Obsahuje HTML značky odkazu pre ICO, PNG ikonu, ikonu Apple Touch a webový manifest. Ak umiestnite súbory do podpriečinka, aktualizujte cesty HTML aj cesty k ikonám vnútri site.webmanifest.
Skontrolujte svoju stránku na novej karte prehliadača a na zariadeniach, na ktorých vám záleží. Prehliadače môžu ukladať favicony do vyrovnávacej pamäte, takže stará ikona okamžite nedokazuje, že inštalácia zlyhala. Ponechajte si zdrojový obrázok a stiahnutý balík pred obnovením editora, pretože obnovenie vás vráti na hlavnú stránku nástroja.
Vyberte jedno kanonické umiestnenie ikony a udržiavajte cesty HTML konzistentné. Generátor vytvára aktíva; ich publikovanie zostáva súčasťou vášho pracovného postupu na webovej stránke.
Časté otázky
Môžem vytvoriť favicon bez nahrania loga?
Áno. Vyberte Text, zadajte svoje iniciály, potom v editore zvoľte písmo, farby, tvar a rozostupy.
Aké veľkosti sú vnútri ICO súboru?
ICO obsahuje sedem rámcov založených na PNG: 16, 24, 32, 48, 64, 128 a 256 pixelov štvorcových. Prehliadač vyberie vhodný rámec.
Čo je súčasťou ZIP súboru pre webovú stránku?
Obsahuje favicon.ico, šesť PNG ikon pre prehliadač, Apple a Android, site.webmanifest a INSTALL.txt so značkami odkazov HTML.
Môže mať môj favicon priehľadné pozadie?
Áno. Povoľte Priehľadné pozadie. Toto zachová priehľadné oblasti okolo zdroja; neodstraňuje nepriehľadné pozadie z fotografie.
Nahráva sa obrázok na konverziu?
Nie. Tento nástroj generuje a balí súbory ikon vo vašom prehliadači. Stiahnuté súbory si ponechajte, pretože editor neslúži ako trvalé úložisko projektov.
Môžem použiť písma nainštalované v mojom počítači?
Áno, ak váš prehliadač podporuje prístup k lokálnym písmam. Vyberte Text / monogram, zvoľte Použiť systémové písma a povoľte prehliadaču prístup. Vaše dostupné rodiny písiem sa zobrazia v zozname Písmo. Zahrnuté štýly zostávajú použiteľné, ak je povolenie odmietnuté alebo prístup k lokálnym písmam nie je k dispozícii.
Dajte svojej ďalšej webovej stránke jasný malý podpis.
Vyskúšajte ukážku alebo použite vlastný súbor a pred zdieľaním skontrolujte výsledok.
