Создание фавикона или как сделать иконку для сайта

Приветствую всех читателей блога seversantana.ru. Как создать фавикон для сайта, и для чего он нужен? И что будет с сайтом если не делать иконку для сайта?

Favicon (FAVorites ICON) — значок веб-страницы или веб-сайта, значок для избранного. Фавикон отображается браузерами в открытых вкладках перед названием страницы, а также в сохранённых закладках. Поисковая система Яндекс отображает иконку в поисковой выдаче.

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

Без фавикона интернет ресурс теряет часть своей индивидуальности. А наличие чужой иконки, как говорит Кузя из «Универа» — Апокрифично, глубоко, мрачно. При отсутствии фавикона страдает юзабилити. А чем юзабельней проект, тем выше посещаемость.

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

Мне иногда удаётся найти интересную для меня информацию, нечаянно по запарке закрытую мной в истории браузера по иконке сайта. Казалось бы, специально ничего не запоминал, а картинка в голове отложилась. Создание фавикона это дополнительный положительный фактор для продвижения сайта.

Делать или нет иконку для сайта? — такого вопроса, априори, быть не должно. Создать простой фавикон не так уж сложно и время затратно. Создать хороший фавикон потребует больше усилий и времени. Какой бы ни был favicon на сайте простой, отличный, сногсшибательный или не очень удачный, при любом раскладе это лучше, чем его отсутствие.

В каких форматах может быть создан фавикон? Иконку можно сделать и сохранить в следующих типах расширений — png, ico, jpeg, gif, svg, apng. Ниже представлена таблица наиболее популярных браузеров и их «отношение» к используемым типам расширений при создании фавикона.

Браузер	ICO	PNG	GIF	Анимиро-ванный GIF	JPEG	APNG	SVG
Google Chrome	Да	4.0	4.0	Нет	4.0	Нет	Нет
Firefox	1.0	1.0	1.0	Да	Да	3.0	Нет
Safari	Да	4.0	4.0	Нет	4.0	Нет	Нет
Internet Explorer	5.0	Нет	Нет	Нет	Нет	Нет	Нет
Opera	7.0	7.0	7.0	7.0	7.0	9.5	9.5

Тип расширения ico поддерживается всеми веб-обозревателями, поэтому основным форматом в котором делается иконка для сайта является ico. Как правило, используемый размер 16х16 px.

Как сделать фавикон в Фотошоп

В программе Фотошоп по умолчанию отсутствует возможность сохранения файла в ico. Для нас при создании фавикона это не проблема. Для решения этой задачи можно использовать два варианта.

Первый вариант, создаём иконку в Фотошоп, сохраняем в png, и после этого конвертируем его в ico в любом онлайн-сервисе. Например, в этом.

Второй вариант. После создания фавикона в Фотошоп скачиваем плагин экспорта типов расширений с сайта telegraphics.com

Версии плагина есть на ОС MAC и 32-х и 64-разрядные Windows с поддержкой всех версий Фотошоп. Выбираем нужную, качаем на компьютер, распаковываем архив, и закидываем в каталог File Formats файл ICOFormat в формате 8bi.

Стандартный путь к каталогу:

C:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats

У меня путь был следующий :

C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Required\Plug-Ins\File Formats.

Перезагружаем Фотошоп, теперь при клике на «Сохранить как» будет доступен вариант сохранения файла в формате ico.

Расскажу как я делал фавикон для блога seversantana.ru. В программе Фотошоп перешёл на вкладку «Файл», нажал на «Создать». Выбрал следующие параметры. Размер 16х16 px., разрешение 72 пикселы/дюйм, цветовой режим RGB 8 бит, содержимое фона — прозрачный. И сразу же задал имя — favicon.

После создания файла кликнул на инструмент «Рука» для увеличения рабочего пространства, и при помощи зажатого Ctrl и клавиш + и — задал нужный размер для комфортной работы.

Для своего блога я решил сделать иконку в виде буквы S согласно названию домена seversantana.ru Букву оформил в белом цвете прозрачный фон с помощью инструмента «Заливка» заменил на тон marengo, используемый в теме моего шаблона.

