Создание и установка Favicon на сайт
Слово Favicon является хитро зашифрованным сокращением английских слов Favorites и ICON. Это небольшой значок веб-страницы, который виден на вкладке. Также он может отображаться в адресной строке перед URL, находиться рядом с закладкой и пр. Простыми словами, favicon для сайта – это как вишенка на куске торта. «Правильный» фавикон всегда привлекает внимание посетителя, повышает уровень доверия к сайту.
Как правило, такая иконка имеет небольшие размеры (16х16). Если на сайте WordPress favicon отсутствует или задан неверно, в браузере рядом с названием веб-сайта появится значок браузера Opera, Google Chrome и пр.
Основная задача фавикон
Мы уже определились, что такое фавикон сайта и какие функции он выполняет. Рассмотрим их на простом примере. Оказывается, фавиконки сайта выводятся даже в поисковике. Предугадать, по какой именно ссылке кликнет пользователь, несложно. Наличие небольшой картинки, которая всегда приятнее текста, существенно повышает шансы на успех.
Мы не знаем, какие именно факторы ранжирования учитывает Yandex в поисковой выдаче. Но поскольку их более 300, роль иконки в определении качества ресурса не подлежит сомнениям. Так что если вы хотите сделать свой ресурс по-настоящему мощным и привлекательным, установка Favicon на сайт точно не помешает.
Основные требования к файлу с иконкой
Так сложилось исторически, что оптимальным решением для веб-сайтов WP является файл favicon в формате .ico. Его особенность в том, что внутри хранится несколько изображений с разрешением 16 х 16, 32 х 32 или 64 х 64 пкс. Правда, для сайтов рекомендуется использовать именно 16 х 16, так как любой другой формат ни браузер, ни Яндекс показать не смогут.
Вы можете сделать favicon практически из любой картинки или фотографии. Есть три варианта: либо повозиться с графическим редактором, либо сгенерировать фавикон на одном из онлайн-сервисов в интернете. Также есть возможность загрузки готовой коллекции – чтобы скачать favicon с чужого сайта, введите в строке поиска «коллекция Favicon».
Иногда в коллекциях все картинки имеют расширение .gif. Для конвертации файла в нужный вам формат воспользуйтесь бесплатным программным обеспечением Snagit. Достаточно навести курсор мыши на понравившееся изображение, кликнуть правой клавишей и открыть его в Snagit. Программка предложит сохранить изображение в нужном вам формате – выбираем .ico разрешение.
Созданный своими руками или сохраненный в нужном формате фавикон доступен для сохранения абсолютно в любой директории. Однако веб-браузеры и поисковики ищут favicon CSS по ссылке: адрес вашего сайта/favicon.ico. Возникает вопрос: где должен быть фавикон, в каком месте находиться? Рекомендуем сохранить его в корневой директории.
Добавление Favicon на сайт
Каким образом можно добавить favicon на собственный сайт? Сделать это можно следующим образом:
- Сохраните картинку в формате .ico размером 16 х 16, переименуйте ее на favicon.ico.
- Когда создан нужный формат документа, файл .ico загружают либо в основную папку по адресу domains/ваш сайт/public_html/, либо в панель управления.
После такой настройки на некоторых сайтах необходимо дополнительно устанавливать код html, чтобы фавикон работал корректно. Оптимальное место размещения – заголовок header.php, аккурат между тегами:
1<link rel=»shortcut icon» href=»ваш сайт/favicon.ico» type=»image/x-icon» />
2<link rel=»icon» href=»ваш сайт/favicon.ico» type=»image/x-icon» />
Когда код добавлен, остается обновить страницу. Если не помогло, делаем тотальную чистку браузера. Увидели картинку в браузере? Отлично – теперь вы знаете наверняка, как установить иконку фавикон на свой сайт.
Многие веб-мастеры думают, что достаточно сохранить иконку и поместить код в нужное место, чтобы фавикон на сайте заиграл всеми красками. На вашем веб-ресурсе он может и появится сразу, тогда как для отображения favicon в результатах поиска придется немного подождать. У каждой поисковой машины есть свой робот, который отвечает за обновление базы. Сколько времени потребуется? От 2 недель до 2 месяцев. Так что наберитесь терпения и ждите – результат обязательно будет!
Что изображать на фавикон?
Хотим дать вам несколько рекомендаций, которые помогут повысить эффективность favicon:
- При выборе иконки отдайте предпочтение изображениям, которые соответствуют тематике вашего сайта.
- Если ваш портал связан с каким-нибудь брендом, отображение его логотипа будет лучшим решением из возможных.
- Фавикон должен вызывать у пользователя желание перейти по ссылке. Это значительно повысит кликабельность ссылок в поиске Yandex и Google.
- Чтобы внести разнообразие, придумайте несколько вариантов фавиконок и настройте их для каждого раздела сайта.
- Также можно привязывать мини-иконки к различным праздникам. Например, 8 марта или Новому Году.
Можно ли сделать favicon анимированным?
ICO формат не поддерживает анимированные изображения. Однако практически все современные веб-обозреватели умеют отображать миниатюры в GIF формате. Сделать это несложно – достаточно прописать 2 строки к секции head:
<link rel="icon" type="image/png" href="/favicon.png" /><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
Файлы в форматах favicon.ico и favicon.gif предварительно помещаются в корневую директорию веб-сайта.
Кстати, если вам понадобился адрес favicon, получить его можно с помощью такого скрипта:
<?$url = 'http://htmlweb.ru';$html = file_get_contents($url);if (preg_match('/<([^>]*)link([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU', $html, $out)) {$link_tag = $out[0];if (preg_match('/href([s]*)=([s]*)"([^"]*)"/iU', $link_tag, $out)){$favicon = trim($out[3]);if (strpos($favicon, '://')===false)$favicon = $url. '/' . ltrim($favicon, '/');}}?>
Обзор популярных сервисов для работы с Favicon
Web-технологии
Используя данный сервис, вы за считанные секунды переконвертируете любой файл в формате .gif, .png или даже .jpg в нужный вам favicon.ico. Доступны 2 режима работы:
- Новичок. Все настройки выставлены по умолчанию. Достаточно просто нажать «Выберите файл», указать путь к изображению и кликнуть по голубой кнопке «Создать favicon.ico».
- Эксперт. Отличается от режима «Новичок» приличным выбором размеров готового изображения favicon.ico – от 16 х 16 до 128 х 128. Достаточно просто отметить галочкой нужные поля и нажать «Создать».
Также раздел сайта содержит небольшой набор готовых фавиконок. Перейдя в категорию «Описание», пользователь сможет ознакомиться с понятием favicon, получить общие рекомендации относительно создания иконок.
https://htmlweb.ru/service/favicon/#Новичок
Favicon Generator
Сервис имеет русскоязычный интерфейс и позволяет генерировать иконки не только для web, но и для мобильных приложений Android, iOS и Microsoft. Также сайт включает в себя огромную базу уже готовых иконок, сгенерированных пользователями. Поиск фавикона по своей тематике осуществляется в поисковой строке. Также можно выбрать желаемый цвет, букву и пр. Очень удобный и полезный сервис! Посетив его, у вас уже не будет возникать вопрос, как сделать фавикон для сайта и установить его самостоятельно.
https://www.favicon-generator.org
PR-CY
Сайт дает подробное разъяснение, что представляют собой фавикон иконки, как их сгенерировать самостоятельно, отвечает на другие популярные вопросы. Процесс создания предельно простой и понятный:
- Нажмите «Выбрать изображение» (Оранжевая кнопка).
- Нажмите «Создать Favicon» (Зеленая кнопка).
Вам останется только сохранить картинку на своем компьютере и установить ее на сайте.
Если есть время и желание, а также богатая фантазия, попробуйте создать иконку для веб-сайта самостоятельно. В этом вам поможет программное обеспечение EasyPicture2icon. Небольшая, но очень производительная программка умеет конвертировать в .ico формат картинки с расширениями .bmp, .gif и .png, jpeg. Достаточно выполнить три простых действия:
- Открыть на компьютере картинку, которая соответствует тематике вашего сайта, нажатием «Open Picture».
- Отметить нужный размер галочкой (16, 32 или 48).
- Сохранить иконку на жестком диске.
Если вы дружите с Adobe Photoshop и неплохо рисуете, установите плагин ICOFormat и приступайте к делу.
https://pr-cy.ru/favicon/
Подводим итоги
Если вы дочитали статью до конца, то уже имеете общее представление о фавиконах, их роли в поисковой выдаче. Также вы научились создавать иконки в формате .ico самостоятельно, используя бесплатные онлайн-сервисы и специальные программы. Как видите, все действительно оказалось очень просто!