Создаем уникальный Favicon и устанавливаем на сайт

Фавикон — это небольшое изображение рядом с названием страницы в поисковой системе Яндекс, а также во вкладке сайта.

Вот как это выглядит в поисковой системе Яндекс:

Вот как это выглядит во вкладках браузера:

Зачем нужен фавикон?

Поисковым системам все равно, есть ли на странице значок или нет. Это не влияет на увеличение или уменьшение экстрадиции. А вот фавикон — символ вашего ресурса. Он более полезен для пользователей. Яркое изображение привлекает внимание, помогает запомнить страницу и выделить ее из толпы.

Кстати, Яндекс.Вебмастер предупредит вас ошибкой, если на странице нет фавикона. Ошибка также может появиться в файлах журнала. Браузеры запрашивают favicon.ico, и если нужный файл не найден, сервер выдает ошибку 404.

Файл журнала — это журнал, содержащий системную информацию о действиях сервера и пользователя.

Как быстро создать фавикон для сайта

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

Не прорисовывайте много деталей. Иконка очень маленькая (32×32 пикселя), поэтому мелкие нюансы будут совершенно незаметны для читателей.

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

Самостоятельно создать мини-логотип

Откройте любой редактор изображений, например Photoshop, и создайте. Если иконка текстовая, размер шрифта должен быть 8-10 пикселей. В Photoshop есть специальный плагин для создания иконок — «Favicon.ico».

Это полезно! Если вы не можете сохранить файл как .ico. Вы можете сохранить его в формате PNG или JPEG, а затем найти любой конвертер изображений в Интернете. Введите в поиске «Конвертер PNG в ICO».

Создать значок с помощью онлайн-сервиса

Заходим в поисковик и пишем запрос «создать фавикон онлайн», выбираем любой из множества сайтов. Ниже приведены некоторые из самых популярных из них.

Рисуем фавинкон: Favicon.by

Сразу же после перехода на данный веб-ресурс вы обнаружите страницу, на которой уже есть «шаблон» будущей иконки в нужном размере.

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

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

Создание фавикон через загрузку изображения: Realfavicongenerator.net

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

Сделайте готовую картинку размером 260×260 пикселей. Выберите желаемую степень сжатия и настройки для iOS, Android и MacOS Safari. В результате у вас будут всевозможные иконки и код для их встраивания.

Скачать готовый файл фавикон

Этот вариант подойдет тем, у кого совсем нет времени. В этом случае зайдите на Яндекс.Картинки или любой другой ресурс поиска картинок и напишите «готовый фавикон».

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

Если другой веб-мастер загрузит то же изображение, что и вы, читатели будут сбиты с толку. Лучше не торопитесь и создайте уникальный фавикон.

Иконку также можно скачать, например, со специализированных стоковых сайтов:

Какой формат использовать?

Желаемые форматы Favicon: ico, png, svg

Устаревший формат. Но он поддерживается большинством браузеров.

Содержит значки разных размеров. Таким образом, браузеры могут загружать значок с более низким разрешением.

Поддерживается всеми браузерами и платформами.

Применяется к Safari macOS. Файлы легкие и хорошо отображаются. Мы ждем, когда этот формат будет поддерживаться всеми браузерами.

Допустимые форматы: jpeg и gif

Не все браузеры поддерживают отображение этих значков.

Если ваш фавикон имеет пользовательский формат png или ico, вам лучше проверить его на caniuse.com. Это скажет вам, поддерживают ли ваши браузеры формат, который вы хотите.

Продвинутая информация по размерам фавиконов, которая пригодится не всем

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

Вы не хотите беспокоиться об этом? Затем сделайте фавикон размером 32 × 32 пикселя. И перейти к следующей части.

Вот сводная таблица рекомендуемых размеров. Источник: укс. паб

Для смартфонов

Для Android и Apple размер значка зависит от типа и плотности экрана. Он может понадобиться вам для работы.

Как поставить Favicon самостоятельно

