Не отображается favicon перед описанием сайта в яндексе

Содержание

Где взять Favicon?

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


Способ первый: рисуем Favicon сами или заказываем у художников

Favicon можно закачать у дизайнеров-фрилансеров. Или нарисовать самому — это не так трудно, как может показаться на первый взгляд. Чтобы нарисовать свой уникальный Favicon не обязательно быть знатоком фотошопа. В сети есть много интернет-ресурсов, позволяющих онлайн нарисовать Favicon для Вашего сайта.

Способ второй: находим тематический Favicon из числа созданных

Целесообразно иметь уникальный (ручной работы) Favicon, но и ничего плохого не будет в том, если вы позаимствуете уже кем-то нарисованный. Дело в том, что в интернете существуют миллиарды Favicon и вероятность того, что ваш и чей-то Favicon могут перепутать — практически равна нулю. Разумеется, я не призываю использовать чьи-либо логотипы, которые защищены авторскими правами — их не нужно использовать ни в коем случае!!!

Где искать Favicon? Заходим в https://www.google.com/ вбиваем в строку поиска «.ico «, выбираем «Картинки» — «Инструменты поиска» — «Размер» — «Точный размер» — «16х16»

Favicon.ru

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, так же можно включить два дополнительных размера 32х32 и 48х48 пикселей, а так же обрезать картинку.

Это займет немного времени, сделайте это! Фэйвикон — это небольшой файл изображения, содержащий один или несколько значков, которые могут использоваться для представления веб-сайта, блога или даже одной веб-страницы. Если у вас нет значка для вашего сайта, пользователи обычно просто видят общий значок веб-страницы.

Добавление значка на ваш сайт

Сначала вам нужно загрузить иконку на свой сервер. Вот пример кода, который вы можете использовать. Поместите его внутри элемента. Если вы предпочитаете его без отражающего блеска, используйте следующий код. Выполните одно из следующих действий. Когда вы создаете новый сайт, появляется диалоговое окно «Новый сайт». Выберите «Толщина жидкости», чтобы включить адаптивный макет, или выберите «Фиксированная ширина», чтобы выбрать альтернативный макет.

После загрузки картинки сервис покажет как будет выглядеть иконка

и предложит её скачать или отредактировать готовую иконку в имеющемся графическом редакторе.

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

Вы также можете выбрать разрешение и язык в этом окне. Задайте свойства сайта в диалоговом окне «Новый сайт». По умолчанию открывается представление «План» с двумя уже созданными элементами. Домашняя страница в левом верхнем углу — это страница, которая будет загружаться, когда пользователь посещает ваш живой сайт. Таким образом, вам нужно обновить общие элементы сайта в одном центральном месте. Наверху есть четыре ссылки, которые указывают разные разделы интерфейса: «Планирование», «Дизайн» и «Публикация».

Это может быть сложно управлять всем набором элементов и следить за тем, чтобы на сайте не было никаких неработающих ссылок. Таким образом, вы не будете переписывать работу друг друга. Вы можете назвать файлы, но вы найдете их наиболее полезными. Этот значок также отображается в закладках при закладке веб-сайта. На следующем видео показаны основы знака и базовая последовательность создания.

Проверить наличие favicon у поисковых систем

Наличие файла favicon.ico вашего ресурса у поисковых систем можно проверить двумя способами:

Проверка наличия изображения на сервере Yandex : http://favicon.yandex.net/favicon/www.ваш-домен .ru

Это нужно скопировать и вставить в поисковую строку браузера, предварительно поставив адрес своего сайта в конце .

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

Проверить наличие картинки через : https://www.google.com/s2/favicons?domain=www.ваш-сайт .ru

В моем случае, Яндекс показывал пустоту, а Google — фавикон. Это значит, что GoogleBot еще не успел перепроверить мой сайт на наличие обновлений. А значит, с фавиконом действительно есть какие-то проблемы.

Контрольный способ, который в совокупности с двумя предыдущими даст контрольный ответ на вопрос: «Есть ли проблема в действительности? «.

