Секреты favicon.ico или как создать иконку для сайта в Photoshop

Секреты favicon.ico или как создать иконку для сайта в Photoshop

Вы хотите оригинальную и красивую иконку для вашего сайта? Сделайте её сами – в этом вам поможет данная статья.

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») – это специальная стандартная или пользовательская иконка маленького размера, которая находится слева от ссылки (URL) в адресной строке веб-браузера. Также такие иконки используются в закладках рядом с названием сайта, во вкладках браузеров или как ярлык для web-страниц на рабочем столе или других папках Windows. Под маленьким размером подразумевается 16 на 16 пикселей – стандартный размер для иконок данного типа. Основная цель такой иконки — сделать дизайн вашего сайта целостным и детализированным.

Все, что вам необходимо сделать, чтобы добавить иконку на сайт – это поместить готовый «favicon» в формате Windows Icon (.ico) в корневую папку вашего сайта. Большинство современных сайтов, за исключением Internet Explorer (IE), поддерживают использование иконок в формате GIF (включая анимированные варианты) и PNG (включая поддержку полной прозрачности фона), но так как абсолютно все браузеры, IE в том числе, понимают формат .ico, имеющий особенности, которые не дублируются в GIF и PNG, предлагаю ознакомиться именно с их созданием.


Системные требования

Так как мы будем создавать иконки в “Photoshop”, нам необходимо научить программу понимать расширение Windows Icon (ICO). Для этого нам потребуется специальный плагин экспорта формата файлов .ico, который можно бесплатно загрузить с Telegraphics. Плагин читает и записывает ICO-файлы в 1, 4, 8-битных индексированных и 24-битных RGB режимах, а так же читать и записывать 32-битные “ХР” иконки (с 8-битным альфа-каналом). Чтобы установить плагин, вам необходимо на сайте разработчиков выбрать подходящий вариант системы, распаковать скачанный архив и поместить в папку “x:\Program Files\Adobe\Adobe Photoshop CS5.1\Plug-ins\File Formats\” (х = буква вашего диска, на который установлен Photoshop) файл с расширением “.8BI”, после чего запускаем или перезапускаем сам Photoshop.

Приступаем к созданию
Так как рабочая зона размером в 16х16 пикселей является недостаточно большой для удобной работы с изображением, лучше начать ваш проект с размером рабочей зоны хотя бы 64х64 пикселя (лучше использовать как можно большие размеры при создании иконок для более удобного выражения творческих идей, впоследствии изображение можно легко отмасштабировать с сохранением пропорций). Чтобы задать необходимые размеры рабочего поля необходимо выбрать в меню Photoshop пункт «File>New» или нажать сочетание клавиш Ctrl+N.

Дизайн иконки
Если у вас уже имеется готовый логотип большего размера, попробуйте уменьшить его до 16х16 пикселей и посмотрите, как хорошо он смотрится. Если при таких размерах логотип плохо различим и его графическая информативность невысока, создайте поле 64х64 пикселя и сделайте наипростейший дизайн иконки, который будет содержать основные цвета вашего сайта. Когда вы будете готовы протестировать готовый дизайн — выберите меню «Image>Image Size» или нажмите комбинацию клавиш «Alt+Ctrl+I» и задайте размер 16х16, выставив при этом режим интерполяции «Bicubic Sharper» (этот режим наилучший для уменьшения изображения и дает возможность оценить будет ваша иконка “размытой” при уменьшении или нет). В случае, когда изображение все-таки недостаточно четкое, вернитесь к исходному изображению и сделайте ваш рисунок более четким, насыщенными и/или контрастным, после чего заново отмасштабируйте вашу иконку.

Если вам кажется, что ваша иконка получилась не совсем такой, как вы хотели, продолжайте улучшать и видоизменять её до момента, когда она максимально будет похожа на вашу задумку. При работе с такими размерами этот процесс может занять у определенное время, прежде чем у вас все получится.

Сохранение и загрузка полученной иконки
Для сохранения полученного результата необходимо в меню выбрать пункт «File>Save As» или нажмите комбинацию клавиш «Shift+Ctrl+S» и задать обязательное имя файла «favicon.ico». В меню «Format» необходимо выбрать Windows Icon (ICO) из выпадающего меню. Этот формат будет доступен в Photoshop, только если вы скачали и правильно установили необходимый плагин и задали правильный цветовой режим при создании рабочего окна (1, 4, 8-битный индексированный или 24-битный RGB).

