Создание и установка Favicon на сайт

Создание и установка 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 (фавикон)

Созданный своими руками или сохраненный в нужном формате фавикон доступен для сохранения абсолютно в любой директории. Однако веб-браузеры и поисковики ищут favicon CSS по ссылке: адрес вашего сайта/favicon.ico. Возникает вопрос: где должен быть фавикон, в каком месте находиться? Рекомендуем сохранить его в корневой директории.

Добавление Favicon на сайт

Каким образом можно добавить favicon на собственный сайт? Сделать это можно следующим образом:

  1. Сохраните картинку в формате .ico размером 16 х 16, переименуйте ее на favicon.ico.
  2. Когда создан нужный формат документа, файл .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

Что изображать на фавикон?

Хотим дать вам несколько рекомендаций, которые помогут повысить эффективность 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

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

  1. Нажмите «Выбрать изображение» (Оранжевая кнопка).
  2. Нажмите «Создать Favicon» (Зеленая кнопка).

Вам останется только сохранить картинку на своем компьютере и установить ее на сайте.

Если есть время и желание, а также богатая фантазия, попробуйте создать иконку для веб-сайта самостоятельно. В этом вам поможет программное обеспечение EasyPicture2icon. Небольшая, но очень производительная программка умеет конвертировать в .ico формат картинки с расширениями .bmp, .gif и .png, jpeg. Достаточно выполнить три простых действия:

  • Открыть на компьютере картинку, которая соответствует тематике вашего сайта, нажатием «Open Picture».
  • Отметить нужный размер галочкой (16, 32 или 48).
  • Сохранить иконку на жестком диске.

Если вы дружите с Adobe Photoshop и неплохо рисуете, установите плагин ICOFormat и приступайте к делу.

https://pr-cy.ru/favicon/

Подводим итоги

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

Комментарии
Adblock detector