В данный момент я исправил все проблемы и фавикон снова появился в поисковике Яндекса.

Что делать, если иконки сайта favicon нет

Первым делом, лезем в исходный код сайта в раздел Head > и ищем соответствующую строку кода:

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

Для владельцев сайтов на WordPress , нужно зайти в раздел: «Внешний вид -> Редактор -> Заголовок (header.php) » и ищем окончание блока вот с таким символом — /head >. Чуть выше него должен быть установленный данный код.

Так как у меня регистратор от reg.ru , я захожу в корневую папку через Панель управления хостингом . В зависимости от вашего регистратора, ваша панель управления может отличаться от показанной.

Если файла нет, его нужно создать и «Закачать » в указанную директорию. А так же, должны присутствовать в исходном коде соответствующие ссылки в директории Head >.

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

Выбираем из списка нужный файл и жмем «Скачать «. После скачивания, его нужно открыть, тем самым, проверить его актуальность и работоспособность.

Если файл не открывается (выдает ошибку) или показывает другое изображение (не то, которое вы ожидали увидеть), его нужно заменить. Для этого создаем новый favicon и загружаем в корневой каталог сайта через кнопку «Закачать «.

У меня кстати, данный файл имел вот такой вид после наступления проблем:

Все легко прошло после замены файла в корневом каталоге сайта на нужный (рабочий).

Как восстановить пропавший фавикон?

  1. Для браузера:

Проверить установку фавикона в шаблоне темы

Удалить кэш в браузере и на сайте

Обновить страницу браузера

  1. Для поисковиков:

Скопируйте и вставьте в файл header.php перед тегом код

Не забудьте указать URL своего сайта вместо mysite. Сохраните изменения в файле. Но перед этим сделайте резервную копию файла.

Фавиконом могут быть картинки с расширениями png, jpg, gif, тогда расширение ico следует заменить на одно их трех.

Например, у меня фавиконом является изображение с расширение jpg, следовательно код выглядит так:

jpg

» rel=»shortcut icon» type=»image/jpg» />

jpg

» rel=»icon» type=»image/jpg» />

Проверив и поправив ошибки на своем блоге, через неделю мой фавикон вновь появился в Яндексе.

На этом у меня все.

Здравствуйте, друзья! Когда-то я написал целых три статьи о фавиконах. Казалось бы, ну что там воду лить и так все всем давно известно. Но, как оказалось, вот эта маленькая иконка многим создает проблемы. Не удивительно, что вопросы возникают у тех, кто делает самые первые шаги в сайтостроении. Но, иногда, сложности бывают и у более опытных товарищей. У кого-то Favicon не отображается в браузере, у других в поиске Яндекса, а у некоторых одни страницы сайта с фавиконом, другие без. Конечно причины у каждого свои, но узнать, как проверить Favicon будет не лишним.

Обзор онлайн-генераторов, где найти коллекцию фавиконов

Favicon generator — сервисы, где можно сотворить «мини-логотип» для сайта или преобразовать подходящую картинку в нужный формат.

Удобный сервис, в котором можно сделать эксклюзивную иконку — нарисовать ее с нуля попиксельно. Для этого переходим на сервис и в меню слева нажимаем кнопку «Create New Favicon».

В центральной части окна находится область, в которой каждый квадратик — это пиксель будущего фавикона. Следует закрасить эти квадратики в разные цвета. Чтобы это проделать, нужно обратиться к блоку «Color Picker», который расположен в правой части сервиса. Здесь необходимо выбрать из предоставленной палитры необходимый цвет и щелкнуть по определенной области, где находится пиксельная сетка. Чтобы удалить неправильную закраску, достаточно поставить галочку возле чекбокса «transparent» и щелкнуть по квадрату, после чего он станет прозрачным.

Чтобы переместить рисунок по холсту сервиса, ставится галочка возле чекбокса «move». Для того чтобы посмотреть что получилось предусмотрен блок «Preview», который находится под пиксельной сеткой. Для скачивания готового фавикона на компьютер нужно нажать кнопку «Download Favicon».