Пошагово это выглядело следующим образом. Увеличил рабочее пространство, кликнул на инструмент «Основной цвет», прописал код цвета marengo. Нажал на «Заливку» перетащил ведро на рабочую поверхность, и при помощи левой кнопки залил прозрачную область.

Мне осталось добавить мою белую букву S. Я нажал на инструмент «Горизонтальный текст», обвёл рабочую площадь, настроил в Фотошоп параметры текста, и напечатал букву S. После этого подкорректировал размер шрифта и выровнял букву по центру. Поэкспериментировал со стилями слоёв. Получилось то что получилось. Когда я уменьшил иконку до реального размера результат меня устроил вполне.

Онлайн-генераторы фавикон

Иконку можно сделать в онлайн-генераторах фавиконов. Опишу только один из них. Функциональность у продвинутых онлайн-генераторов примерно одинакова.

favicon.ru

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

Рисуем и тут же видим, как будет отображаться наш фавикон в интернете. Здесь же не отходя от кассы, можно заказать иконку для сайта у профессионалов. Если выбирать между фотошопом и любым онлайн-генератором, Photoshop, разумеется, намного функциональнее.

Как установить фавикон на сайт

Готовую иконку, как правило, размещают в корневую папку в которой находятся все каталоги сайта. В зависимости от используемой CMS наименование корневой папки может быть public_htm, HTDOCS (httpdocs). Это может быть и подкаталог, с именем вашего домена, вложенный в domains или public_htm.

В моём случае корневой каталог — public_htm\seversantana.ru. То есть я открыл папку seversantana.ru, и закинул туда сделанную иконку.

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

После размещения в корне иконка будет отображаться в открытых вкладках страниц в браузере. Если не отображается очистите кеш веб-обозревателя (очистить историю). И обновите страницу нажав на клавишу F5. Я проверил у себя отображение в Опере, Мозилле, Гугл Хром, ИЕ, Сафари, Яндекс.браузере и SeaMonkey. Все замечательно.

Если веб-обозреватели не видят иконки давайте сделаем следующее, пропишем путь к файлу для поискового робота. Html код должен быть расположен внутри контейнера <head> . Вставьте его перед закрывающимся тегом </head>. Незабудьте прописать в коде вместо «ваш сайт» достоверную информацию. Выглядит он следующим образом:

В WordPress этот html код прописывается в файле header.php вашей темы.

В Joomla это файл index.php используемого вами шаблона.

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

Наш робот которого мы с нетерпением ждём представится в логах сервера со следующим именем — Mozilla/5.0 (compatible; YandexFavicons/1.0; +http://yandex.com/bots) Именно он индексирует пиктограммы сайтов.

Со списком роботов Яши можно ознакомиться в хелпе веб-мастера Яндекс.

С основными роботами Гоши знакомимся в панели для веб-мастеров Гугл.

При хорошем раскладе наша пиктограмма проиндексируется в течение месяца за один-два АПа. АП — это обновление выдачи в индексе поисковой системы. Робот Яндекса отвечающие за пиктограммы, придёт на сайт увидит фавикон, сообщит поисковой системе, и она его выложит в выдачу.

И в завершение статьи, расскажу как сделать два разных значка в открытых вкладках поисковых веб-обозревателей для Вордпресс.

Два фавикона сайта для Вордпресс

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

Меняем его внешний вид до такой степени, чтобы различия бросались в глаза. Я просто поменял бэкграунд (фон). Сделал фавикон отображающейся на открытых страницах для моей админ панели красного цвета. Теперь когда у меня в одном окне открыто много вкладок, я вижу какие из моих относятся к админ панели, а которые ведут на страницы блога.

Приступим к технической части как это делается. Значок для админ панели размещаем в папке с названием нашей темы (шаблона). Далее, в этом же каталоге открываем functions.php на редактирование и в конце перед ?> вставляем следующие код:

Сохраняем изменения, очищаем кеш обозревателя, любуемся результатом.

P.S. Перед тем как изменить преобразовать иконку из png в ico не помешает сжать картинку с помощью какого-либо онлайн-сервиса или программы для уменьшения ее веса, а соответственно снижения нагрузки на сервер. Я для png использую программу PNGCauntlet. Сначала png картинку сохраняю в Фотошоп через «Сохранить для Web», а потом закидываю в PNGCauntlet.

♦  Рубрика: Юзабилити сайта.