Převeďte PNG na ICO a získejte ostrou favikonu
Favikona je drobný obrázek, který webu dává jeho vizuální podpis. Vidíte ho na kartě prohlížeče vedle názvu stránky, v seznamu záložek, v rozbalovací historii adresního řádku a někdy i vedle výsledků vyhledávání. Je malá, ale odvádí spoustu práce: rozpoznatelná favikona pomáhá uživatelům najít vaši kartu mezi tuctem dalších a signalizuje, že web je dokončený a pečlivě udržovaný. Klasickým formátem pro tuto malou ikonu je ICO a nejjednodušší způsob, jak ji vytvořit, je začít od čistého čtvercového PNG a převést ho.
Tento nástroj vezme obrázek PNG a promění ho ve favikonu ICO přímo ve vašem prohlížeči. Konverze probíhá lokálně na vašem vlastním zařízení, takže obrázek, který vyberete, se nikdy nenahrává na server. To má význam, pokud je vaše ikona logo nebo firemní materiál, který byste raději nesvěřili třetí straně. Jakmile je soubor hotový, jednoduše si ho stáhnete.
Co je formát ICO a proč obsahuje více velikostí
ICO je kontejnerový formát pro ikony, který vznikl v Microsoft Windows, kde ukládá ikony pro programy, zástupce a složky. Jeho charakteristickým znakem, a důvodem, proč se stal standardem pro webové favikony, je to, že jeden soubor ICO může obsahovat stejný obrázek hned v několika rozlišeních najednou. Místo jedné pevné bitmapy soubor balí malou sadu čtvercových obrázků a nechává prohlížeč nebo operační systém vybrat tu velikost, která se hodí do místa, kam potřebuje ikonu vykreslit.
To je skutečně užitečné. Karta prohlížeče potřebuje drobnou ikonu, panel záložek může použít o něco větší a připnutá zástupka na ploše může vyžadovat ještě větší. S vícevelikostním ICO si každý kontext vezme verzi, která mu sedí, takže vaše ikona zůstává ostrá místo toho, aby se zvětšovala z jediné malé bitmapy a rozmazávala se. ICO navíc zachovává průhlednost, což udrží rohy kulatého nebo nepravidelného loga čisté na jakékoli barvě karty.
Doporučené velikosti favikony
Pro webovou favikonu stojí za to zahrnout tři velikosti: 16x16, 32x32 a 48x48 pixelů. Verze o 16 pixelech je ta, kterou většina prohlížečů zobrazuje na kartě a v adresním řádku. Verze o 32 pixelech se používá na displejích s vyšším rozlišením a v některých zobrazeních záložek a historie, takže udrží věci ostré na moderních obrazovkách. Verze o 48 pixelech pokrývá větší kontexty, jako jsou zástupci webů ve Windows. Protože všechny žijí v jednom souboru ICO, dodáváte jediný soubor a necháváte každý povrch vybrat si, co potřebuje.
Začněte od čtvercového PNG, aby se nic nenatahovalo. Pokud je váš zdrojový obrázek obdélníkový nebo předimenzovaný, nejdřív ho ořízněte nebo zmenšete na čistý čtverec naším nástrojem pro změnu velikosti obrázku a pak spusťte konverzi. Jednoduchý, kontrastní design čte při 16 pixelech mnohem lépe než detailní ilustrace, takže upřednostněte výrazné tvary před jemným textem.
Jak přidat favikonu na váš web
Jakmile máte svůj soubor ICO, nahrajte ho na svůj web, tradičně do kořene webu jako favicon.ico. Mnoho prohlížečů ho tam najde automaticky, ale osvědčenou praxí je deklarovat ho výslovně v hlavičce vašeho HTML, aby nedocházelo k hádání. Přidejte tag link takto:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Tento řádek umístěte do sekce <head> vašich stránek. Atribut rel="icon" říká prohlížeči, že tento zdroj je ikonou stránky, a href ukazuje na místo, kam jste soubor uložili. Pokud použijete cestu relativní ke kořeni jako výše, stejná deklarace funguje na všech stránkách vašeho webu. Po nasazení možná budete muset provést tvrdé obnovení nebo vymazat mezipaměť, než se nová ikona zobrazí, protože prohlížeče se favikon drží velmi houževnatě.
Soukromá konverze ve vašem prohlížeči
Vše se odehrává na vašem zařízení. Vámi vybrané PNG se čte, dekóduje a znovu kóduje jako ICO lokálně a během procesu nic neopustí váš počítač. Neexistuje žádný účet, žádná fronta ani ukládání na serveru, což z toho dělá pohodlnou volbu i pro nezveřejněná loga nebo klientskou práci pod dohodou o mlčenlivosti. Pro další způsoby přípravy a úpravy grafiky si prohlédněte naši úplnou nabídku nástrojů pro obrázky.
Často kladené otázky
Nahrává se můj obrázek někam?
Ne. PNG se převádí na ICO zcela ve vašem prohlížeči na vašem vlastním zařízení. Nic se neposílá na server a nic se neukládá, takže váš obrázek zůstává soukromý.
Jaké velikosti by měla moje favikona obsahovat?
Nejužitečnější velikosti jsou 16x16, 32x32 a 48x48 pixelů. Obrázek o 16 pixelech se zobrazuje na kartách prohlížeče, zatímco větší verze udržují ikonu ostrou na displejích s vysokým rozlišením a u zástupců na ploše.
Proč použít ICO místo obyčejného PNG?
ICO je dlouhodobě zavedený formát favikony a dokáže uchovat několik velikostí v jednom souboru. Prohlížeče a operační systém si vyberou rozlišení, které se hodí do daného kontextu, takže ikona zůstává ostrá místo toho, aby se zvětšovala z jediné bitmapy.
Zachová ICO průhlednost z mého PNG?
Ano. Formát ICO podporuje průhlednost, takže se průhledné plochy vašeho PNG zachovají a ikona se čistě prolne s jakoukoli barvou karty nebo pozadí.
Jak přidám favikonu na svůj web?
Nahrajte soubor ICO na svůj web, obvykle jako favicon.ico do kořenového adresáře, a přidejte tag link do hlavičky svého HTML, jako je link rel icon type image x-icon href lomeno favicon.ico. Poté vymažte mezipaměť prohlížeče, abyste ji viděli.
Můj zdrojový obrázek není čtvercový. Co mám dělat?
Nejdřív ho ořízněte nebo zmenšete na čtverec, aby se nenatahoval. Můžete použít náš nástroj pro změnu velikosti obrázku k vytvoření čistého čtverce a pak ho převést na ICO pro nejlépe vypadající favikonu.