Как правильно поставить favicon на сайт

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

Я считаю, что Favicon крайне важен для узнаваемости сайта. Обычно им является логотип организации, либо эмблема владельца сайта. Сегодня мы решим вопрос правильной его установки.

Обычно Favicon я делаю из подготовленной картинки в формате .png и размером 120 x 120 pixels. Но на этом все не заканчивается. Favicon должен быть в формате .ico

Для того чтоб преобразовать .png в .ico я использую программу IrfanView.

Для преобразования в .ico существуют онлайн конверторы. Например Convertio.co.

Готовый фавикон размещается в корневом каталоге сайта.

Теперь рассмотрим все причины, почему не отображается фавикон после его установки. Для начала давайте на всякий случай ещё раз посмотрим, видят ли favicon поисковики Яндекс и Google.

Проверяем favicon в поисковых системах Яндекс и Google

Для этого вводим в адресную строку браузера этот адрес:

Для Яндекс:

http://favicon.yandex.net/favicon/www.yandex.ru

(где меняем в конце www.yandex.ru на свой домен).

Для Google:

http://www.google.com/s2/favicons?domain=www.google.com

(а здесь в конце вместо www.google.com так же вписываем имя проверяемого сайта).

В обоих случаях мы увидели, отображается favicon в поиске Яндекса и Google или нет.

Если не отображается фавикон в браузере после установки нужно:

1. перезапустить браузер;

2. почистить Кэш;

3. проверить правильность создания и установки фавикона.

Почему не отображается favicon в поиске Яндекса:

1. В поисковой выдачи Яндекса favicon появится только после того, как сайт посетит робот и проиндексирует вашу иконку. Поэтому запаситесь терпением и подождите.

2. Скопируйте вот этот код:

<link href="http://ваш сайт/favicon.ico" rel="shortcut icon" />
<link href="http://ваш сайт/favicon.ico" rel="icon" type="image/x-icon" />

3. Вставьте его в файл index.php прямо перед закрывающим тегом </head> (см.скрин ниже) и обновите. Только не забудьте вместо ваш сайт написать свой домен.

Вот и все. Ждем когда робот посетит сайт и проиндексирует иконку.

Related Articles