Favicon и SEO

mychatik

Support
Команда форума
Регистрация
26.05.15
Сообщения
533
Реакции
466
Баллы
63
Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы.
Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
А также выводится рядом со ссылкой на сайт в выдаче поисковика.
Это очень важный элемент брендирования и улучшения узнавания веб-сайта среди других.

Стандартный favicon чата от "Розмови" имеет такой вид:

320.jpg

Понятно, что подобный значок никоим образом не характеризует Ваш чат.
Хороший favicon должен отражать суть Вашего чата в изображении размером со смайлик и донести информацию о вашем бренде в очень маленьком размере.
Традиционно используются изображения размера 16×16 пикселей формата .ICO, помещённые в корневой каталог сайта под именем favicon.ico.

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

Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы.
В случае отсутствия такого указания, браузер будет пытается загрузить favicon.ico из корня сайта.
Однако имеется возможность явно указать положение значка в (X)HTML-коде (внутри элемента <head>), что позволяет при условии отсутствия /favicon.ico использовать для каждой страницы свой значок. А также это желательно сделать для поисковых систем.

Для явного указания местоположения /favion.ico необходимо вписать следующую строку в код страницы вашего сайта внутрь секции <head>:

HTML:
<link rel="shortcut icon" href="http://www.ВАШ ДОМЕН/favicon.ico">
Путь к /favicon.ico указывайте свой, но обязательно абсолютный, начинающийся с http:.

Раньше основным и единственным форматом был .ICO. Сейчас его принято считать устаревшим и использовать в качестве альтернативы формат .PNG.
Но для старых версий браузеров такой формат является единственно возможным.
Самый современный вариант расширения - .SVG. Он намного упрощает процесс настройки и хранения данных о разных размерах картинки. Но, увы, его поддерживают не все устройства. Допускаются также форматы .GIF и .JPEG, но их применение нецелесообразно: поддержка таких расширений крайне низкая.

Чтобы создать свою уникальную фавиконку - подготавливаем подходящую картинку размером не менее 70x70, а лучше 260x260 или более.
Далее, переходим на сайт Favicon Generator и загружаем выбранную картинку.
После загрузки, Вам будут показано как будет выглядеть фавиконка на сайте и на различных гаджетах. Для каждого из них её можно подкорректировать.
Если всё устраивает - жмём кнопку для генерации набора фавиконок и кода вставки.
Скачиваем архив с фавиконками, распаковываем и грузим ВСЁ его содержимое (картинки и файлы) в КОРЕНЬ сайта.
В раздел <head> вставляем код (в зависимости от выбранных на сайте генератора настроек, он может незначительно отличаться):
HTML:
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

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

:good: Готово!
Теперь Ваш сайт станет более заметным и запоминающимся среди подобных в интернете...
 
Сверху Снизу