Стандартный поисковик Яндекса и другие сервисы будут искать ваш фавикон в корне страницы по адресу site.ru/favicon.ico. Наша задача — загрузить туда нашу иконку или определить другой способ ее размещения.

Через тему сайта WordPress

Начиная с WordPress 4.3, вы можете добавить значок из панели администратора WordPress.

Придерживайтесь этого порядка:

1. Откройте администратора
2. Внешний вид>.
   Настроить>
   Свойства страницы
3. Значок страницы>
   Изменение изображения
4. Отправьте фавикон.
5. Нажмите кнопку «Опубликовать».

Как добавить фавикон на сайт WordPress вручную

Рекомендуется сначала протестировать все на локальном сайте разработки.

1. Перейдите к файлам тем с помощью FTP-клиента или файлового менеджера.
2. Найдите папку /wp-content/themes/ваша-тема.
3. Загрузите значок в подпапку, например Assets.
4. Запомните путь к файлу.

В файле function.php введите путь к иконке.

функция add_favicon()
<
эхо »;

>

добавить имя(‘wp_head’, ‘add_favicon’);

В строке после href=».get_template_directory_uri() введите путь к вашей иконке. Убедитесь, что вы вводите правильное имя файла. Если вы используете формат файла .ico, это будет один:

функция add_favicon()
<
эхо »;

>

добавить имя(‘wp_head’, ‘add_favicon’);

Как вставить фавикон через корневой каталог, если сайт не использует CMS

Чтобы установить фавикон более сложным способом, перейдите в основной каталог нашего сайта. Например с FileZilla. Здесь вам нужно найти HTML для домашней страницы.

Этот файл лучше сохранить на свой компьютер на случай, если вы неправильно измените исходный код. Откройте код HTML и найдите строки, которые появляются между тегами заголовка. Здесь следует вставить строку:

Если мы укажем «icon», изображение будет нормально отображаться во всех современных браузерах. Если вместо этого мы укажем «значок ярлыка», значок будет виден только в Internet Explorer.

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

Здесь нужно указать формат файла.

Как задать фавиконы для разных устройств?

Напишите ссылки на значки между тегами заголовка. Например:

Для десктопа (ico)

Декстоп (png)

Apple

Углы значков на устройствах Apple закруглены. Поэтому лучше использовать предварительно составленный apple-touch-icon вместо apple-touch-icon.

Safari

Андроид

Как задать размеры фавиконок?

Скачать иконку можно в нескольких размерах: 16×16, 32×32 и 48×48. Вот пример для декстопа:

Как проверить, установился ли фавикон?

Просто погуглите свой ресурс. Или проверьте свой сайт на Realfavicongenerator.

И вы также можете использовать этот метод. Только вместо «mysite.ru» введите название вашего сайта:

• Яндекс: http://favicon.yandex.net/favicon/mysite.ru.
• В Google: https://www.google.com/s2/favicons?domain=mysite.ru.

Если значок не отображается, убедитесь, что:

• ссылка на фавикон открыта для индексации в robots.txt и отвечает серверу HTTP 200.
• изображение ico или png находится в корне ресурса или путь к нему специально переписан.
• вы ждали несколько недель. Роботам поисковых систем требуется время, чтобы проиндексировать значок страницы.

Подытожим

1. favicon лучше сделать, чем не сделать. Это поможет людям идентифицировать ваш сайт.
2. Создать фавикон можно в фотошопе или с помощью онлайн-сервисов
3. Вы можете создать иконку сразу в нескольких размерах, чтобы она корректно отображалась на всех устройствах.
4. Наиболее подходящие форматы — ico или png.
5. Вы можете добавить фавикон через свою CMS или через корень вашего сайта.

Как вы думаете, какие сайты имеют самый успешный фавикон? Поделитесь в комментариях!

Заработайте от 1000$ в месяц на телеграмм-ботах. Денежная система "Торнадо"

8 часов назад

Ежедневный заработок от 918 рублей на поиске информации

8 часов назад