Как сделать Favicon

Favicon – это небольшой значок, который можно увидеть в адресной строке браузера рядом с URL интернет-сайта.  Эти же значки появляются в закладках после добавления туда сайта или на вкладках браузера, где зафиксированы самые посещаемые пользователем страницы. Помимо прочего, favicon становится иконкой сайта на рабочем столе.

Удивительно, что при такой популярности, лишь немногие знают, как правильно создать favicon. На восполнение этого пробела направлена данная статья.

В сети Интернет существует множество ресурсов, с помощью которых можно сделать favicon в режиме онлайн.  К таким относятся, прежде всего:

• • http://www.favicon.cc/
• http://www.favicon.co.uk/  

Другим способом создания favicon является программа Фотошоп/ Photoshop. В этом случае, нам понадобится само программное обеспечение, сайт, для которого создается favicon и особый плагин, речь о котором пойдет чуть позже. Размер стандартного изображения не превышает рамки 16х16 пикселей.

Перед началом скачиваем себе на компьютер плагин для программы Photoshop, который предназначен для создания рисунков в формате .ico. Сделать это можно по адресу:

• http://www.telegraphics.com.au/sw/files/ICOFormat-1.6f9-win.zip

На тот случай если ссылка изменится то тут: 

• • http://www.telegraphics.com.au/sw/product/ICOFormat (ссылка справа по середине страницы) 

Создание favicon

Начальным этапом создания фавикона является выбор несложного рисунка. Для примера рассмотрим картинку размером 500х500 пикселей. В меню Фотошопа следуем по пути File>New и открываем выбранное изображение. Отредактируем будущий favicon в стиле нашего сайта, учитывая его цветовую и дизайнерскую концепцию. 

После внесения всех необходимых изменений, следует сохранить полученный фавикон в размере 16х16 пикселей. Это делается следующим образом: в разделе Image выбираем рубрику Image Size и изменяем там размер изображения. Итоговая картинка получится очень маленькой, это нам и нужно.

Далее нужно сохранить все изменения. Для этого нажимаем кнопку File и выбираем Save as a Web. Если плагин был установлен корректно, то он автоматически перейдет в формат Windows в новом окне. В настройках большинства Интернет-браузеров по умолчанию стоит опция, принимающая значки с расширением только ico. Поэтому, мы должны учитывать это в своей работе и устанавливать на свой сайт только такие фавиконы.

Зачастую бывает, что новичкам сложно правильно установить плагин. Если Вы столкнулись с такой ситуацией, следуйте следующим рекомендациям.

В разделе «File»-«Save as a Web» сохраните отредактированное изображение, а в новом окне вручную выберите режим Windows с расширением .png. Имя файла преобразуется в «favicon.png». далее в угоду веб-браузеров мы должны изменить расширение на .ico. Для этого достаточно просто переименовать файл: «favicon.ico» вместо «favicon.png». в этом случае помните, что при попытке загрузить файл на сайт, система задаст Вам вопрос «Are you sure you want to change the extension from «.png» to «.ico»?», правильный ответ на который гласит «Use .ico».

Загрузка файла favicon.ico

Фавикон загружается на сервер сайта. Администратор должен сохранить его в коневую директорию, в то место, где храниться файл «Index». Очень важно не допустить размещение в каталоге или других папках. Если все было сделано корректно, и имя файла звучит как «favicon.ico», веб-браузер найдет его и автоматически выведет в адресную строку. Для подстраховки можно прописать HTML-код после тега «head».

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

Тестирование. 

Если после установки фавикон не появляется в адресной строке, то можно очистить кэш или просто обновить страницу.  

Устранение неполадок. 

При работе с различными браузерами можно столкнуться с некоторыми проблемами по отображению фавикона. Рассмотрим наиболее типичные ситуации.

Браузер «Microsoft IE 6» для «Windows» не отображает фавикон. Известно, что эта программа не отображает иконку до тех пор, пока сайт не окажется в разделе «Избранные». Решить это можно и по-другому. Перейдите к адресной строке, кликните на существующую иконку, а после этого на «jiggle». Теперь обновите страницу, все должно работать.

При подобных проблемах с «FireFox», требуется очистка кэша и перезагрузка браузера.

«Опера» также нуждается в перезагрузке.

Немного сложнее дело обстоит с браузером

В «Опера» просто обновите страницу. «Internet Explorer 7». Здесь следует набрать код

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

После этого действия, сайт должен работать корректно.

Удачи!