Как создать FAVICON

Вчера случайно удалил файл favicon.ico со своего сайтика, пришлось вспоминать, как он делается.

Викисправка: «Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса…». На рисунке показано, как выглядит «фэйвайкон» Ли.ру:

А на этом рисунке изображен favicon, который я по-быстрому сделал для себя вчера:

clip_image001[24]

Откровенно говоря, практически то же самое описано в моем июльском посте «Самый простой способ создать FAVICON». Там же есть ссылки на скачивание двух программ: профессиональной и совершенно простенькой, но не менее эффективной (загляните).

Еще одна маленькая справочка, и — к делу: «Традиционно использовались изображения размера 16?16 пикселей формата ICO, помещенные в корень сайта под именем favicon.ico, — тогда Microsoft Internet Explorer использовал их для закладок…»

Открываем Photoshop и создаем новый документ. Укажите сразу прозрачный фон и будет вам счастье.

clip_image002[22]

Выбираем инструмент текста, пишем букву и применяем к слою какой-нибудь стиль.

Результат:

Сохранить полученную картинку необходимо в формате PNG (сохранится прозрачность фона). 

clip_image003[22]

Далее есть, как минимум, два простейших пути создание иконки: использовать программку AveIconifier или зайти на специальный сайт. Вы можете ввести в поисковик фразу «создание favicon онлайн» или «генератор favicon» и будет вам еще одно счастье.
Я воспользовался услугами этого сайта. На первом этапе загружаем сохраненную в PNG букву.

clip_image004[20]

В окошке справа вверху указываем размеры рамки для обрезки картинки.

На втором этапе указываем размеры иконки. Если указать 48 пикселей или 64, например, то полученную иконку можно использовать и в Windows как ярлыки и так далее.

clip_image005[20]

На третьем этапе обработки загружаем полученный файл в формате ICO.

Если вы не знаете, как загрузить на ваш сайт файл favicon.ico и как его использовать, извините, что занял ваше время.

Результат с буквой G:

clip_image006[20]

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.