Иконка на сайт: Как сделать иконку сайта на вкладке

Это абзац.

Теперь сохраните файл index.html и перезагрузите его в браузере. Теперь вкладка вашего браузера должна отображать изображение фавикона слева от заголовка страницы.

Поддержка формата файла Favicon

В следующей таблице показаны поддерживаемые форматы файлов для изображения favicon:

Резюме главы

• Используйте элемент HTML для вставить фавикон

Тег ссылки HTML

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

Лучшие примеры

0168 Примеры HTML

| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Что такое Favicon, зачем он нужен вашему веб-сайту и как его создать

Подпишитесь на наши информационные бюллетени и дайджесты, чтобы получать новости, статьи экспертов и советы по SEO

Введите правильный адрес электронной почты

Спасибо за подписку!

11 минут чтения

31 января 2020 г.

Брендинг

SEO на странице

UX

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

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

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

Из Internet Explorer в поисковую выдачу Google

Еще в 1999 году значок значка был введен в Internet Explorer, чтобы помочь пользователям отличать веб-страницы, добавленные в закладки, от других. А поскольку страницы с закладками назывались (и, вероятно, до сих пор) «Избранными» в Internet Explorer, слова «избранное» и «значок» были смешаны вместе, чтобы создать новый термин.

1. В настоящее время фавиконки отображаются прямо над адресной строкой независимо от того, добавлен сайт в закладки или нет. И если у веб-сайта нет значка фавикона, то в браузере будет отображаться общий символ браузера.

2. Помимо адресной строки, фавиконки можно найти и в истории браузера.

3. Страницы с закладками также будут отмечены фавиконом на панели закладок.

4. С мая 2019 года Google использует фавиконы в мобильной выдаче, но вы не увидите этих значков в десктопной выдаче (пока она тестировалась некоторое время назад).

Фавиконы привлекают внимание пользователей и повышают узнаваемость бренда. Если пользователи пару раз зайдут на сайт с запоминающимся фавиконом, то в будущем они легко отличят его от других. Подумайте об известном бренде, с которым вы взаимодействуете ежедневно, например, Facebook или Twitter, и вы сможете легко представить его фавикон с закрытыми глазами.

Фавиконы Facebook и Twitter выглядят точно так же, как их соответствующие логотипы. Значит ли это, что все, что вам нужно для фавикона, — это свернуть изображение вашего логотипа и загрузить его на свой веб-сайт? Давайте углубимся во все технические детали и поговорим о том, что нужно для создания фавикона.

Технические требования для создания фавиконки

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

Но с чего же начать? Начните с выбора правильного формата и размера фавикона.

Формат фавиконки

Изначально все фавиконки создавались в виде файлов ICO — формата, разработанного Microsoft для хранения иконок программ Windows. Самым большим преимуществом этого формата является то, что он может хранить изображения разных размеров в одном файле.

В прошлом Internet Explorer поддерживал только этот формат файла, но современные веб-браузеры позволяют использовать значки PNG, а некоторые браузеры даже поддерживают значки GIF, JPEG и SVG.

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

Фавиконы в форматах файлов SVG, GIF и JPEG не так хороши с точки зрения совместимости с браузерами. Однако это может измениться в будущем. Формат SVG (масштабируемые векторные изображения) может стать новой нормой, поскольку его использование решит проблему создания нескольких фавиконов разного размера для всех популярных устройств. Таким образом, хотя в настоящее время только несколько браузеров поддерживают значки SVG, другие вполне могут скоро их догнать.

Чтобы узнать, какие форматы favicon поддерживаются разными браузерами, посетите веб-сайт Can I Use. Здесь вы можете увидеть, например, какие версии браузеров совместимы с иконками PNG и SVG.

Размер фавикона

Классический размер фавикона 16х16 пикселей, что соответствует 32х32 пикселя на экранах с высоким разрешением. В то время как Google использует 16x16px в своей мобильной поисковой выдаче, в его правилах говорится, что фавиконы такого размера не предоставляются. Вместо этого Google рекомендует создавать фавиконы с более высоким разрешением, кратным квадрату 48 пикселей. Итак, размер вашего фавикона должен быть 48x48px, 96x96px, 144x144px и так далее. Между тем, файлы SVG не обязательно должны иметь определенный размер.

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

png» size=»16×16″ type=»image/png»> (1 размер)

(2 размера)

Дополнительные рекомендации для фавиконки

Вот несколько общих рекомендаций от Google, которых вам следует придерживаться:

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

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

Обращение к Интернету за помощью в создании фавикона

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

Можно ли этого избежать?

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

1) Создать его в графическом редакторе типа Photoshop с помощью специального плагина Favicon.ico.

2) Оформить в специальных онлайн-сервисах (например, favicon.cc) и потом скачать оттуда в подходящем формате.

3) Использовать существующее изображение, например, вашего логотипа и загрузить его в онлайн-генератор фавиконов, таких как Favicon.io, Realfavicongenerator.net и т. д.

4) Загрузить готовые фавиконы из специальных баз данных, таких как Flaticon или Findicons с тысячами вариантов на выбор.

После загрузки сгенерированного фавикона вам останется только добавить его на свой сайт.

Украсьте свой сайт фавиконкой

Сначала загрузите свою фавиконку в корневой каталог сайта с помощью файлового менеджера, такого как Filezilla. Затем все, что вам нужно сделать, это вставить следующий фрагмент кода в метатег:

   
    ... 
     
     
    ... 
    

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

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

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

И пока вы будете это делать, задайте себе следующие вопросы:

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

Может ли анимированный GIF-фавикон помочь вам выделиться? Или это просто мозолит глаза поисковикам, создавая эффект, который (скорее всего) создаст впечатление, что ваш сайт еще не закончил загрузку.

Вы четко понимаете свой фавикон, когда он размером 16×16 пикселей? Старайтесь, чтобы ваш фавикон не содержал мелких деталей, а также не пытайтесь включить в него все мыслимые цвета.

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

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

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

Проверка вашего фавикона на наличие критических ошибок

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

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

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

Однако, если ваш значок не отображается корректно или вообще не отображается в Google по какой-либо причине, начните с проверки следующих вещей:

1. Находится ли графическое изображение в корневой папке ресурса в файле ICO, PNG или GIF формат?
2. Правильно ли написан код, ведущий к изображению на страницах ресурса?
3. Доступен ли файл фавикона для поисковых роботов?

Хочу отметить, что путь к изображению напрямую влияет на то, насколько хорошо отображается фавикон. Если вы хотите каким-либо образом удалить или отредактировать свой значок, все, что вам нужно сделать, это удалить или изменить файл favicon.ico (JPEG, GIF, PNG).

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

Почему без фавикона не обойтись

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

Если вам нужна помощь, обратитесь за помощью к нашему веб-сайту аудита.

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

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