WIKI

Vytváření favicon.ico z obrázku ve formátu PNG je nezbytným krokem pro každého webdesignéra nebo vlastníka webu, který chce zlepšit rozpoznatelnost svého webu v záložkách prohlížeče a výsledcích vyhledávání. Adobe Photoshop je silný nástroj pro úpravu obrázků a i přesto, že primárně není určen pro tvorbu ikon, lze ho s pomocí pluginů efektivně využít i pro tento účel. Tento článek vám krok za krokem ukáže, jak převést PNG obrázek na favicon.ico s použitím Adobe Photoshopu.

Předpoklady

Než začneme, ujistěte se, že máte:

• Nainstalovaný Adobe Photoshop. Pokud ho ještě nemáte, můžete si stáhnout trial verzi z oficiálních stránek Adobe.
• Obrázek ve formátu PNG, který chcete převést na favicon.ico. Ideální velikost pro tento obrázek je 512x512 pixelů, což umožňuje dobré zmenšení bez ztráty kvality.

Krok 1: Příprava obrázku

1. Otevřete Adobe Photoshop a importujte svůj PNG obrázek pomocí volby Soubor > Otevřít.
2. Před samotnou konverzí je doporučené obrázek upravit tak, aby dobře vypadal i v malém rozlišení. To může zahrnovat úpravu kontrastu, jasnosti nebo oříznutí obrázku. Pro oříznutí obrázku použijte nástroj Oříznout a nastavte proporcie na čtverec.
3. Po úpravách obrázku přejděte na Obraz > Velikost obrazu a nastavte šířku a výšku na 512 pixelů. Toto rozlišení je ideální pro vytvoření favicon, jelikož některé prohlížeče podporují ikony v této velikosti.

Krok 2: Instalace pluginu pro export do .ico formátu

Photoshop standardně neumožňuje export do .ico formátu, proto je nutné nainstalovat externí plugin. Existuje několik pluginů, ale pro tento příklad použijeme Telegraphics' free ICO plugin.

1. Stáhněte ICO plugin z oficiální stránky Telegraphics.
2. Rozbalte stažený soubor a soubor s příponou .8bi umístěte do složky s pluginy Photoshopu, obvykle C:/Program Files/Adobe/Adobe Photoshop/Plug-Ins.
3. Restartujte Photoshop, aby se změny projevily.

Krok 3: Export obrázku jako favicon.ico

1. Po restartování Photoshopu otevřete svůj upravený PNG obrázek.
2. Přejděte na Soubor > Uložit jako a ve formátu souboru vyberte ICO (Windows Icon) (*.ICO).
3. Pojmenujte soubor favicon.ico a uložte ho do požadované složky.
4. Výsledný .ico soubor nyní můžete nahrát na server do kořenového adresáře vašeho webu.

Dodatek: Použití favicon na webu

Aby byla ikona správně zobrazena ve většině prohlížečů, doporučuje se přidat následující kód do hlavičky HTML vašich webových stránek:

Vytvořením a správným použitím favicon.ico zvyšujete profesionální vzhled a rozpoznatelnost vašeho webu. I když Photoshop není primárně určen pro tvorbu webových ikon, s pomocí správného pluginu se může stát užitečným nástrojem i pro tento účel.