Как сделать favicon: самый подробный гайд — Сервисы на vc.ru

14.03.2023 Facebook Twitter LinkedIn Google+ Разное

Фавикон – его значение, создание favicon для сайта

Последнее обновление: 17 октября 2022 года

46067

О чем статья:

  • Что такое фавикон и каких форматов он бывает

  • Какие требования предъявляют разные платформы

  • С помощью каких инструментов можно создать иконку

  • Можно ли не создавать фавикон и как это повлияет на выдачу


Что такое фавикон 

Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта.

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

Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках. 

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

Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .png и .svg. Формат .svg используется в Safari MacOS, а .png — в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpeg и .gif, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.

С помощью сервиса caniuse.com можно проверить поддержку браузерами разных типов фавиконов. Современные сайты переходят на форматы фавиконов в .svg и .png, так как те мало весят и хорошо отображаются.. 



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

Фавиконки отображаются на пустой стартовой странице Google


Особенности фавиконов для разных платформ

Десктоп

Несмотря на то, что формат .ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .png не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию .ico и .png форматов фавиконок. Размеры иконок: Google рекомендует устанавливать иконки, размеры которых кратны 48 пикселям.

Т.е. 48х48, 96х96, 144х144. Или использовать формат .svg, который не имеет конкретного размера. Яндекс указывает в Справке, что рекомендуемые размеры favicon: 120х120 пикселей – именно такая иконка выглядит четче и заметнее в его сервисах, а также 16х16, 32х32 пикселей. Из всех форматов рекомендуемый – также .svg.


Если вы используете формат .ico, мультиразмерную иконку удобно создавать в сервисе icoconvert или аналогичном. В настройках выберите следующие размеры: 16х16; 32х32; 48х48 пикселей. Andriod, Chrome и Opera Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.

Так выглядят фавиконы в мобильной версии браузера Google Chrome


Andriod, Chrome и Opera

Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате . png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png. 

Если вы хотите, чтобы иконку вашего сайта можно было сохранить на домашнем экране телефона, планшета и даже телевизора теперь, создайте файл .png размером 192х192 пикселя и веб-манифест – текстовый файл JSON, который предоставляет информацию о приложении. Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге <head> таким образом:
<link rel=”manifest” href=”/site.webmanifest”>

В манифесте есть ключ icons. Он принимает список иконок, их размеры и форматы. Если его не указать, браузер будет искать в коде такие варианты, как favicon.ico, <link rel=”icon” или, в крайнем случае, использует скриншот страницы.

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

Если сохранить сайт на домашнюю страницу мобильного устройства, favicon будет выглядеть, как приложение

Mac OS и iOS Safari Web Clip

Для корректного отображения в Mac OS favicon нужно создавать в формате . svg. Тогда иконка корректно отобразится при закреплении вкладки в браузере Safari. При создании фавикона, его нужно сделать простым, плоским и убрать все тени.
Для iOS Safari создают apple touch icon – фавикон в формате .png размером 180х180 пикселей. Как и в ОС Android, страницу сайта можно сохранить на экран мобильного устройства, и иконки в этом случае будут выглядеть как приложение. Такая ссылка называется Web Clip.

При создании фавикона для iOS помните, что уголки иконки будут автоматически скруглены, поэтому отступите от краев примерно по 4 пикселя с каждой стороны.

Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .png и в высоком разрешении.

Размеры фавиконов для разных экранов устройств Apple:
  Ретина версия 6 и ниже  Ретина версия 7  Не ретина версия 6 и ниже  Не ретина версия 7 
iPhone  144х144  120х120  57х57  60х60 
iPad  144х144  152х152  72х72  76х76 

Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.



Другие варианты 

Android TV (до 2014 г. – Google TV) 
 Opera Coast 
96х96  228х228 

Как создать?

Для создания фавикона используйте графические редакторы или специальные сервисы. 

Adobe Photoshop или Figma

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

