Создание favicon.ico 16.01.2009 — 19:12
Метки: photoshop, дизайн, сайтоводство, софт
Одним из самых непростых околодизайнерских действ является изготовление пиктограмм, в частности favicon.ico, предназначенной для отображения в адресной строке браузера и закладках. Уж больно тесно на шестнадцати квадратных пикселях для создания шедевра. Скажу более — этого мало даже для того, чтобы в некоторых случаях вообще понять, что же имел в виду автор фавиконки: то ли фитнес, то ли фистинг — не разберешь.
А вещь эта, между прочим, удобная и полезная. С одной стороны, сразу видно серьезное отношение к созданию сайта, с другой — найти картинку в раскрывающемся списке адресной строки или в журнале значительно проще, чем обычный текст напротив «казенного» листочка с заломленным углом. Привожу два наиболее удобных способа, которыми пользуюсь я сам.
Первый, простой и наглядный. В интернетах имеется ряд сервисов, специально предназначенных для создания favicon.ico. Самый удобный из опробованных мною — favicon.ico Generator:
favicon.ico Generator
Можно загрузить произвольную картинку, которую движок сам сожмет до размера 16×16 пикселей, и корректировать ее. Или рисовать с нуля самому. Результат деятельности отображается в реальном времени в текущем окне браузера, что весьма удобно. Итоги работы сохраняются сразу в формате ico. В наличии всего три инструмента: пипетка для выбора цвета, ластик и хваталка-двигалка. Запутаться чрезвычайно сложно.
Для ценителей BDSM и просто тех, кто любит использовать вещи не по назначению, предусмотрена люто неудобная возможность покадрового создания анимации.
Способ второй, обладающий, определенно, большими возможностями. Я не знаю, почему так получилось, но Adobe Photoshop к своей одиннадцатой версии (CS4) так и не научился сохранять файлы в формате ico. Помочь горемычному можно, установив плагин .ico Plugin. Достаточно скопировать содержимое архива в …\Adobe\Adobe Photoshop CS4\Plug-ins, и тут же появится возможность сохранять проекты в требуемом виде:
Photoshop
Ну а в «Фотошопе» уже можно делать действительно дерзкие вещи: и градиентные заливки, и тени. Особо одаренные рыцари монитора и клавиатуры даже ухитряются изобразить на 256-ти пикселях эффект «мокрого пола». Главное — под конец работы ужать проект до размера 16×16 пикселей любимым алгоритмом и сохранить результат под названием favicon.ico.
Похоже, что современные браузеры могут для отображения иконки «избранного» «сжирать» файлы и других форматов, например gif и png, а также альтернативных размеров. Но лучше все-таки делать максимально отказоустойчивую картинку именно в формате ico (16×16 пикселей) и явно указывать ее расположение внутри тега <head>.
Многие удивляются, почему некоторые браузеры не отображают favicon.ico даже при выполнении описанных выше условий. От этого они волнуются и потеют. А дело вот в чём. Иногда для появления иконки бывает необходимо почистить кэш браузера. А особо говнистые программные продукты (см. «Microsoft Internet Explorer до седьмой версии»), кажут favicon.ico только в том случае, когда страница занесена в «избранное». Отсюда, кстати, и название — FAVorite ICON.
Плагин работал без проблем на CS3, а на четверке не хочет, собака, ни в какую…