Следующим шагом будет размещение новой иконки в корневой папке вашего сайта. Для этого соединитесь с сервером, на котором находится ваш сайт, и закачайте туда созданный «favicon.ico». Этот файл необходимо обязательно поместить в папку, в которой находится домашняя (index.html) страница, а не в папку с изображениями или какую-либо другую папку, так как стандартным местоположением этого файла является именно корневая папка сайта. Если файл был правильно размещен (а его название точно «favicon.ico»), большинство браузеров автоматически распознают его.

Однако для некоторых браузеров необходимо указать прямую ссылку на иконку вашего сайта непосредственно в HTML-коде, а именно добавить ее в хедер каждой страницы, на которой необходимо разместить «favicon.ico»:

<link rel="Shortcut Icon" href="/favicon.ico">

В большинстве современных тем для Joomla, WordPress и прочих движков используются отдельные файлы (например “header.php”), где достаточно прописать 1 раз эту строчку в начале файла и все страницы будут автоматически подхватывать указанные в них настройки. Также существует расширенный вариант написания данной строчки:

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Если вы сомневаетесь, какой вариант подходит именно вам, пропишите обе строчки.

Не забудьте закачать отредактированные страницы обратно на сервер для отображения изменений в случае, когда изменения производились в локальной копии сайта.

Для использования иконки в формате GIF или PNG необходимо прописать следующие строчки:

<link rel="icon" href="/favicon.gif" type="image/gif">

или

<link rel="icon" href="/favicon.png" type="image/png">

Однако запомните, что оба эти формата не поддерживаются IE и не будут в нем работать.

Мультиразмерный Favicon
Помимо обычного favicon размером 16х16 пикселей, которые используются для оформления адресной строки, существует его разновидность с размерами в 32×32 пикселя и 48×48 пикселей. Эти иконки очень распространены в среде Windows. Например, если вы хотите поместить ярлык на веб-страницу на ваш рабочий стол, Windows автоматически попытается использовать favicon в качестве изображения для ярлыка. Но стандартного размера (16х16 пикселей) будет недостаточно для качественного отображения, так как стандартный размер ярлыка в среде Windows 48х48 пикселей – это значит, что ярлык будет растянут до необходимых размеров и станет некрасивым и практически нечитаемым.

Однако существует способ исправить этот недостаток. Полезное свойство файлов .ico заключается в том, что они могут содержать в себе много вариантов одной и той же иконки с разными размерами и глубиной цвета (наподобие возможности .gif-файлов содержать множество фреймов). Поэтому если поместить в favicon.ico изображение сразу в нескольких размерах и с разной глубиной цвета, Windows сможет автоматически выбрать наиболее подходящие параметры для применения к ярлыку. Наиболее распространённые размеры ярлыков, которые могут быть использованы, — 16×16, 24×24, 32×32 и 48×48 пикселей.

Создание мультиразмерной иконки не намного сложнее, чем создание обычного favicon размером 16х16 пикселей. Необходимый плагин мы можем найти все на том же сайте Telegraphics, он позволит поместить несколько иконок в одном .ico-файле. В принципе это даже не плагин, а отдельная программа, которую можно использовать как в Windows (через командную строку), так и в MacOS (посредством перетаскивания). Также у этой программы существуют аналоги, как например: Sib Icon Studio (www.sibcode.com/icon-studio) и Any to Icon Convertor (www.aha-soft.com/anytoicon).

Что касается глубины цвета, вы могли заметить, что некоторые иконки имеют неровности (как зазубрины) по краям, в то время как другие сглаживают эти неровности и выглядят очень симпатично. Это возможно благодаря 32-битной глубине цвета, которая отображает настоящую прозрачность, как и Photoshop. Вы можете создать 32-битную версию иконки вместе с 24-битной (16 миллионов цветов, с поддержкой прозрачности как в .gif-файлах), 16-битную (256 цветов) и даже 8-, 4- или 2-битную версию, и поместить их всех в один ico-файл.

Поэтому если вы хотите быть уверенными, что ваш favicon будет смотреться красиво во всех возможных случаях – лучше сделать его сразу в нескольких варианта. Например:

16×16, 16-бит (256) цветов
16×16, 32-bit colors
32×32, 16-бит (256) цветов
32×32, 32-bit colors
48×48, 16-бит (256) цветов
48×48, 32-bit colors

Но не стоит слишком увлекаться и создавать много вариантов, так как с каждым добавлением favicon.ico увеличивается в размере, что может негативно повлиять на его загрузку.