Realfavicongenerator.net – генерирует фавикон разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки. 


Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.


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

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

Как установить 

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

Делайте кроссплатформенные иконки. Пропишите правильно размеры и форматы для разных мобильных платформ и браузеров. Современные роботы и браузеры при отображении выбирают наиболее подходящий формат из загруженных. Он будет отображаться лучше, чем при ресайзе, когда фавикон загружен один и его приходится изменять под требуемые размеры. Воспользуйтесь сервисом realfavicongenerator.net.

Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата .ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку.

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

Десктоп (ico) — <link rel=»icon» type=»image/ico» href=»favicon.ico»>

Декстоп (png) — <link rel=»icon» type=»image/png» href=»favicon.png»>

Apple — <link rel=»apple-touch-icon» href=»apple-touch-favicon.png»>

Safari — <link rel=”mask-icon” href=”icon.svg”>

Андроид — <link rel=»shortcut icon» href=»favicon.png»>

Иконки в устройствах Apple всегда закругляются по углам, чтобы этого избежать используйте apple-touch-icon-precomposed вместо apple-touch-icon.

Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта: 

  • в Яндекс — http://favicon.yandex.net/favicon/mysite.ru

  • в Google — http://www.google.com/s2/favicons?domain=mysite.ru.

Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.

Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.

Статья

Как пользоваться Яндекс. Вордстат: инструкция с примерами

#SEO

Статья

Как маркетплейс OZON работает над продвижением в поиске

#SEO

Статья

Что представляет из себя технический аудит сайта

#SEO

Запомните

  1. Формат.ico устаревает. И Google, и Яндекс рекомендуют и использовать форматы .svg и .png. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse. com.
  2. Раньше было достаточно создать один размер фавикона 16х16 пикселей. Сейчас делайте иконки во всех размерах. Если создали фавикон одного размера, то многие браузеры смогут перевести его нужный размер, но не исключены ошибки и некорректное отображение. Если в коде будут прописаны все размеры, то браузер подтянет нужный.

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

  4. Чтобы сделать favicon, воспользуйтесь графическими редакторами – Adobe Photoshop или Figma. Или специальными сервисами: realfavicongenerator.net, favicon.cc и аналогичными. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ.

  5. Положите созданную фавиконку в корневой каталог сайта или пропишите ссылку в теге <head>. Если вам нужны разные иконки для каждого раздела сайта, прописывайте их на каждой странице.

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

  7. Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков.

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

Создание favicon для сайта 2020 / Хабр

Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?

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

О каких платформах пойдет речь в этой статье?


  • Десктопные браузеры
  • Chrome на Android
  • Иконка закладки в iOS (PWA)
  • macOS
  • Windows


Десктопные браузеры

Начнем, пожалуй, с классического десктопа.

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

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Chrome на Android

Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.

Сам файл манифеста формата json и объявляется следующей строкой:

<link rel="manifest" href="…/manifest.json">

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.

{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.

Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

Иконка закладки в iOS (PWA)

iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.

Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.

Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.

При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.

Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

macOS

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

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

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

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

Windows

С Windows нужно немного запариться, чтобы сделать хорошо.

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).

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

<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">

Данной строкой мы указываем цвет фона плитки:

<meta name="msapplication-TileColor" content="#2b5797">

Можно указать имя вашего веб-сайта:

<meta name="application-name" content="My Application">

Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:

<meta name="msapplication-config" content="…/browserconfig.xml">

Сам файл будет выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="…/mstile-70x70.png"/>
            <square150x150logo src="…/mstile-150x150.png"/>
            <square310x310logo src="…/mstile-310x310.png"/>
            <wide310x150logo src="…/mstile-310x150.png"/>
            <TileColor>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>

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

В следующем списке приведены некоторые рекомендации по использованию различных размеров:

  • Small — 70×70 (Рекомендуемый размер: 128×128)
  • Medium — 150×150 (Рекомендуемый размер: 270×270)
  • Wide — 310×150 (Рекомендуемый размер: 558×270)
  • Large — 310×310 (Рекомендуемый размер: 558×558)

Например, для картинки 70х70 рекомендуемый размер 128х128. Это означает, что нужно создать картинку с прозрачным фоном размером 128х128, название которой будет mstile-70×70. То же самое нужно проделать с остальными размерами.

Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120. png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">
<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

Генератор Favicon — Emoji to Favicon

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

Emoji Favicons

Графика emoji взята из проекта с открытым исходным кодом Твемодзи. Авторские права на графику принадлежат Twitter, Inc и другим компаниям, 2020 г. участники. Графика лицензирована CC-BY 4.0. Вы должны просмотреть лицензию перед использованием в своем проекте.

Категории

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

Preview Name Category
alien smileys & emotion
alien monster smileys & emotion
anger symbol smileys и эмоции
злое лицо смайлики и эмоции
злое лицо с рогами smileys & emotion
anguished face smileys & emotion
anxious face with sweat smileys & emotion
astonished face smileys & emotion
сияющее лицо с улыбающимися глазами смайлики и эмоции
бьющееся сердце смайлики и эмоции
black heart smileys & emotion
blue heart smileys & emotion
bomb smileys & emotion
broken heart smileys & эмоции
коричневое сердце смайлики и эмоции
кот со слезами радости Smileys & Emotion
Кошка с кривой улыбкой Смайты и эмоции
Clown Face Smileys & Emoth столкновение смайлики и эмоции
растерянное лицо смайлики и эмоции
confused face smileys & emotion
cowboy hat face smileys & emotion
crying cat smileys & emotion
crying face smileys & emotion
мчаться смайлики и эмоции
разочарованное лицо смайлики и эмоции
disguised face smileys & emotion
dizzy smileys & emotion
dizzy face smileys & emotion
downcast face with sweat смайлики и эмоции
слюни смайлики и эмоции
взрывающаяся голова smileys & emotion
expressionless face smileys & emotion
eye in speech bubble smileys & emotion
face blowing a kiss smileys & emotion
лицо смакует еду смайлики и эмоции
лицо кричит от страха смайлики и эмоции
face vomiting smileys & emotion
face with hand over mouth smileys & emotion
face with head bandage smileys & emotion
лицо с медицинской маской смайлики и эмоции
лицо с моноклем смайлики и эмоции
face with open mouth smileys & emotion
face with raised eyebrow smileys & emotion
face with rolling eyes smileys & emotion
face with пар из носа смайлики и эмоции
лицо с символами на губах смайлики и эмоции
face with tears of joy smileys & emotion
face with thermometer smileys & emotion
face with tongue smileys & emotion
face without mouth смайлики и эмоции
испуганное лицо смайлики и эмоции
покрасневшее лицо smileys & emotion
frowning face smileys & emotion
frowning face with open mouth smileys & emotion
ghost smileys & emotion
гоблин смайлики и эмоции
зеленое сердце смайлики и эмоции
grimacing face smileys & emotion
grinning cat smileys & emotion
grinning cat with smiling eyes smileys & emotion
grinning face smileys и эмоции
улыбающееся лицо с большими глазами смайлики и эмоции
улыбающееся лицо с улыбающимися глазами smileys & emotion
grinning face with sweat smileys & emotion
grinning squinting face smileys & emotion
growing heart smileys & emotion
не слышишь злой обезьяны смайлики и эмоции
сердечко украшение смайлики и эмоции
heart exclamation smileys & emotion
heart with arrow smileys & emotion
heart with ribbon smileys & emotion
hole смайлики и эмоции
горячее лицо смайлики и эмоции
обнимающее лицо smileys & emotion
hundred points smileys & emotion
hushed face smileys & emotion
kiss mark smileys & emotion
целующийся кот смайлики и эмоции
целующееся лицо смайлики и эмоции
kissing face with closed eyes smileys & emotion
kissing face with smiling eyes smileys & emotion
left speech bubble smileys & emotion
loudly crying лицо смайлики и эмоции
любовное письмо смайлики и эмоции
лежащее лицо smileys & emotion
money mouth face smileys & emotion
nauseated face smileys & emotion
nerd face smileys & emotion
нейтральное лицо смайлики и эмоции
людоед смайлики и эмоции
orange heart smileys & emotion
partying face smileys & emotion
pensive face smileys & emotion
persevering face smileys & emotion
куча какашек смайлики и эмоции
умоляющее лицо смайлики и эмоции
pouting cat smileys & emotion
pouting face smileys & emotion
purple heart smileys & emotion
red heart smileys и эмоции
облегченное лицо смайлики и эмоции
вращающиеся сердца smileys & emotion
right anger bubble smileys & emotion
robot smileys & emotion
rolling on the floor laughing smileys & emotion
грустное, но облегченное лицо смайлики и эмоции
не вижу злой обезьяны смайлики и эмоции
shushing face smileys & emotion
skull smileys & emotion
skull and crossbones smileys & emotion
sleeping face smileys и эмоции
сонное лицо смайлики и эмоции
слегка нахмуренное лицо smileys & emotion
slightly smiling face smileys & emotion
smiling cat with heart eyes smileys & emotion
smiling face smileys & emotion
улыбающееся лицо с ореолом смайлики и эмоции
улыбающееся лицо с глазами-сердечками smileys & emotion
smiling face with hearts smileys & emotion
smiling face with horns smileys & emotion
smiling face with smiling eyes smileys & emotion
улыбающееся лицо в солнечных очках смайлики и эмоции
улыбающееся лицо со слезами smileys & emotion
smirking face smileys & emotion
sneezing face smileys & emotion
sparkling heart smileys & emotion
не говори злой обезьяны смайлики и эмоции
речевой шар смайлики и эмоции
squinting face with tongue smileys & emotion
star struck smileys & emotion
sweat droplets smileys & emotion
thinking face смайлики и эмоции
шар мыслей смайлики и эмоции
усталое лицо smileys & emotion
two hearts smileys & emotion
unamused face smileys & emotion
upside down face smileys & emotion
усталый кот смайлики и эмоции
усталое лицо смайлики и эмоции
white heart smileys & emotion
winking face smileys & emotion
winking face with tongue smileys & emotion
woozy face smileys & emotion
взволнованное лицо смайлики и эмоции
зевающее лицо смайлики и эмоции
yellow heart smileys & emotion
zany face smileys & emotion
zipper mouth face smileys & emotion
zzz smileys и эмоции

HTML Favicon

❮ Назад Далее ❯

Фавикон — это небольшое изображение, отображаемое рядом с заголовком страницы на вкладке браузера.

Как добавить фавиконку в HTML

Вы можете использовать любое понравившееся вам изображение в качестве фавиконки. Вы также можете создать свой собственный favicon на таких сайтах, как https://www.favicon.cc.

Совет: Фавикон — это маленькое изображение, поэтому оно должно быть простым и контрастным.

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

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

Затем добавьте элемент в файл index.html, после элемента </code>, например:</p><h4><span class="ez-toc-section" id="i-12"> Пример </span></h4><p data-readability-styled="true"> <!DOCTYPE html> <br/><html> <br/><head> <br/>  <title>Моя страница Заголовок
  ico»>

Это Заголовок


Это абзац.


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

Поддержка формата файла фавикона

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

Браузер ИКО PNG GIF JPEG СВГ
Край Да Да Да Да Да
Хром Да Да Да Да Да
Firefox Да Да Да Да Да
Опера Да Да Да Да Да
Сафари Да Да Да Да Да

Резюме главы

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

Тег ссылки HTML

Тег Описание
<ссылка> Определяет связь между документом и внешним ресурсом

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

Comments
Leave Comment