JustPaste.it

Jak stworzyć favicon w Photoshopie

Niemal wszystkie strony internetowe są “wyposażone” we własny plik favicon, który widoczny jest w przeglądarkach przed adresem strony internetowej, na kartach oraz wśród zakładek. Jest to ciekawy gadżet, dzięki któremu uzyskujemy dodatkowy element identyfikacyjny dla własnej s...

Niemal wszystkie strony internetowe są “wyposażone” we własny plik favicon, który widoczny jest w przeglądarkach przed adresem strony internetowej, na kartach oraz wśród zakładek. Jest to ciekawy gadżet, dzięki któremu uzyskujemy dodatkowy element identyfikacyjny dla własnej strony internetowej.

 

03e9ec06b0e3b654d70b533828c061d5.jpg

Pliki favicon są obrazkami o wielkości 16×16 lub 32×32 piksele i powinny być zapisane w pliku pod nazwą favicon.ico, który najczęściej umieszczany jest w głównym katalogu na serwerze. Jeśli siądziemy do Photoshopa, stworzymy ciekawą ikonę i będziemy chcieli ją zapisać, okaże się, że zapisanie pliku w formacie .ico jest w Photoshopie niemożliwe… Swoją drogą jest to trochę dziwne, że program kosztujący niemałe przecież pieniądze, nie daje nam takiej możliwości.

Rozwiązaniem jest “tuning” Photoshopa - czyli zainstalowanie odpowiedniej wtyczki, która wyposaży Photoshopa w możliwość otwierania i zapisywania plików .ico. Tak więc przechodzimy na stronę firmy Telegraphic i pobieramy dostępną za darmo wtyczkę dla Photoshopa (ja wybrałem wersję dla Windows). Co ciekawe, wg twórców wtyczka ta będzie działała również w innych programach, m.in. w Photoshop Elements (sprawdziliśmy - działa), AfterEffects, Premiere, a także w Corel PhotoPaint czy Paint Shop Pro (wersja 9).

Pobrane archiwum należy rozpakować i plik ICOFormat.8bi skopiować do folderu zawierającego wtyczki z formatami plików. W przypadku standardowej instalacji programu może to być przykładowo taka ścieżka: C:\Program Files\Adobe\Photoshop Elements 5.0\Plug-Ins\File Formats. Po uruchomieniu Photoshopa będziemy mogli zapisywać i otwierać pliki o rozszerzeniu ico.

Po stworzeniu pliku favico.ico zapisujemy go na serwerze w katalogu głównym strony internetowej i możemy dopisać dodatkową linię kodu między znacznikami <head> i </head>: <link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon”>. Teraz ikona powinna być wyświetlana przez większość przeglądarek bez problemu.