Если вы не Пабло Пикассо и нарисовать с нуля для вас равносильно прыжку из парашюта, загрузите на сервер для будущего фавикона картинку любого формата и размера, она будет, как болванка. Чтобы загрузить изображение на генератор, нажимается кнопка «Import Image» в левом меню.

На открывшейся странице нужно кликнуть кнопку «Выбрать файл», найти на компьютере подходящую картинку. При загрузке прямоугольной картинки можно отформатировать ее в квадрат (16х16). Для этих целей предусмотрена вкладка «Shrink to square icon». Учтите, в таком случае изображение будет искажено по одной из осей.

Чтобы соотношение сторон остались прежними, поставьте точку в чекбоксе «Keep dimensions».


После всех манипуляций нажимаем кнопку «Upload». Редактирование загруженной фавиконки будет доступно аналогичным способом, что и создание с нуля. Для скачивания готового шедевра на ПК следует нажать кнопку «Download».

Этот онлайн генератор еще и предоставляет коллекцию фавиконов, которые создавались другими пользователями этого сервиса ранее. Они выложены в общем доступе. Чтобы посмотреть галерею нужно в левом меню нажать кнопку «Latest Favicons» — экспонаты, отсортированные по дате или кнопку «Top Rated Favicons» — по рейтингу.

Чтобы скачать понравившийся экземпляр кликните левой кнопкой мыши по его названию и на открывшейся странице выберите «Download Favicon».

Сервис логотипов, который плюс к этому еще может эксплуатироваться для создания фавиконов. Тут не нужно рисовать или конвертировать фавикон с логотипа.

Для создания фавикона необходимо ввести название компании или сайта и нажать кнопку «Далее».

Онлайн генератор предоставляет уже готовые к использованию шаблоны фавикона. Для скачивания иконки нажмите кнопку «Посмотреть и скачать» и на открывшейся странице «Скачать».

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

Преобразует в необходимый формат любую загруженную с компьютера картинку.

Последовательность действий следующая: выбираем файл и нажимаем кнопку «Create Favicon».

Сервис, предоставляющий возможность создавать фавикон с надписью. Цветовая гамма настраивается в области «Colors», а текст надписи вводится в полях «Top text» и «Bottom tex».

Для скачивания готового значка следует кликнуть по миниатюрной надписи «save as favicon file».

От остальных отличается тем, что позволяет созданную иконку не скачивать (но можно и скачать), а оставить непосредственно на сервисе и получить ссылку к этому файлу.

Для создания фавикона выбираем файл и нажимаем «Upload Now».

Также в сети можно найти и другие генераторы, которые позволяют создать фавиконы с нуля или же доработать уже имеющееся изображение. В частности FavIcon from Pics, DeGraeve, Generator, Онлайн редактор иконок favicon.ico, Online Favicon, Free Favicon Generator и Фавикон-генератор. Стоит отметить, что все они бесплатные.

Можно не растрачивать силы на эксклюзивность и найти уже готовые иконки в интернете. Для этого существуют специальные галереи с коллекциями бесплатных фавиконов. Хотелось бы выделить:

  • Галерея иконок для сайта favicon.ico;
  • Iconj;
  • Favicon.cc;
  • The Favicon Gallery.

В них можно найти десятки тысяч мини-логотипов для своего проекта, как говорится на любой вкус и цвет.

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

Вы можете самостоятельно создать фавикон в фоторедакторе или же использовать онлайн сервисы.

  • Favicon Generator;
  • Favicon Generator ORG;
  • Dynamic Drive Favicon Tool;
  • Favigen;
  • Gen Favicon;
  • Degraeve Favicon.

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

Чтобы понять, какие вообще варианты фавиконок могут быть, изучите примеры на этих ресурсах:

  • Fresh Favicons;
  • The Favicon Gallery;
  • Delta Tango Bravo.

Проверьте сайт на ошибки SEO