Решение возможных проблем
Общие проблемы
В случае если после проделанных действий ваш «favicon» так и не появился, попробуйте несколько раз (около 5) обновить вашу страницу или очисть кэш браузера, или поставьте “?” в конце ссылки (например “http://diego.com.ua/?”) — это действие заставит думать браузер, что страница является новой и еще не была добавлена в кэш.

Еще одним способом решения этой проблемы является переход по прямой ссылке на ваш «favicon» (например: http://diego.com.ua /favicon.ico), после чего браузер (IE) немедленно отобразит и запомнит иконку.

Проблемы совместимости с браузерами
“Microsoft IE 6” (а также 7, 8 и 9) может не отображать “favicon” до тех пор, пока ссылка на вашу страницу не будет добавлена в избранное. В таком случае попробуйте следующий вариант – зажмите левую клавишу мышки на отображаемом “favicon” (обычно стандартная иконка IE), после чего “потрясите” его и отпустите. Данные действия приведут к перезагрузке страницы и обновлению иконки. Другим способом решения данной проблемы является добавление следующего кода в секцию “” страниц, на которых вы хотите видеть ваш “favicon”:

<link rel="shortcut icon" href="favicon.ico"> 
<link rel="icon" type="image/ico" href="favicon.ico">

“Safari” для Mас-систем не будет отображать обновленный “favicon” до тех пор пока не будет очищен кэш браузера. Однако нажатие кнопки меню “Empty cache” не решит проблему, так как “Safari” хранит иконки в отдельной папке. Чтобы очистить папку кэша иконок необходимо зайти в меню “Edit > Reset Safari” и поставить галочку напротив “Remove all website icons”. Альтернативным (ручным) способом является удаление содержимого следующей папки: “User>Library>Safari>Icons”. Для Windows-версии “Safari” путь немного отличается: “C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari”, в этой папке необходимо удалить файл “WebpageIcons.db”. Напоминаю, что папка “Local Settings” и вложенные в неё папки скрыты по умолчанию, а значит для того, чтобы в них попасть, необходимо настроить отображение скрытых файлов и папок Windows. После удаления вышеуказанных фалов необходимо перезапустить “Safari” (в некоторых случаях также необходимо перезагрузить компьютер).

Для решения аналогичной проблемы в “Mozilla FireFox” необходимо очистить кэш браузера и перезапустить программу.

В браузере “Opera” такой проблемы нет, поэтому после обновления вашей иконки достаточно простого обновления страницы (возможно несколько раз).

Другой проблемой в ОС “Windows” является обновление иконок для Интернет-страниц (к примеру, при размещении иконки страницы на Рабочем столе). Для принудительного обновления изменившихся иконок необходимо выполнить следующие действия:
1. Нажать правой кнопкой по Рабочему столу;
2. Выбрать пункт меню “Свойства” (для “Windows XP”) или “Персонализировать” (для “Windows Vista” или “Windows 7”) и перейти на вкладку “Свойства Экрана”;
3. Поменять качество цветопередачи с 32-разрядного на 16-разрядное и нажать кнопку “ОК” или “Применить”;
4. Обратно поменять качество цветопередачи на 32-разрядно и нажать кнопку “ОК” или “Применить”.

Проблемы с плагином “Photoshop”для работы с иконками
Формат “Windows Icon” (ICO) будет недоступен, если:
1. Вы неправильно установили плагин;
2. Вы неправильно определили версию плагина подходящую для вашей ОС;
3. Рабочая область в “Photoshop” была создана не в 1, 4, 8-битных индексированных или 24-битных RGB режимах.

Также после установки плагина необходимо перезагрузить сам “Photoshop” для вступления в действие сделанных изменений.

5 комментария к “Секреты favicon.ico или как создать иконку для сайта в Photoshop”

    1. Попробуйте следующий вариант:
      1. Создайте папку Plug-ins на любом диске и поместите туда плагин;
      2. Затем, открываете Photoshop и выбираете «Редактирование — Установки — Внешние модули»;
      3. Поставьте галочку напротив «Добавить папку для внешних модулей» и указываете путь к папке с плагинами.
      4. Перезагружаете Фотошоп.

      Если плагин не будет работать после этих шагов, попробуйте создать еще одну папку «File Formats» внутри подключенной папки с плагинами и поместите туда файл «icoformat.8bi».

      Для установки других плагинов для портативных версий Photoshop, их необходимо поместить в ранее созданную папку Plug-ins

    1. Спасибо за ваш комментарий и ссылку на полезный ресурс, который, по сути, является более расширенной версией моей статьи. Хороший сайт, мне понравился.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *