Как сделать иконку поиска
Как создать фавиконку и подключить ее к сайту
Favicon (сокращение от Favorites Icon) — иконка с логотипом или первой буквой названия сайта, которая отображается на вкладках браузера, в списке закладок и в интерфейсе некоторых поисковых систем.
Этот мини-логотип, по сути, олицетворяет сайт и помогает пользователям быстрее отыскать его среди сохраненных страниц или в бесконечном списке открытых вкладок. Чтобы облегчить потенциальному посетителю эту задачу, каждому веб-ресурсу, от мелкого блога на WordPress до интернет-магазина с огромной аудиторией, нужны наглядные и узнаваемые Фавиконки.
Так Favicon выглядят на вкладках в браузере Safari:
А вот так в поисковой выдаче Яндекса:
Такие значки должны опираться на стилистику бренда, поэтому важно, чтобы они были с ним тесно связаны.
Вот, как это реализовано у Apple и Яндекса:
Далее разберемся, как сделать иконку сайта и подключить ее к нему.
Характеристики значков
Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.
Формат
Тут есть из чего выбирать:
.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах
Размер
Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:
Как сделать иконку для сайта HTML?
В лучшем случае вам все нарисует грамотный дизайнер, но если под рукой такого не нашлось, можно и самому склепать значок.
Рисуем Favicon в Sketch или Photoshop
Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:
То же самое можно сделать в Photoshop или условном Pixelmator, разве что интерфейсы настройки изображений и экспорта будут отличаться.
Преобразуем готовое изображение в фавиконку
Рисуем значок в браузере
Если нет Фотошопа или просто не нужен какой-то сложный дизайн, то можно на скорую руку нарисовать себе лого на сайте Favicon.cc. В этом случае все запредельно просто:
Тут же можно посмотреть, как нарисованная иконка выглядит в адресной строке браузера.
Конвертируем текст или эмоджи в значок
Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.
Но я попробую скачать иконку с эмоджи:
Как подключить Favicon к сайту?
Теперь, когда у меня есть фавиконка (неважно откуда), надо ее подключить. Для этого надо вставить в html-код основной страницы строчку, в который будут указаны тип ресурса, адрес и тип данных.
АТРИБУТ
ЗНАЧЕНИЕ
icon указывает на тип используемого ресурса.
Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.
Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.
Это самый простой способ. Естественно, файл со значком может называться как угодно и располагаться на внешнем сервере. Главное, корректно оформить код на сайте.
Представление сайта в поиске: настройка в Яндекс.Вебмастере
Чем больше информации о сайте показано в результатах поиска, тем чаще пользователи выбирают его. В этой статье мы рассмотрим рекомендации нового раздела Яндекс.Вебмастера « Представление в поиске » и научим управлять настройками отображения сайта в Вебмастере, чтобы пользователи не уходили на сайты конкурентов.
Раздел «Представление в поиске» в Яндекс.Вебмастер
Следование всем рекомендациям, которые мы дадим ниже, еще не гарантирует вам того, что настроенный специальный ответ или расширенный сниппет будут отображаться в поиске. Решение о показе принимает поисковый робот. Но работать над привлекательностью своего сайта в поисковой выдаче, безусловно, необходимо, т.к. это повышает трафик в разы, да и просто удобно для пользователей.
Список настроек в «Представления в поиске
Специальные ответы
Пример блока «Специальные ответы»
Колдунщик Турбо-страниц
Еще один элемент поиска, который выводится также справа от результатов выдачи. В этом блоке показываются турбо-страницы, которые отвечают на запрос пользователя. Увидеть колдунщик Турбо-страниц можно только в полной версии Яндекса.
Чтобы ваш сайт попал сюда – необходимо подключить турбо-страницы.
А чтобы подключить турбо-страницы, например, для интернет-магазина, нужно сделать следующее:
Загрузка файла YML
Организация
В этом блоке на странице выдачи показывается вся основная информация о компании. Здесь можно увидеть:
Но чтобы это увидеть – ваша компания должна быть добавлена в Яндекс.Справочник. Как это сделать смотрите в нашем видео.
Блок «Организация» на странице поиска в полной версии Яндекса
В мобильной версии блок «Организация» выглядит так:
Блок «Организация» на странице поиска в мобильной версии Яндекса
Новости
Если у вас новостной сайт, то есть шанс попасть в блок новостей на выдаче. Для этого нужно стать партнером Яндекс.Новостей и выполнить настройку для отправки новостей в данный сервис. Наверняка вы уже встречались с этим блоком, вводя фразу, наподобие «новости Брянска» и видели такое:
Пример блока новостей
Сниппет
Под сниппетом понимается блок информации, который отображается на странице результата поиска. Он состоит из двух основных частей: заголовка и описания, но может содержать дополнительную полезную информацию о сайте. Какую именно мы и рассмотрим ниже.
Заголовок и описание
Заголовок сайта на странице выдачи может формироваться из метатега Title, а описание из метатега Description.
Пример отображения Title на странице выдачи
К Description так же есть ряд требований со стороны Яндекса, а именно:
Пример отображения Description на странице выдачи
Favicon
Чтобы добавить фавиконку на сайт, сделайте следующее:
Вот где надо проверять корректность добавления фавиконки
Отображение фавиконки на странице поисковой выдачи
Знаки
Сайты, которые имеют большУю посещаемость и постоянный трафик, выделяются специальными знаками среди других в поиске. У каждого знака есть свои требования, которым должен соответствовать сайт, чтобы его получить.
Перечень всех знаков качества сайта, которые могут быть присвоены:
Перечислим основные принципы, по которым выдаются знаки:
Примеры знаков в выдаче:
Знаки «Популярный сайт» и «Официальный сайт»
Знак «Выбор пользователей»
Знак турбо-страницы сайта
Посмотреть знаки качества своего сайта можно нажав на треугольничке рядом и перейдя по ссылке “Информация о сайте”:
Ссылка «Информация о сайте»
HTTPS
Все сайты, которые используют защищенное соединение, получают специальный знак в виде замочка:
«Замочек» – значит сайт работает по https
Перевести сайт на протокол https можно получив SSL-сертификат и выполнив специальные настройки сервера.
Протокол https позволяет защитить персональные данные пользователей сайта от перехвата, а также от подмены контента в процессе загрузки страницы.
Картинки
В сниппет могут попасть картинки вашего сайта, если они размечены с помощью микроразметки Schema.org.
Пример отображения картинки в сниппетах
Чтобы внедрить микроразметку на сайт советуем обратиться за помощью к программистам, поскольку данная работа требует специальных знаний.
Быстрые ссылки
С помощью быстрых ссылок ваш сниппет выглядит более информативно и позволяет пользователю быстрее найти нужную информацию. Создаются такие ссылки автоматически для наиболее посещаемых разделов сайта.
Блок быстрых ссылок в сниппете сайта
Просмотреть и редактировать их можно в одноименном разделе Вебмастера:
Ссылка на раздел редактирования быстрых ссылок
Галерея статей
Если на сайте подключены турбо-страницы, то в сниппете сайта можете обнаружить галерею статей. Она представлена в виде ссылок на популярные материалы сайта.
Пример галереи статей для сайта obrazstroy.ru
В среднем для формирования такого сниппета потребуется около двух недель.
Товар
Товарный сниппет формируется при условии, что к сайту подключены турбо-страницы и в карточке товара имеется не менее пяти картинок. Показывается он при запросе конкретного товара и может содержать изображения, цену, информацию о доставке, характеристики и описание товара.
Пример товарного сниппета
Список товаров
В мобильной выдаче можно заметить списки товаров, которые выводятся с картинками, ценами и названиями популярных товаров. Такая галерея создается автоматически на страницах товарных категорий, но при условии, что на сайте подключены турбо-страницы.
Пример списка товаров на товарной странице интернет-магазина в мобильной выдаче
Рейтинг, телефон и адрес
У многих сайтов в поиске показывается адрес, телефон и даже рейтинг. Это очень полезно для пользователей и позволяет максимально быстро получить основную информацию о компании.
Пример сниппета с рейтингом, телефоном и адресом
Для чего всё это?
После внедрения всех вышеперечисленных возможностей от Яндекса вы можете увидеть красивый и эстетически привлекательный сниппет своего сайта в поиске. Сайт с таким сниппетом не останется незамеченным среди пользователей и обязательно получит новых посетителей.
Ну а если у вас возникли трудности или вы не хотите тратить время, то можете заказать бесплатную SEO-консультацию у наших специалистов.
Как поменять иконку сайта? Инструкция как сделать и установить иконку для сайта самостоятельно
Иконка веб сайта в браузере и в поисковике
Иконка сайта – это специальный значок сайта, который отображается в браузерах пользователей интернета. Данный инструмент получил название favicon.
Название «Favicon» — это английское сокращение от слов FAVorites ICON, что в переводе обозначает «значок для избранного». Иконка веб сайта в браузере отображается в адресной строке, непосредственно перед url-адресом страницы. Так же иконку веб сайта в браузере можно увидеть во вкладках и рядом с закладками.
Если же владелец ресурса никогда не задавался вопросом, как добавить иконку на сайт, то по умолчанию в качестве картинки будет отображаться значок браузера.
Помимо отображения в браузерах, Favicon отображается и в поисковиках: иконка сайта в Яндексе ставиться слева от названия ресурса, аккурат напротив цифры, показывающей место ресурса в выдаче по введенному пользователем поисковому запросу.
Итак, после того, как стало понятно, зачем нужна иконка для сайта и где она отображается, можно перейти к описанию того, как сделать иконку для сайта самостоятельно и как добавить ее на сайт.
Создание иконки для сайта
Иконки для сайта: размер 16х16 или 32х32?
Размер иконки сайта обычно составляет 16х16 пикселей, допускается так же использование размера 32х32. Но стоит учесть, что в браузере в любом случае рисунок будет уменьшен и приведен к формату 16х16 пикселей, так что не стоит даже пытаться втиснуть туда высокохудожественное изображение, его все равно не будет видно на маленьком значке, намного лучше будут смотреться читаемые буквы и логотипы.
Формат иконки для сайта
Все возможности поддержки браузерами форматов иконок для сайтов представлены ниже:
Когда картинка создана и сохранена в нужном формате, можно переходить к тому, как установить иконку на сайт.
Как добавить иконку на сайт? Установка иконки на сайт
Первым нужно сделать не что иное, как добавить иконку на сайт в прямом смысле слова. Нужно загрузить изображение иконки, сохраненное в выбранном формате, на сервер: в корневую папку сайта (обычно она называется public_html). Как загрузить иконку на сайт? Это можно сделать с помощью специальных программ, помогающих соединиться по FTP или же в менеджере файлов, через панель управления сайтом.
После того, как вставка иконки на сайт произведена, необходимо сделать так, чтобы изображение отображалось в браузере. Для установки иконки на сайт (отображения в браузере) необходимо прописать специальный код и поместить его в правильное место.
Html код иконки для сайта
Данный Html код иконки для сайта нужно вставить в произвольном месте между тегами и в файл страницы, на которую нужно поставить иконку.
Если вам нужна в wordpress иконка сайта, то необходимо отредактировать файл header.php, в который вставляется этот же код.
Итак, вы теперь знаете, как установить иконку на сайт самостоятельно.
Как поменять иконку сайта? замена иконки сайта
Если вас интересует, как изменить иконку сайта, значит, она уже есть у вас на сайте. Смена иконки сайта осуществляется практически по той же схеме, что и добавление. Для замены иконки сайта первым делом также необходимо нарисовать новую картинку и сохранить ее в нужном формате. Далее сохраненное изображение добавляется на сайт в корневую папку. После этого необходимо найти файл, где уже есть прописанный html код иконки для сайта между тегами и проверить его правильность. Если в коде прописаны верный путь к новой картинке, а так же ее название и формат, то браузер будет отображать изображение на вкладках, сразу после сохранения файла и обновления страницы.
Итак, теперь вы знаете и как сменить иконку сайта на новую.
Подробное руководство по фавикону для сайта
В статье:
Что такое фавикон
Favicon (от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.
Сайты с фавиконами в выдаче Яндекса
В Google фавиконки не отображаются. Поисковик периодически тестирует эту функцию, так что они могут появиться в будущем.
Фавиконки в выдаче Google (тест)
Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.
Зачем нужен фавикон
Посмотрим, для чего нужен файл favicon.ico и можно ли без него обойтись. Иногда на форумах новички спрашивают, дает ли использование favicon.ico бонусы при продвижении. Фавикон никак не влияет на оптимизацию и ранжирование, тем не менее, у него есть другие плюсы.
Favicon привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает.
Сайт без фавикона в выдаче среди прочих
Иконка для сайта — элемент бренда. Пользователь лучше запомнит логотип из фавикона и свяжет его с брендом, если будет видеть его на сайте и других площадках.
Логотип компании в фавиконе
В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.
Закладки в Google Chrome
Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.
Какую картинку выбрать для фавикона
Если сайт представляет компанию, в фавикон лучше поставить логотип бренда или его фрагмент, если логотип сложный, детализированный или вытянутый. Если логотипа нет, подберите изображение и цветовую гамму по ассоциации с тематикой сайта.
Фавикон с чашкой для сайта о кофе выглядит гармоничнее
Раньше любая иконка бросалась в глаза, потому что не все сайты их ставили. Сейчас выделиться сложнее, по запросу «как варить кофе» сайт без фавикона нашелся только на восьмой странице. Привлечь внимание лучше яркой контрастной иконкой, иногда для этого ставят стрелку, указывающую на сайт.
Фавикон в выдаче, на вкладках браузера и в закладках очень маленького размера. Детализированное изображение никто не разглядит. Подберите картинку, где будет минимум деталей, два-три цвета, однозначное прочтение смысла.
Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.
Как создать favicon для сайта
Есть три самых распространенных способа:
Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.
Панель бесплатного генератора фавикона
Как установить фавикон на сайт
Атрибут «rel» указывает на тип ресурса. Большинство браузеров распознают «icon», для Internet Explorer нужен «shortcut icon».
От формата файла зависит тип передаваемых данных. Для ICO это «image/x-icon» или «image/vnd.microsoft.icon», для PNG — «image/png» и аналогично для других форматов.
Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel=»apple-touch-icon».
Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.
Как установить разные favicon для отдельных страниц
Разным страницам сайта можно указать разные фавиконки, чтобы они различались на вкладках. К примеру, веб-мастер может установить разные цвета одной иконки для блога, каталога и форума или для главной и разных сервисов, как у PR-CY:
Фавиконы на разных разделах одного сайта
Как установить разные фавиконки разделам сайта:
Размеры фавиконов для браузеров и устройств
С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.
Если мобильный пользователь захочет добавить ссылку на сайт на главный экран смартфона, в Android и iOS иконкой для ссылки станет фавикон.
Фавиконы сайтов на экране смартфона
Если это возможно, ориентируйтесь на каждую платформу, с которой пользователи могут открыть сайт.
Достаточный пакет фавиконок для популярных браузеров
Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.
Этот пакет обеспечит нормальный внешний вид фавиконок на разных платформах. В остальных случаях система масштабирует до нужного размера.
Дополнительно можно добавить файлы для мобильных устройств.
Android
Манифест указывают с помощью:
С помощью файла-манифеста у сайта, который пользователь вынес на главный экран смартфона, будет настроенный качественный фавикон.
Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:
Apple
Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.
В rel нужно указать “apple-touch-icon.png”.
Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.
Настраивают с помощью link rel=»mask-icon».
Edge и IE 12
Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.
У Microsoft есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.
Зачастую для сайта хватит фавикона одного или трех размеров, чтобы они выглядели нормально. Но лучше уделить немного времени и отдельно прописать файлы для разных ОС и браузеров, чтобы фавикон выглядел качественно на любом устройстве в выдаче поисковика, на вкладке, панели закладок и на экране смартфона.