Никакой favicon не влияет на удобство использования сайта, но отсутствие тегов Title и Description может привести к потере трафика.

Аудит сайта

Что такое фавикон и где он используется

Фавикон (favicon) — это в дословном переводе с англ. «значок для избранного» (FAVoritesICON). Именно так называются закладки в браузере Internet Explorer, где впервые стали использоваться визуальные иконки для быстрого поиска нужного сайта. 

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

Где же можно увидеть фавикон?

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

2. В истории просмотров браузера.

3. На панели закладок.

5. В десктопной и мобильной выдаче Яндекса — как в органике, так и в рекламных объявлениях.

6. В мобильной и десктопной выдаче Google. Фавиконы на мобильных экранах появились еще весной 2019 года, а вот в десктопной выдаче — буквально в первые недели 2020 года.  

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

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

Почему фавикон нужен каждому сайту

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

Наш инструмент «Анализ сайта», который проводит полный техосмотр вашего ресурса, в том числе проверяет и наличие фавикона. Вы можете проанализировать свой сайт, просто зарегистрировав аккаунт в SE Ranking.

Если фавикон есть, а аудит его не видит — значит, проблема с индексацией или адресом иконки. Проверьте все еще раз. 

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

Хороший фавикон — неотъемлемая часть бренда и технический стандарт каждого сайта, и точно стоит потраченного на него времени.   

Просмотры: 14 419

Почему не отображается favicon? Сейчас проверим

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

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

Чтобы узнать видят ли иконку любого сайта поисковики, даже не обязательно открывать сам сайт. Достаточно ввести в адресную строку браузера такой адрес: Для Яндекса — http://favicon.yandex.net/favicon/www.yandex.ru (меняем www.yandex.ru на свой домен). Для Гугла — http://www.google.com/s2/favicons?domain=www.google.com (вместо www.google.com подставляем имя проверяемого сайта).

Заметил, что Гугл показывает иконки не на всех сайтах. Например, вместо моей, так же, как и на некоторых других блогах, показывает значок земного шара, хотя мой фавикон давно отображается и в поиске Яндекса, и во всех браузерах

Поэтому я просто не обращаю на это внимание. Возможно, это связано с тем, что на этом блоге файл favicon.ico установлен с помощью настроек моей темы WordPress

Как добавить фавикон в Яндекс? Специально это делать никак не надо. Если вы добавили иконку размером 16х16 пикселей в корневую папку и корректно прописали к ней путь, то Yandex проиндексирует сайт специальным роботом и загрузит вашу картинку на свой сервер. Ждать, пока она появится в поиске раньше можно было долго, так как база фавиконок обновлялась редко. Сейчас, если дольше двух недель ваш фавикон не отображается в поиске Яндекса, надо проверить, корректно ли он оформлен.

Для начала советую сделать проверку с помощью сервисов-валидаторов, а затем воспользоваться рекомендациями Яндекса.

Проверяем наличие иконки сайта в сервисах Favicon Validator

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

ifavicon.com

Favicon Validator

Переходим по адресу http://ifavicon.com/tools/favicon-validator и проверяем свой фавикон.

Favicon генератор

Favicon Grabber

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

favicon.htmlkit.com — создание и проверка валидности Favicon

Этот сервис более популярен и имеет просто огромный функционал по созданию и проверке Favicon. Одной из его особенностей является большое количество редактируемых параметров изображения и возможность создавать иконки для iPhone, iPod Touch и iPad браузеров. Давайте в картинках и по порядку.

Создание Favicon

Можно сделать иконку из значка в Твиттере

или из любой картинки.

Загрузив изображение и нажав кнопку “Generate FavIcon.ico “, можно скачать статичный и анимированный фавикон или продолжить редактирование, тиснув на кнопку “Edit “.


Перед нами открываются все настройки редактирования. Чтобы перейти к нужной настройке, надо щелкнуть на соответствующий пункт. Покажу, как это выглядит с переводом в Хроме:

