Создание Favicon для сайта - рекомендации и пошаговое изготовление

В этом уроке рассмотрено создание Favicon, вы узнаете, для чего необходима данная иконка, получите рекомендации  по улучшению ее вида и привлекательности.

Кроме этого мы рассмотрим процесс создания и добавления Favicon для сайта.

Favicon - это небольшая иконка которую вы можете видеть в адресной строке браузера и на вкладках открытых страниц, а также при добавлении сайта в закладки браузера туда же добавляется и данная иконка.

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

Вот некоторые рекомендации, которые необходимо учитывать при создании Favicon.

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

#2. Не используйте стандартные значки. Многие после создания сайта на той или иной CMS, оставляют значок этого движка сайта, ничего, не меняя. В результате в выдаче поисковой системы может находиться не один сайт с таким значком, а множество. Этим вы не как не выделите свой сайт, поэтому используйте только уникальные иконки Favicon созданные специально для вашего сайта. Сюда же можно отнести ситуацию, когда используют иконки из различных коллекций или элементов интерфейса других сайтов. Помните для того чтобы выделяться вам нужна уникальная Favicon.

#3. Старайтесь при создании значка использовать более яркие и светлые цвета, как правило, они привлекают больше внимания.

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

Теперь рассмотрим непосредственно сам процесс создания Favicon. Для этого существует множество сервисов. Однако они больше подходят для тех у кого уже есть готовая иконка которую они где нибудь содрали или взяли из какой-то коллекции. Но как я уже говорил выше, иконка должна быть уникальной, поэтому здесь я рассмотрю процесс ее создания при помощи программы Photoshop, на примере сайта WebMasterMix.ru.

Создание заготовки Favicon в Photoshop

#1. Создайте новый документ в Photoshop размером 64*64px, для этого пройдите в меню "Файл" >> "Новый..." или нажмите сочетание клавиш Ctrl+N. Вообще сам значок должен быть 16*16px, но лучше вначале создавать его таки размером, а потом уменьшить до необходимого.

#2. В моем случае у меня нет какого либо логотипа для сайта поэтому я решил использовать символ "W" с которого начинается адрес сайта, а также те цвета которые преобладают в верхней части сайта это синий и желтый. Поэтому я установил значение цвета #6A91D0 и при помощи инструмента "Заливка" (G) задал синий цвет ранее созданному документу.

#3. После этого я выбрал инструмент "Текст" (Т) добавил символ "W" и задал ему следующее значение цвета #FAC31D.

Для того чтобы символ более выделялся на синем фоне я добавил ему обводку черным цветом и размером 2px. Для этого необходимо пройти в пункт меню "Слой" >> "Стиль слоя" >> "Обводка", выбрать цвет и размер обводки.

После этого необходимо объединить слои, для этого необходимо пройти в пункт меню "Слой" >> "Объединить видимые" или нажать сочетание клавиш Shift + Ctrl + E.

Для того чтобы линии были плавные без засечек я добавил размытие. Для этого необходимо пройти в пункт меню "Фильтр" >> "Размытие" >> "Размытие по Гауссу..." и установить радиус 0,3 пикселя.

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

#4. Теперь необходимо изменить размер значка. Для этого нужно пройти в меню "Изображение" >> "Размер изображения" и установить размер 16*16px.

#5. Осталось сохранить значок. Иконка Favicon должна иметь имя favicon и расширение .ico. Все дело в том что по умолчанию Photoshop не сохраняет изображения в формате .ico. Поэтому сохраните его в формате .png, для этого пройдите в пункт меню "Файл" >> "Сохранить как..." и из раскрывающегося списка выберите пункт PNG.

Конвертирование изображение в формат .ICO

После этого мы конвертируем его в формат .ico при помощи сервиса favicon.ru. Зайдите на данный сервис и при помощи кнопки "Обзор" выберите  ранее сохраненный файл в формате PNG после чего нажмите на кнопку "Создать favicon.ico".

После этого на загрузившейся странице появится ссылка "Скачать favicon.ico!" кликнув по которой можно сохранить готовую иконку Favicon на компьютер.

Теперь пришло время добавить Favicon к вашему сайту, чтобы она отображалась для всех его страниц. Для этого поместите иконку в корневую папку вашего сайта. Если ваш сайт уже находится на хостинге то обычно эта папка называется "public_html". Затем, в каждую страницу вашего сайта, перед закрывающим тегом </head> добавьте следующие строки:

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

Но в каждую страницу данные строки необходимо добавлять, если у вас сайт на HTML. Но так как, скорее всего ваш сайт создан на базе, какой-то CMS, то вам будет достаточно добавить эти строки в главный файл вашей темы, которую вы используете для сайта.

Если вы используете WordPress то пройдите в папку wp-content/themes/папка-с-вашей-темой/ найдите в ней и откройте файл header.php, а заетм вставьте необходимы строки и сохраните файл.

Если вы используете Joomla то пройдите в папку templates/папка-с-вашей-темой/ и откройте файл index.php вставьте необходимые строки и сохраните.

В некоторых темах в WordPress и Joomla уже могут быть прописаны свои пути к файлу favicon.ico в таком случае удалите их и замените на свои.

Если вы используете, какую либо другую CMS то все делайте по аналогии.

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

Материал подготовлен проектом: WebMasterMix.ru