Jak vytvořit favicon.

Otevřete Favicon / ICO Generator a zvolte Obrázek. Nahrajte PNG, JPG, JPEG, WebP nebo GIF, nebo vyberte Vyzkoušet ukázku. Pracovní příklad používá favicon-orbit.png, značku fialové oběžné dráhy o velikosti 512 × 512 pixelů s průhlednými rohy. Vstup je 202,491 bajtů.

Pro značku bez hotového loga vyberte na stránce nástroje Text. Zadejte jedno nebo dvě písmena a zvolte Pokračovat. Editor nabízí písma Modern sans, Classic serif a Monospace, plus samostatné barvy textu a pozadí. Přijímány jsou až tři znaky, ale další znaky mohou být při malých velikostech obtížně rozpoznatelné.

Ponechte si původní grafiku. Generátor vytvoří nové soubory ikon a nepřepisuje zdroj. Vstup GIF se stane statickou ikonou namísto animovaného faviconu.

U monogramu začíná nabídka Písmo třemi zahrnutými styly. Vyberte Použít systémová písma na podporovaném desktopovém prohlížeči a povolte přístup k přidání písem nainstalovaných ve vašem zařízení. Použijte předchozí a následující šipky pro porovnání sousedních písem, nebo vyberte rodinu a zkontrolujte živý náhled, zejména při 16 pixelech. Písma zůstávají ve vašem zařízení; zahrnuté styly fungují bez povolení.

Editor zobrazuje světlé a tmavé karty prohlížeče a náhledy v běžných velikostech ikon. Nejprve zkontrolujte příklad o 16 pixelech; je to nejpřísnější test toho, zda značka zůstává rozpoznatelná. Náhled Apple Touch představuje export o 180 pixelech a v pracovním prostoru se zobrazuje menší.

V telefonu otevřete Nastavení. Ponechte Vytvořit z nastaveno na Nahraný obrázek a Přizpůsobení obrázku nastaveno na Zobrazit celý obrázek. Pro tuto ukázku nastavte Prostor kolem obsahu na 0 a povolte Průhledné pozadí. Zdroj již obsahuje svůj vlastní zaoblený fialový tvar a čisté okraje, takže nepotřebuje další barevné pozadí.

S jiným zdrojem Zobrazit celý obrázek zachovává své okraje, zatímco Vyplnit ikonu je může oříznout. Zaoblený čtverec, Čtverec a Kruh definují vnější tvar. Průhledné pozadí zachovává čisté oblasti, ale nemůže odstranit neprůhledné pozadí již vykreslené do fotografie. Po každé změně rámování zkontrolujte nejmenší náhled.

V sekci Download vyberte pro tento příklad balíček ikon webu (ZIP). Název webu (Website name) ponechte jako My website pro ukázku, nebo jej nahraďte skutečným názvem značky pro svůj vlastní projekt. Tento název se používá v souboru site.webmanifest; nepřidává se jako text přes obrázek.

Vyberte Start. Prohlížeč vygeneruje sedmirámcový favicon.ico se čtvercovými obrázky o velikosti 16, 24, 32, 48, 64, 128 a 256 pixelů. Dále vytvoří PNG ikony o velikosti 16, 32, 48, 180, 192 a 512 pixelů, manifest a pokyny k instalaci. Výsledkem je jeden soubor ZIP namísto samostatného tlačítka pro stažení každé ikony.

Pokud potřebujete pouze klasický favicon.ico, zvolte místo toho Multi-size ICO. To je užitečné, když platforma webu přijímá nahrání ICO a nevyžaduje samostatný balíček.

Stažení uloží soubor website-icons.zip. Skutečný funkční příklad obsahuje devět souborů a má 304,351 bajtů. Srovnání výše ukazuje zdroj o velikosti 512 pixelů vedle skutečného rámečku o velikosti 256 pixelů extrahovaného z exportovaného ICO, nikoliv simulovaný snímek obrazovky prohlížeče.

Rozbalte ZIP, nahrajte soubory ikon do kořenového adresáře svého webu a přečtěte si INSTALL.txt. Obsahuje HTML značky link pro ICO, PNG ikonu, Apple Touch ikonu a webový manifest. Pokud soubory umístíte do podsložky, aktualizujte cesty HTML i cesty k ikonám uvnitř souboru site.webmanifest.

Zkontrolujte svůj web na nové kartě prohlížeče a na zařízeních, na kterých vám záleží. Prohlížeče mohou favicony ukládat do mezipaměti, takže stará ikona okamžitě nedokazuje, že instalace selhala. Ponechte si zdrojový obrázek a stažený balíček před obnovením editoru, protože obnovení stránky vás vrátí na hlavní nástroj.