Если в нескольких словах, то можно:

  • добавить еще несколько изображений, которые остаются в памяти и можно в любой момент продолжить их редактирование;
  • написать текст для анимации (только на английском) или отключить ее;
  • сделать favicon для iPhone, iPad и iPod Touch;
  • задать цвет и прозрачночть фона и рамки;
  • преобразовать цветную картинку в черно-белую;
  • создать фавиконки разных форматов с разным количеством цветовых оттенков (например, 16-64K – иконка 16*16 с 64K цветов);
  • удалить ненужные форматы и скачать весь пакет, только файл favicon.ico или animated_favicon1.gif.

Все изменения отображаются в правой части экрана.

Чтобы очистить список созданных фавиконов и начать редактирование нового, надо нажать кнопку “New Icon ” в правом верхнем углу.

Есть подсказка, как установить анимированный фавикон вместе с обычным. При нажатии на кнопку “Загрузите “, скачается пакет со всеми фавиконами, где в файле ReadMe.txt будет подробная инструкция по их установке и необходимые коды.

В общем, советую всем попробовать этот сервис. Кроме всего, существует приложение для браузера Google Chrome, которое называется FavIcon from Pics . Ссылку не даю, так как целесообразность его установки вызывает сомнение. Все, что оно дает, это прямой переход на страницу с генератором фавиконов.

Как проверить Favicon

Получаем результат:

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

Если же ошибок не найдено, но все равно Яндекс не видит фавикон сайта, читайте статью Платона Щукина “Вся правда о фавиконках “. В ней он перечислил 5 причин, почему не отображается фавикон в поиске Яндекса. Если и эти рекомендации не помогут, то надо написать о своей проблеме Платону в службу поддержки.

Яндекс.Вебмастер не видит favicon и sitemap

Переход на HTTPS протокол, «вызывает» у обновленного инструмента Яндекс.Вебмастер, крайний «интерес». Яндекс заваливает меня письмами, что он чего то не видит, чего то не нашел. Первыми письмами были сообщения, что Яндекс вебмастер не видит favicon и sitemap сайта https.

Переход на безопасный протокол, сродни переезду на новый домен. Без редиректа сайта http на сайт https, у вас, по факту, два одинаковых сайта в двух разных каталогах: и (названия могут быть другие). Есть два мнения по оптимизации сайта на https:

1. Первое, нужно сразу сделать переадресацию сайта http на сайт https и выполнив работу в инструментах веб-мастеров, ждать индексации. Этот способ убьет тИЦ сайта до следующего апдейта и значительно снизит трафик.

2. Второе мнение, что не нужно сразу делать переадресацию сайта http на сайт https, а подождать полной индексации нового сайта https и после перенаправить http на https.

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

Напомню, что вы должны были сделать в Яндекс.Вебмастер, после перевода сайта на HTTPS (SSL).

  • Добавить сайт https:// в Яндекс.Вебмастер, как новый сайт.
  • Если вы сразу сделали редирект сайта http на сайт https, то после добавления сертифицированного сайта для подтверждения прав на сайт достаточно выбрать свой способ проверки сайта и нажать проверку.
  • Если вы пошли другим путем, и в целях сохранить трафик сайта, не стали сразу делать редирект и оставили в сети два сайта https и http, вам нужно подтвердить права на «новый» сайт https по всем правилам системы. Напомню, что безопасный сайт https лежит в каталоге .
  • После добавления нового сайта https в Яндекс.Вебмастер вам нужно сделать все настройки Яндекс.Вебмастер, который вы делали для сайта http: добавить карту сайта, проверить robots.txt, и т.д. и т.п.

Если вы предварительно всё это сделали, то велика вероятность, что письма, что Яндекс веб мастер не видит favicon и sitemap сайта https, придут с опозданием. Поэтому без ожидания писем, делаем проверки:

Поиск причин проблем связаны с отображением фавикона и вопросы к Платону.

Самое первое на что я погрешил, это на то, что блогу подключил SSL сертификат, тем самым перевел его на HTTPS протокол. При этом изначально в яндекс вебмастере не указал явное зеркало блога. И яндекс почитал что главным зеркалом является блог по HTTP протоколу. Свою ошибку я обнаружил только через 1,5 недели после запуска блога. Кстати по http протоколу фавикон отображался нормально.

В итоге я удалил из вебмастера свой блог, и добавил его повторно. Только при этом указал что главным зеркалом является блог именно по HTTPS протоколу. И вот тут обнаружил, что фавикона нет. Решил подождать пару дней, но он так и не появился. Тогда написал письмо Платону.

Ответ как вы видите пришел 18 августа. Сегодня уже 8 сентября, но фавикона в яндексе до сих пор нет.

Установить favicon на WP с помощью плагина

Единственный вменяемый плагин это “Favicon by RealFaviconGenerator”, особенность заключается в том, что он проставляет фото для всех устройств:

  • Mac
  • Iphone
  • Android
  • IOS
  • Surface

Устанавливаем стандартно и переходим к работе, в панели заходим Внешний вид > Favicon. В открывшемся окошке находим “Выберите из библиотеки мультимедиа”.

Откроется форма с выбором картинки, можете загрузить собственное или воспользоваться ранее сохраненными в WordPress. Не забудьте заранее оптимизировать фото под WP.

Библиотека медиафайлов

Далее нажимаем кнопку Генерировать.

Перекинет на официальный ресурс realfavicongenerator, если изображение выбрано правильно то нажимаем синюю кнопку “Continue with this picture”.

Подтверждение и продолжение процесса

Смотрим, как будет отображение на разных устройствах и браузерах, если все нормально, то перелистываем страницу вниз и нажимаем Generate your favicon and HTML code.

отображение на разных устройствах

Ждем пока сервис обработает запрос и автоматически перебросит обратно в админку WordPress. Для надежности обновляем Ctrl+F5 и любуемся на установленный значок, который корректно отображается на всех устройствах.

Проверка работы плагина

Как сделать фавикон

Традиционно в качестве иконки сайта используется изображение формата ICO размером 16 × 16 пикселей, размещенное в корневом каталоге как файл favicon.ico. Сейчас фавикон может иметь формат PNG, GIF, JPEG, SVG. Но так как поддержка может отсутствовать в каком-либо конкретном браузере или его версии, как правило, используют ICO. Размер, кроме стандартного, может быть 32 × 32, (не везде 60 × 60), 120 × 120.

Подобранное изображение должно:

  • ассоциироваться с сайтом и/или тематикой. Часто фавиконку создают на основе логотипа, чтобы она работала на брендинг организации, или подбирают что-то, связанное с темой, чтобы подчеркнуть релевантность, визуализировать концепцию, вызвать эмоцию и т. д.;
  • быть простым и понятным. Значок имеет скромные размеры и воспринимается при быстром просмотре, поэтому стоит избегать сложных форм, слишком мелких деталей, неоднозначных смыслов и пр.;
  • по возможности быть оригинальным. В интернете можно найти базы готовых иконок, но если выбрать ту, которая используется многими, особенно конкурентами, можно потерять в узнаваемости.

Скачанное, сконвертированное или разработанное изображение размещается в корневой папке сайта. Затем в код head нужно добавить ссылку на фавикон вида <link rel=»icon» href=»http://путь до файла» type=» image/формат»>.

Если используется файл формата ICO, то в type указывается image/x-icon или image/vnd.microsoft.icon.

Для браузера Internet Explorer используется особая ссылка, где вначале будет link rel=»shortcut icon».

Для корректного отображения на мобильных устройствах также могут потребоваться отдельные записи, например rel=»apple-touch-icon».

Дополнительное использование файлов больших размеров, например 120 × 120, способствует тому, чтобы возможность отображения фавиконки в разных местах, устройствах, браузерах была максимальной. Например, в устройствах на iOS иконки большого формата могут использоваться как значки приложений.

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

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


С этим читают