Содержание

создать и установить иконку на сайт

Иконка веб сайта в браузере и в поисковике

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

<link rel=»SHORTCUT ICON» href=»/favicon.ico» type=»image/x-icon»>

Название «Favicon» — это английское сокращение от слов FAVorites ICON, что в переводе обозначает «значок для избранного». Иконка веб сайта в браузере отображается в адресной строке, непосредственно перед url-адресом страницы. Так же иконку веб сайта в браузере можно увидеть во вкладках и рядом с закладками.

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

Помимо отображения в браузерах, Favicon отображается и в поисковиках: иконка сайта в Яндексе ставиться слева от названия ресурса, аккурат напротив цифры, показывающей место ресурса в выдаче по введенному пользователем поисковому запросу.

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

Создание иконки для сайта

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

Как еще сделать иконку для сайта? Весьма популярно

создание иконки для web сайта с помощью специальных программ, позволяющих редактировать изображения по своему усмотрению. Обычно программы отличаются между собой инструментами, встроенным функционалом и, конечно, пользовательским интерфейсом. Одни программы для создания иконок на сайт позволяют одновременно редактировать несколько картинок, другие дают возможность использовать градиентную заливку или 3D эффекты, а третьи имеют простой и понятный интерфейс. Скачать программу для создания иконок можно как здесь, выбрав любую из предложенных, так и поискав в поисковиках:

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

Для того, чтобы сохранить нарисованную иконку для сайта в фотошопе, нужно нажать «сохранить как» и выбрать специальный формат .ico.
Если вы не обнаружили у себя этот формат, не отчаивайтесь — просто стандартный набор форматов изображений Photoshop’а не включает его в себя. Но его очень легко добавить, достаточно лишь скачать плагин ico-формата и распаковать его в папку C:ProgramFilesAdobeAdobePhotoshopCS2Plug-InsFileFormats, после чего при сохранении изображений командой «Сохранить как» в списке доступных форматов появится строчка ICO (Windowsicon)(*.ICO).

Иконки для сайта: размер 16х16 или 32х32?

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

Формат иконки для сайта

На сегодняшний день универсальным форматом иконки для сайта считается формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari. Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF их поддерживают все браузеры, кроме Internet Explorer’а. А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera.

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

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

Как добавить иконку на сайт? Установка иконки на сайт

Первым нужно сделать не что иное, как добавить иконку на сайт в прямом смысле слова. Нужно загрузить изображение иконки, сохраненное в выбранном формате, на сервер: в корневую папку сайта (обычно она называется public_html). Как загрузить иконку на сайт? Это можно сделать с помощью специальных программ, помогающих соединиться по FTP или же в менеджере файлов, через панель управления сайтом.

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

Html код иконки для сайта

<link rel=»SHORTCUT ICON» href=»/favicon.ico» type=»image/x-icon»>

Обратите внимание на тип картинки иконки, его нужно прописывать в «type».
Например, если у вас картинка иконки имеет формат GIF, тогда код будет выглядеть следующим образом:

<link rel=»SHORTCUT ICON» href=»/favicon.gif» type=»image/gif»>

Данный Html код иконки для сайта нужно вставить в произвольном месте между тегами <head> и </head> в файл страницы, на которую нужно поставить иконку.

Если вам нужна в wordpress иконка сайта, то необходимо отредактировать файл header.php, в который вставляется этот же код.
Итак, вы теперь знаете, как установить иконку на сайт самостоятельно.

Как поменять иконку сайта? замена иконки сайта

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

Итак, теперь вы знаете и как сменить иконку сайта на новую.

 


Статьи по теме:

Самостоятельное продвижение сайтов в Интернете
Как закрыть внешние ссылки от индексации

Как подобрать ключевые слова на сайт
Где взять контент для сайта
Какой URL добавить на страницу

favicon.ico и другие форматы, поддержка браузерами

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

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

Рядом с именем сайта во вкладке браузера

В списке закладок

Как иконка запуска на домашнем экране устройства и десктопа

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

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

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

Что такое формат favicon .ico (ICO)?

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

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

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

<link rel=»shortcut icon» href=»/favicon.ico» /> <link rel=»icon» type=»image/vnd.microsoft.icon» href=»/favicon.ico»> <link rel=»icon» type=»image/x-icon» href=»/favicon.ico»> <link rel=»icon» href=»/favicon.ico» />

<link rel=»shortcut icon» href=»/favicon.ico» />

<link rel=»icon» type=»image/vnd.microsoft.icon» href=»/favicon.ico»>

<link rel=»icon» type=»image/x-icon» href=»/favicon.ico»>

<link rel=»icon» href=»/favicon.ico» />

Принимаются и другие форматы изображений, так как favicon больше не ограничен форматом ICO:

<link rel=»icon» type=»image/gif» href=»/image.gif»> <link rel=»icon» type=»image/png» href=»/image.png»>

<link rel=»icon» type=»image/gif» href=»/image.gif»>

<link rel=»icon» type=»image/png» href=»/image.png»>

Подключение иконок через Web App Manifest: manifest.json

Вместе с Progressive Web Apps (PWAs) вы часто будете слышать про файл manifest.json. Файл manifest.json – это JSON файл, позволяющий настраивать внешний вид и запускать действия веб-приложения, которое добавлено в закладки или на домашний экран устройства.

manifest.json позволяет настраивать ряд параметров, среди которых внешний вид иконки, используемой для запуска веб-приложения.

Более подробно о manifest.json и его возможностях читайте в нашей статье manifest.json.

Favicon на домашнем экране устройства Android

Манифест содержит свойство массива icons, с помощью которого можно задавать список объектов изображений, каждое из которых может обладать свойствами src, sizes и type, описывающими иконку.

Файл manifest.json с двумя иконками может выглядеть следующим образом:

{ «name»: «mobiForge», «short_name»: «mobiForge», «icons»: [ { «src»: «/icon-144×144.png», «sizes»: «144×144», «type»: «image/png» }, { «src»: «/icon-192×192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

{

    «name»: «mobiForge»,

    «short_name»: «mobiForge»,

    «icons»: [

        {

            «src»: «/icon-144×144.png»,

            «sizes»: «144×144»,

            «type»: «image/png»

        },

        {

            «src»: «/icon-192×192.png»,

            «sizes»: «192×192»,

            «type»: «image/png»

        }    

    ],

    «theme_color»: «#ffffff»,

    «background_color»: «#ffffff»,

    «display»: «standalone»

}

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

<link rel=»manifest» href=»/manifest.json»>

<link rel=»manifest» href=»/manifest.json»>

Подключение иконок через файл browserconfig.xml

browserconfig.xml – это XML файл, с помощью которого можно задавать иконки для Microsoft Windows. Он также размещается в корне сайта. Его код:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <square310x310logo src=»/mstile-310×310.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<browserconfig>

    <msapplication>

        <tile>

            <square150x150logo src=»/mstile-150×150.png»/>

            <square310x310logo src=»/mstile-310×310.png»/>

            <TileColor>#da532c</TileColor>

        </tile>

    </msapplication>

</browserconfig>

Нас интересуют здесь тег tile и его дочерние элементы. Код сверху определяет иконку с двумя размерами 150×150 и 310×310. Подробнее об этих размерах позже.

Так много способов подключения иконки – какой использовать?

Столько способов подключения favicon. Вы спросите: «какой же использовать?». Теперь самое забавное – все! ОК, весело? Не совсем.

Почему столько много способов подключения favicon?

Ранее мы говорили, что почти все браузеры поддерживают favicon.ico 16×16 и 32×32 в корневой папке. Так почему бы не пойти этим путем? Нам нужно поддерживать разные платформы и плотность пикселей на экране, чтобы иконка всегда хорошо смотрелась на разных размерах и в разных контекстах.

Во-первых, иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.

На мобильных ОС, например, нужно также подготовить иконку для отображения на домашнем экране. У каждой ОС свои особенности и набор предпочтительных размеров иконок для разных размеров экрана. Файлы Web App Manifest и browserconfig.xml дают разработчику больше контроля над представлением и запуском сайта на разных платформах.

Какие размеры favicon использовать?

У нас есть разные способы подключения иконок. Давайте узнаем, какие размеры использовать. С появления атрибута sizes в HTML5 теперь можно указывать favicon в формате PNG:

<link rel=»icon» type=»image/png» href=»/icon-16.png»> <link rel=»icon» type=»image/png» href=»/icon-32.png»>

<link rel=»icon» type=»image/png» href=»/icon-16.png»>

<link rel=»icon» type=»image/png» href=»/icon-32.png»>

Рекомендации Chrome

На сайте Google developers рекомендуют использовать для Chrome максимальный размер 192×192px.

<link rel=»icon» type=»image/png» href=»icon-192.png»>

<link rel=»icon» type=»image/png» href=»icon-192.png»>

Изображение будет автоматически уменьшено до необходимого размера.

Однако если вам нужно больше контроля, и вы сами предпочитаете масштабировать изображения, а не оставлять это браузеру, можете предоставить свои собственный иконки кратные 48px.

Мы получаем следующие размеры:

48×48

96×96

144×144

192×192

Другой источник Google developer для заставок Add to homescreen рекомендует разрешение еще больше. Поэтому можно добавить 256, 384 и 512:

256×256

384×384

512×512

Разметка со всеми этими favicon будет выглядеть так:

<link rel=»icon» type=»image/png» href=»icon-48.png»> <link rel=»icon» type=»image/png» href=»icon-96.png»> <link rel=»icon» type=»image/png» href=»icon-144.png»> <link rel=»icon» type=»image/png» href=»icon-192.png»> <link rel=»icon» type=»image/png» href=»icon-256.png»> <link rel=»icon» type=»image/png» href=»icon-384.png»> <link rel=»icon» type=»image/png» href=»icon-512.png»>

<link rel=»icon» type=»image/png» href=»icon-48.png»>

<link rel=»icon» type=»image/png» href=»icon-96.png»>

<link rel=»icon» type=»image/png» href=»icon-144.png»>

<link rel=»icon» type=»image/png» href=»icon-192.png»>

<link rel=»icon» type=»image/png» href=»icon-256.png»>

<link rel=»icon» type=»image/png» href=»icon-384.png»>

<link rel=»icon» type=»image/png» href=»icon-512.png»>

Рекомендации Safari

Apple рекомендует следующие размеры иконок:

120×120: iPhone

152×152: iPad

167×167: iPad Retina

180×180: iPhone Retina

Их можно подключить через тег link. Получается:

<link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»>

Оптимальные размеры для старых устройств на iOS:

57×57

60×60

72×72

76×76

114×114

<link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»>

Их также моно разместить в корневой папке с именами типа apple-touch-icon-180×180.png и apple-touch-icon.png, и Safari iOS автоматически найдет правильную иконку.

Тем не менее, другие платформы тоже могут использовать иконки iOS, поэтому лучше задать их явно через теги link.

Закрепленные вкладки в Safari

Safari использует SVG иконки на закрепленных вкладках. Для этого используется SVG изображение (поэтому размер пикселей неважен):

<link rel=»mask-icon» href=»/pinned-tab-icon.svg» color=»#ff0000″>

<link rel=»mask-icon» href=»/pinned-tab-icon.svg» color=»#ff0000″>

Плитки Microsoft Windows

Даже если вы не хотите заботиться об ОС Windows Phone mobile (на это есть хорошая причина, она была заморожена), вам все еще нужно думать об иконках на плитках Windows. Они используются в Windows 8 и выше, на планшетах, ноутбуках и ПК.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Плитки Microsoft Windows

Windows 8 и выше использует формат плитки для отображения иконок. Руководство по их проектированию довольно сложное. Мы лишь рассмотрим необходимые размеры.

Базовые размеры плитки, определенные Microsoft:

70×70 (маленькая плитка)

150×150 (средняя плитка)

310×150 (широкая плитка)

310×310 (большая плитка)

В Windows 8.0 и IE 10 плитку 144×144 можно задать в разметке так:

<meta name=»msapplication-TileColor» content=»#ff0000″> <meta name=»msapplication-TileImage» content=»/ms-tile-144.png»>

<meta name=»msapplication-TileColor» content=»#ff0000″>

<meta name=»msapplication-TileImage» content=»/ms-tile-144.png»>

С версии 8.1 можно использовать файл browserconfig.xml и не писать это в head.

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

Наш browserconfig.xml теперь ссылается на изображения плиток, увеличенные на 1.8, и выглядит следующим образом:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square70x70logo src=»/ms-tile-126.png»/> <square150x150logo src=»/ms-tile-270.png»/> <wide310x150logo src=»/ms-tile-558×270.png»/> <square310x310logo src=»/ms-tile-558.png»/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<browserconfig>

  <msapplication>

    <tile>

      <square70x70logo   src=»/ms-tile-126.png»/>

      <square150x150logo src=»/ms-tile-270.png»/>

      <wide310x150logo   src=»/ms-tile-558×270.png»/>

      <square310x310logo src=»/ms-tile-558.png»/>

      <TileColor>#009900</TileColor>

    </tile>

  </msapplication>

</browserconfig>

Edge и IE11 автоматически запрашивает файл browserconfig.xml. Однако конфиг файл можно явно предоставить следующим образом, что позволяет изменить его имя и путь:

<meta name=»msapplication-config» content=»/path/to/config-file.xml» />

<meta name=»msapplication-config» content=»/path/to/config-file.xml» />

Собираем все вместе

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

favicon.ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

И 2 конфиг файла:

manifest.json

browserconfig.xml

Разметка favicon

<link rel=»icon» href=»icon-48.png»> <link rel=»icon» href=»icon-96.png»> <link rel=»icon» href=»icon-144.png»> <link rel=»icon» href=»icon-192.png»> <link rel=»icon» href=»icon-256.png»> <link rel=»icon» href=»icon-384.png»> <link rel=»icon» href=»icon-512.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»> <link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»> <link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#ff0000″> <meta name=»msapplication-TileColor» content=»#ff0000″> <meta name=»msapplication-TileImage» content=»/ms-tile-144.png»> <link rel=»manifest» href=»/manifest.json»>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<link rel=»icon» href=»icon-48.png»>

<link rel=»icon» href=»icon-96.png»>

<link rel=»icon» href=»icon-144.png»>

<link rel=»icon» href=»icon-192.png»>

<link rel=»icon» href=»icon-256.png»>

<link rel=»icon» href=»icon-384.png»>

<link rel=»icon» href=»icon-512.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-57.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-60.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-72.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-76.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-114.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-120.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-152.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-167.png»>

<link rel=»apple-touch-icon» href=»apple-touch-icon-180.png»>

<link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#ff0000″>

<meta name=»msapplication-TileColor» content=»#ff0000″>

<meta name=»msapplication-TileImage» content=»/ms-tile-144.png»>

<link rel=»manifest» href=»/manifest.json»>

Этого незначительного куска разметки должно хватить, чтобы все браузеры были счастливы.

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

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

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

Например, прозрачность хорошо работает на Android, но на iOS она превращается в черный цвет. Во многих случаях это неприемлемо.

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

Вывод – нужно проверять рендер favicon на всех платформах.

Нам действительно нужны все эти favicon?

Для такой маленькой иконки очень много работы.

С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.

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

Пусть браузер сам занимается уменьшением

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

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

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

Минимальный набор иконок

1. Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

2. Файл manifest.json, использующий изображение chrome:

{ «name»: «», «short_name»: «», «icons»: [ { «src»: «/icon-192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

{

    «name»: «»,

    «short_name»: «»,

    «icons»: [

        {

            «src»: «/icon-192.png»,

            «sizes»: «192×192»,

            «type»: «image/png»

        }

    ],

    «theme_color»: «#ffffff»,

    «background_color»: «#ffffff»,

    «display»: «standalone»

}

3. Файл browserconfig.xml, использующий изображение mstile

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<browserconfig>

  <msapplication>

    <tile>

      <square150x150logo src=»/mstile-150×150.png»/>

      <TileColor>#da532c</TileColor>

    </tile>

  </msapplication>

</browserconfig>

4. Следующая разметка

<link rel=»apple-touch-icon» href=»/apple-touch-icon.png»> <link rel=»icon» type=»image/png» href=»/icon-32×32.png»> <link rel=»icon» type=»image/png» href=»/icon-16×16.png»> <link rel=»manifest» href=»/manifest.json»> <link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#5bbad5″> <meta name=»theme-color» content=»#ffffff»>

<link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>

<link rel=»icon» type=»image/png» href=»/icon-32×32.png»>

<link rel=»icon» type=»image/png» href=»/icon-16×16.png»>

<link rel=»manifest» href=»/manifest.json»>

<link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#5bbad5″>

<meta name=»theme-color» content=»#ffffff»>

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

<link rel=»icon» href=»icon-192.png»>

<link rel=»icon» href=»icon-192.png»>

Мы используем manifest.json для Android, Chrome также будет использовать его, если он объявлен.

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

Будущее favicon

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

SVG favicon

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

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

Чтобы использовать favicon SVG, атрибут sizes необходимо установить в значение any:

<link rel=»icon» href=»icon.svg» type=»image/svg+xml»>

<link rel=»icon» href=»icon.svg» type=»image/svg+xml»>

Автор: Ruadhán O’Donoghue

Источник: //mobiforge.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Как сделать иконку сайта с помощью css? — Хабр Q&A

1. Создайте необходимую картинку например в фотошопе или другом графическом редакторе, желательно квадратную (равностороннюю), желательно 512x512px или около такого размера, можете сделать с прозрачным фоном PNG.
2. Переходим по ссылке: https://www.favicon-generator.org/ , там выбираем наш графический файл и жмем на кнопку [Create Favicon]

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

После этого необходимо будет вставить еще сгенерированный код с того сайта в шаблон своего сайта между тегами <head> и </head> — и будет тебе СЧАСТЬЕ!
<!doctype html>
<html lang="ru">
<head>

	<meta charset="utf-8">
	<title>Document</title>

	<link rel="apple-touch-icon" href="/apple-icon-57x57.png">
	<link rel="apple-touch-icon" href="/apple-icon-60x60.png">
	<link rel="apple-touch-icon" href="/apple-icon-72x72.png">
	<link rel="apple-touch-icon" href="/apple-icon-76x76.png">
	<link rel="apple-touch-icon" href="/apple-icon-114x114.png">
	<link rel="apple-touch-icon" href="/apple-icon-120x120.png">
	<link rel="apple-touch-icon" href="/apple-icon-144x144.png">
	<link rel="apple-touch-icon" href="/apple-icon-152x152.png">
	<link rel="apple-touch-icon" href="/apple-icon-180x180.png">
	<link rel="icon" type="image/png"  href="/android-icon-192x192.png">
	<link rel="icon" type="image/png" href="/favicon-32x32.png">
	<link rel="icon" type="image/png" href="/favicon-96x96.png">
	<link rel="icon" type="image/png" href="/favicon-16x16.png">
	<link rel="manifest" href="/manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">

</head>
<body>
	
	Тут содержание вашего сайта

</body>
</html>

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

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

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

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

Ниже пример применения иконок на сайте с помощью HTML5 символов:

Второй способ — не менее простой, но более гибкий и дающий больше возможностей. Здесь речь пойдет о применении стороннего сервиса Font Awesome. Для того чтобы использовать его, необходимо зайти на сайт и в верхнем меню нажать «Get Started» (выделено красным)

Далее попадаем на страницу, где нужно выбрать метод использования иконок на сайте. Рекомендую выбрать метод «Web Fonts with CSS»

Далее мы попадаем на страничку, где нам нужно скопировать код:

И далее этот код вставить в код сайта в разделе <head></head>

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Всё для сайта и сайтостроения</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
</head>

Далее мы можем использовать иконки Font Awesome. Переходим в раздел Icons в верхнем меню

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

<i></i>

И вставляем его в нужном месте сайта.

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

На этом всё, если вам понравилась статья, ставьте LIKE. Если есть вопросы, задавайте, будут рад помочь.

Joomla: как сделать иконку сайта, которая видна в адресной строке браузера | html

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

Картинка, которая имеется в виду, называется Favicon. Вот пример отображения этой картинки в браузере:

Отличная статья по этой теме находится в Википедии — http://ru.wikipedia.org/wiki/Favicon. Наша задача — добавить на каждую страничку в блок < head> тег < link rel=»icon» type=»image/png» href=»/someimage.png» />. Для отображения Favicon в шаблонах Joomla, а также в коде /inclides/frontend.php обычно уже сгенерирован соответствующий код. Нам остается просто найти и подправить это место. Итак, процесс по шагам для Joomla версии 1.0.12.

1. Делаем картинку 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета, формат png или gif. Самое простое — сконвертировать готовую картинку в знакомом графическом редакторе (Photoshop, ACDSee, Picasa и т. д.). Я выбрал 32×32, цвет 8 бит, формат gif. Сохраняем созданную картинку под именем favicon32x32-8b.gif, записываем её в папку с картинками /images относительно корня сайта (для тех, кто в танке — корень сайта — это там, где находятся файлы index.php, index2.php, configuration.php).

2. Открываем html-код текущего шаблона. В админке Joomla идем в меню Сайт -> Шаблоны -> Шаблоны сайта. Смотрим, на каком из шаблонов в списке стоит зеленая галка (столбец Умолчание) — этот шаблон сейчас работает у нас на сайте. Выбираем этот шаблон, поставив напротив него радиокнопку, и жмем кнопку «Правка HTML».

3. Откроется простейший текстовый редактор, в котором будет отображен html-код шаблона. Ищем секцию < head>, а внутри этой секции тег наподобие < link rel=»shortcut icon» href=»/< ?php echo $mosConfig_live_site;?>/images/favicon.ico» />. В этом примере формат Favicon задан как icon, переменная $mosConfig_live_site (она задана в файле configuration.php) установлена в значение http://microsin.ru, а картинка, которая сейчас применена в качестве Favicon, лежит в файле /images/favicon.ico. В нашем примере нам всего лишь надо исправить эту строчку так, чтобы формат был gif, а картинка favicon32x32-8b.gif:

< link rel="shortcut gif" href="< ?php echo $mosConfig_live_site;? >/images/favicon32x32-8b.gif" />

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

Кроме шаблона, иконка favicon иногда выводится блоком кода /includes/frontend.php, поэтому тег < link rel=»shortcut .. > может дублироваться. Например, код в файле frontend.php может быть такой:

..
    // favourites icon
    if ( !$mosConfig_favicon )
    {
        $mosConfig_favicon = 'favicon.ico';
    }
    $icon = $mosConfig_absolute_path .'/'. $mosConfig_favicon;
    // checks to see if file exists
    if ( !file_exists( $icon ) )
    {
        $icon = $mosConfig_live_site .'/favicon.ico';
    }
    else
    {
        $icon = $mosConfig_live_site .'/' .$mosConfig_favicon;
    }
    // outputs link tag for page
    ?>
    < link rel="shortcut icon" href="/< ?php echo $icon;? >" />
..

Здесь все очевидно — из переменных файла configuration.php вычисляется путь до файла иконки, и в html выводится тег link rel. Я не знаю, нужно ли оставлять такое дублирование, и на всякий случай оставил. Поэтому тег link rel у меня на сайте сгенерирован дважды:

..
< head >
..
    < link rel="shortcut icon" href="http://microsin.ru/favicon.ico" />
..
    < !-- < link rel="shortcut icon" href="http://microsin.ru/images/favicon.ico" /> -- >
    < link rel="shortcut gif" href="http://microsin.ru/images/favicon32x32-8b.gif" />
< /head >
..

В случае дублирования тега link rel проверьте корректность обоих путей до файла картинки, и соответствие её формата тому, который указан в теге. То есть, для данного примера файлы favicon.ico и favicon32x32-8b.gif должны лежать именно там, где указано в теге, и их формат должен быть соответственно icon и gif.

[favicon в Joomla 1.7]

Настроить картинку favicon для Joomla 1.7 намного проще — в каждом шаблоне (в папке шаблона) находится файл favicon.ico, который нужно просто подменить на другой. Например, у меня стоял шаблон beez_20, и я заменил оригинальный файл /templates/beez_20/favicon.ico на свой собственный, после чего сайт заработал с новой картинкой favicon.

[Ссылки]

1. Freeware редактор иконок Icon Editor (автор SoftwarePile.com). Программа понимает файлы BMP, и может создавать из них иконки и курсоры.

Иконка для сайта или как сделать Favicon ico самостоятельно

Приветствую вас, уважаемые читатели блога Rabota-Vo.ru! Когда мы набираем в командной строке браузера адрес какого-нибудь сайта, с левой стороны в момент загрузки страницы появляется маленькое изображение в виде иконки. Иконка для сайта – Favicon, (сокращение от английского слова FAVorites ICON) переводится как «значок для избранного».

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

И если вы обращали внимание, при выдаче результатов поиска в поисковике Яндекса на странице перед заголовками найденных страниц присутствует Favicon (иконка сайта).

И чем привлекательней будет это маленькое изображение, тем будет большая вероятность того, что пользователь зайдет именно на этот сайт. Важность иконки Favicon очевидна. Но некоторые начинающие Web мастера не знают, как сделать иконку для сайта и установить ее на свой ресурс. Сделать иконку (Favicon) для своего сайта на самом деле не так сложно. Достаточно подготовить будущее изображение в любом графическом редакторе и сгенерировать полученный файл через онлайн сервис в формат ico. На мой взгляд, самый удобный онлайн сервис для генерации иконок для сайта – это Favicon.cc.

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

Если изменения не произошли, и вы не видите свой новый favicon в строке перед адресом сайта, попробуйте для начала очистить кэш браузера. Также может быть, что для размещения иконки в вашем сайте есть специальная папка, туда и надо поместить favicon ico. Все зависит от движка, на котором сделан сайт. В моем случае (сайт на Joomla) favicon находится по адресу /templates/папка с шаблоном сайта/favicon.ico.

На сайтах, сделанных, на других движках, путь к иконке может быть другой. К примеру, если вы решили создать свой блог на Blogstop.com, и хотите сменить иконку (а прямого доступа к папкам в blogger нет), достаточно зайти на blogger в панель управления блогом → Дизайн → Элементы страницы. В верхней левой части окна – Значок → Изменить и загружаете свою новую иконку. Все очень просто.

В дальнейшем, когда робот Яндекса посетит ваш сайт, и найдет ваш favicon ico,он разместит его у себя на сервисе. И если после размещения вашего favicon ico на сервисе Яндекса посмотреть на ваш сайт на странице поисковой выдачи, можно будет увидеть иконку вашего сайта. Но произойдет такое не сразу. Визит Яшиного робота может затянутся до месяца.

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

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

Вас это может заинтересовать:

Что такое favicon для сайта, как сделать фавикон и зачем нужна иконка сайта?

09.08.2021


Инструментов, чтобы выделить свой сайт среди миллионов других в поисковой выдаче, не так-то много. Favicon ― это один из таких инструментов. 

Favicon сайта ― что это

Что такое favicon? Favicon (favorites icon ― иконка для избранного) ― это иконка сайта, которая отображается:

  • на вкладках перед названием сайта

  • в закладках пользователя

  • слева от названия сайта в поисковой выдаче:

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

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

Яндекс уже около 10 лет отображает фавиконы в поисковой выдаче. А вот Google долгое время не торопился внедрять эту фичу в свой поисковик, поэтому пользователям пришлось ждать аж до 2019 года. Пока Google экспериментирует с фавиконами в поисковой выдаче: ищет им подходящее место, проверяет их нужность. Последний крупный эксперимент в отношении фавиконов был в январе 2020 года. О технических работах разработчики писали в официальном Twitter компании.

Если у вашего сайта иконка не установлена, на вкладках и в поисковой выдаче будет отображаться стандартная иконка. У каждого браузера она своя, например, в Google Chrome отображается чёрно-белая планета:

Для чего нужен favicon

Как использовать favicon? На что он может повлиять?

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

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

  3. Удобный поиск сайта в закладках. Как мы говорили ранее, изначально фавикон создавался именно для того, чтобы нужный сайт было легче найти в избранном. До сих пор эта функция осталась, и иконки значительно облегчают поиск ресурсов. То же самое работает и с иконками во вкладках. Современные ПК очень производительные, поэтому они могут постоянно держать открытыми несколько десятков вкладок. В таких случаях иконка для сайта ― единственный способ найти то, что нужно.

  4. ​​Заставить пользователей больше доверять вам. Многие сайты уже давно пользуются иконками. Если вы не создадите себе отличительный знак, вы можете выделяться среди остальных ресурсов с плохой точки зрения. Пользователи могут задуматься о вашей профессиональности, а может даже принять за мошенников. Особенно это может сказаться на интернет-магазинах, так как люди будут бояться оплачивать товары через такой сайт. Всё это может значительно усложнить продвижение бренда.

Технические требования к изображению

Раньше для favicon использовали формат ICO. Сейчас браузеры поддерживают такие форматы, как SVG (чаще всего рекомендуют именно его), ICO, GIF, JPEG, PNG, BMP. 

Рекомендованный размер картинки в каждой поисковой системе разный. Яндекс говорит, что фавикон должен быть 120 × 120, 32 × 32 и 16 x 16 пикселей. В официальном справочном материале Яндекс рекомендует использовать изображения размером 120 × 120 пикселей (для растровых форматов) или изображение в формате SVG. Именно эти параметры позволят отобразить логотип сайта чётко и заметно на сервисах Яндекса.

В Google рекомендуемый размер значка должен быть кратным 48 пикселям, например, 48 x 48, 96 x 96, 144 x 144. Специалисты Google просят не использовать иконки 16 x 16, так как они слишком маленькие.

Как создать favicon

В целом favicon можно сделать в любом графическом редакторе, в котором вы привыкли работать. Для этой задачи подойдёт даже Paint. Важно только соблюсти необходимые размеры и конвертировать в один из форматов, о которых мы говорили ранее.

Такие профессиональные редакторы, как Adobe Photoshop, Adobe Illustrator или Figma, за счёт большей функциональности позволят создать уникальную иконку. Если вы не работаете с профессиональными редакторами или просто не гонитесь за уникальностью изображения, можете воспользоваться одним из способов, которые мы перечислим.

Как сделать favicon для сайта:

  1. Конвертировать уже готовое изображение. Если у вас уже есть готовая иконка или картинка, можно просто конвертировать её в нужный формат. Для этого подойдёт сервис pr-cy.ru, be1.ru.

  2. Нарисовать иконку самостоятельно. Есть сервисы, у которых очень ограниченный функционал, но с их помощью можно сделать простое начертание. Такие возможности дают сайты katvin.com, favicon.by, favicon.cc, xiconeditor.com
    Для примера сделаем иконку в виде радостного смайлика в сервисе favicon.by.
     

  3. Использовать готовые иконки. Необязательно рисовать иконку с нуля. Можно взять уже готовые иконки, которые выложены в библиотеки сайтов в свободном доступе. Взять готовые фавиконы можно на faviconka.ru и findicons.com.

Советы по созданию favicon

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

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

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

Favicon: как добавить на сайт

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

Самый универсальный способ ― добавить значок сайта через код. С него и начнём.

Как добавить favicon на сайт через код

  1. Загрузите файл с иконкой в корневой каталог сайта.

  2. Добавьте в HTML-код главной страницы сайта в элемент head ссылку на размещённый файл.

<head>

     <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">

     <link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/x-icon">

</head>

Атрибуты:

rel: 

  • icon — учитывается большинством браузеров,

  • shortcut icon — учитывается браузером Internet Explorer.

type: 

  • image/svg+xml — для формата SVG,

  • image/x-icon или image/vnd.microsoft.icon — для формата ICO,

  • image/gif — для формата GIF,

  • image/jpeg — для формата JPEG,

  • image/png — для формата PNG,

  • image/bmp — для формата BMP.

Совет. Если сайт должен быть доступен по нескольким доменам, лучше указывать в коде не полный путь, а относительный. Например, не https://example.com/favicon.ico, а просто /favicon.ico.

Обратите внимание! Если у вас кириллический домен в атрибуте href используйте Punycode. Например, для адреса https://новыйсайт.рф/favicon.ico нужно указать https://xn--80advbqgxk0f.xn--p1ai/favicon.ico или просто использовать относительный путь /favicon.ico.

Как добавить favicon на сайт в WordPress

В WordPress есть больше вариантов добавить иконку на сайт. Можно использовать плагин или просто воспользоваться встроенными настройками WordPress. 

Чтобы добавить иконку можно, например, использовать плагин RealFaviconGenerator

  1. Перейдите в админку WordPress.

  2. Перейдите в Плагин ― Добавить новый.

  3. Найдите в поиске плагин RealFaviconGenerator установите и активируйте его.

  4. Перейдите во Внешний вид ― Фавикон

  5. Загрузите иконку. Нажмите Генерировать favicon. Плагин перенесёт вас на сайт RealFaviconGenerator.

  6. На веб-сайте найдите и нажмите кнопку Создайте свои значки Favicons и HTML-код.

  7. Плагин вернёт вас на ваш сайт. Вы получите уведомление о том, что ваш favicon настроен.

Не сложнее добавить favicon и через обычные настройки WordPress.

  1. В админке WordPress перейдите во Внешний вид ― Настроить.

  2. Выберите Общие настройки ― Свойства сайта.

  3. В разделе Иконка сайта нажмите Выберите иконку сайта 

  4. Загрузите фавикон.

  5. Чтобы сохранить изменения, нажмите кнопку Опубликовать:

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

В лучшем случае, поисковые системы начинают индексировать фавиконку через 1-2 недели после её настройки. А может и через несколько месяцев. К сожалению, здесь все зависит от решения системы. 

html — Как добавить значок вкладки браузера (favicon) для веб-сайта?

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

Вот несколько фрагментов, которые я использовал, с соответствующими ссылками на места, где я собирал информацию. См. мой блог для получения дополнительной информации и дополнительной информации о шаблоне проекта ASP.NET MVC Boilerplate со всем этим, встроенным прямо из коробки (включая примеры файлов изображений).

Добавьте следующую разметку в заголовок html. Закомментированные разделы являются необязательными. В то время как незакомментированные разделы рекомендуется охватывать все варианты использования значков. Не бойтесь, больше всего, если это комментарии, чтобы помочь вам.

  




































































  

Мой файл browserconfig.xml. Полное объяснение выше.

  
<конфигурация браузера>
  
    <плитка>
      
      
      
      
      #5cb95c
    
  

  

Мой манифест.json-файл. Полное объяснение выше.

  {
    "name": "Шаблон ASP.NET MVC (обязательно! Обновите это)",
    "значки": [
        {
            "src": "\/Содержимое\/иконки\/android-chrome-36x36.png",
            "размеры": "36x36",
            "тип": "изображение\/png",
            "плотность": "0,75"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-48x48.png",
            "размеры": "48x48",
            "тип": "изображение\/png",
            "плотность": "1.0"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-72x72.png",
            "размеры": "72x72",
            "тип": "изображение\/png",
            "плотность": "1,5"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-96x96.png",
            "размеры": "96x96",
            "тип": "изображение\/png",
            "плотность": "2.0"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-144x144.png",
            "размеры": "144x144",
            "тип": "изображение\/png",
            "плотность": "3.0"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-192x192.png",
            "размеры": "192x192",
            "тип": "изображение\/png",
            "плотность": "4,0"
        }
    ]
}
  

Список файлов в проекте (Обратите внимание, что имена этих файлов важны, если вы решите поместить некоторые из них в корень вашего проекта, чтобы избежать использования вышеуказанных метатегов):

  favicon.ico
браузерconfig.xml
Контент/Изображения/
    Android-хром-144x144.png
    Android-хром-192x192.png
    Android-хром-36x36.png
    андроид-хром-48x48.png
    Android-хром-72x72.png
    Android-хром-96x96.png
    apple-touch-icon.png
    яблоко-тач-значок-57x57.png
    яблоко-тач-значок-60x60.png
    яблоко-тач-значок-72x72.png
    яблоко-тач-значок-76x76.png
    яблоко-тач-значок-114x114.png
    яблоко-тач-значок-120x120.png
    яблоко-тач-значок-144x144.png
    яблоко-тач-значок-152x152.png
    яблоко-тач-значок-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    фавикон-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    яблоко-тач-стартап-изображение-1536x2008.png
    яблоко-тач-стартап-изображение-1496x2048.png
    яблоко-тач-стартап-изображение-768x1004.png
    яблоко-тач-стартап-изображение-748x1024.png
    яблоко-тач-стартап-изображение-640x1096.png
    яблоко-тач-стартап-изображение-640x920.png
    яблоко-тач-стартап-изображение-320x460.png
  

Всего накладных расходов

Если вы удалите комментарии, это 3 КБ дополнительного HTML, если вы не поддерживаете заставки, это 1.5 КБ. Если вы используете сжатие GZIP для своего HTML-контента, что каждый должен делать в наши дни, у вас остается около 634 байт накладных расходов на запрос для поддержки всех платформ или 446 байт без заставок. Я лично считаю, что стоит поддерживать устройства IOS, Android и Windows, но это ваш выбор, я просто даю варианты!

Боковое примечание о текущем веб-значке/экране-заставке/ситуации с настройками

Эта ситуация со специфическими значками, экранами-заставками и специальными тегами для управления веб-браузером или закрепленными значками нелепа.В идеальном мире мы все использовали бы файл favicon.svg, который хорошо выглядел бы в любом размере и мог бы быть помещен в корень страницы. Только FireFox поддерживает это на момент написания (см. CanIUse.com).

Тем не менее, значки — не единственная настройка в наши дни, есть несколько других настроек, зависящих от поставщика (показаны выше), но файл favicon.svg подходит для большинства случаев использования.

Обновление

Обновлено для включения новой версии Android/Chrome версии M39+ favicon/темы.Интересно, что они использовали тот же подход, что и Microsoft, но используют файл JSON вместо XML.

HTML Фавикон


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


Как добавить значок избранного в HTML

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

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

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

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

Затем добавьте элемент в файл index.html, после элемента </code>, например: </p> <h4><span class="ez-toc-section" id="i-14"> Пример </span></h4> <br/> <br/> <br/>   Моя страница Заголовок <br/>   <br/> <p> <h2><span class="ez-toc-section" id="i-15">Это заголовок</span></h2> <br/> <p>Это абзац.</p> </p> <p> </body> <br/> </html> </p> <p> Теперь сохраните файл index.html и перезагрузите его в браузере. Теперь вкладка вашего браузера должна отображать изображение фавикона слева от заголовка страницы. </p> <hr/> <hr/> <h3><span class="ez-toc-section" id="_Favicon"> Поддержка формата файлов Favicon </span></h3> <p> В следующей таблице показаны поддерживаемые форматы файлов для изображения фавикона: </p> <table> <tr> <th> Браузер </th> <th> ICO </th> <th> PNG </th> <th> GIF </th> <th> JPEG </th> <th> СВГ </th> </tr> <tr> <td> Край </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> </tr> <tr> <td> Хром </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> </tr> <tr> <td> Firefox </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> </tr> <tr> <td> Опера </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> </tr> <tr> <td> Сафари </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> </tr> </table> <hr/> <h3><span class="ez-toc-section" id="i-16"> Краткое содержание главы </span></h3> <ul> <li> Используйте элемент HTML <code> <link> </code> для вставить фавиконку </li> </ul> <hr/> <h3><span class="ez-toc-section" id="HTML-2"> HTML-тег ссылки </span></h3> <table> <tr> <th> Бирка </th> <th> Описание </th> </tr> <tr> <td> <ссылка> </td> <td> Определяет связь между документом и внешним ресурсом </td> </tr> </table> <br/> <br/> <h2><span class="ez-toc-section" id="_Favicon-2"> Как добавить Favicon на свой сайт </span></h2> <h3><span class="ez-toc-section" id="i-17"> Статус этого документа </span></h3> <p> Проект в разработке; может кардинально измениться в любой момент.</p> <p> Фавикон — это изображение изображение (значок), связанное с определенной веб-страницей и/или веб-сайтом. сайт. Многие последние пользовательские агенты (например, графические браузеры и программы чтения новостей) отображают их как визуальное напоминание о веб-сайте. в адресной строке или на вкладках. В википедии есть <cite> статья о favicons </cite> [FAVICON-WIKIPEDIA]. </p> <p> Чтобы добавить значок избранного на ваш веб-сайт, вам потребуется как изображение, так и метод указания того, что изображение должно использоваться в качестве фавиконки. Этот документ объясняет метод, предпочитаемый W3C для указания фавикон.Существует еще один распространенный метод, который показан ниже. с объяснением того, почему этот метод несовместим с некоторыми принципы веб-архитектуры. Оба метода применимы только к HTML и XHTML, одно из обсуждаемых ограничений ниже. </p> <p> В этом документе подробно не обсуждается, как создать значок сайта. изображение. Однако формат выбранного вами изображения должен быть 16×16. пикселей или 32×32 пикселей с использованием 8-битных или 24-битных цветов. То формат изображения должен быть одним из PNG (файл стандарт W3C), GIF или ICO.</p> <h3><span class="ez-toc-section" id="_1"> Метод 1 (предпочтительный): использование значения атрибута </span></h3> <code> rel </code> определяется в профиле </h3> <p> Первый подход к указанию фавикона — использование <code> rel </code> значение атрибута «значок» и определить, что означает значение через профиль; профили обсуждаются более подробно ниже. В этом примере HTML 4.01 фавикон, идентифицированный через URI <code> http://example.com/myicon.png </code> как фавикон: </p> <pre> <code> <!DOCTYPE html ПУБЛИЧНЫЙ "-//W3C//DTD HTML 4.01//РУ" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US"> <head <strong> profile="http://www.w3.org/2005/10/profile" </strong> > <strong> <ссылка отн = "значок" тип = "изображение/png" href="http://example.com/myicon.png"> </strong> […] </голова> […] </html> </code> </pre> <p> Версия XHTML 1.0 очень похожа: </p> <pre> <code> <!DOCTYPE html ПУБЛИЧНЫЙ "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.дтд"> <html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en-US" lang="en-US"> <head <strong> profile="http://www.w3.org/2005/10/profile" </strong> > <strong> <ссылка отн = "значок" тип = "изображение/png" href="/где-то/myicon.png" /> </strong> […] </голова> […] </html> </code> </pre> <h3><span class="ez-toc-section" id="_2_URI"> Способ 2 (не рекомендуется): размещение значка избранного на предварительно определенном URI </span></h3> <p> Второй метод указания фавикона основан на использовании предопределенный URI для идентификации изображения: «/favicon», который относится к корень сервера.Этот метод работает, потому что некоторые браузеры запрограммирован на поиск фавиконов с использованием этого URI. Этот подход несовместимы с некоторыми принципами веб-архитектуры и в настоящее время обсуждается группой технической архитектуры W3C (TAG) в качестве их выдачи siteData-36. Подводя итог этой проблеме: веб-архитектура разрешает менеджерам сайтов управлять своим пространством URI (для данного доменного имени), как они видят соответствовать. Соглашения, которые не представляют согласия сообщества и которые уменьшить параметры, доступные менеджеру сайта, не масштабируются и могут привести к конфликту (поскольку общеизвестного списка этих предопределенные URI).Одно практическое соображение иллюстрирует проблему: многие пользователи имеют веб-сайты, даже если у них нет собственных доменное имя. Эти пользователи не могут указывать фавиконы, используя второй метод, если они не могут писать в корень сервера. Однако они могут использовать первый способ указать фавикон, так как он более гибкий и не запретить менеджеру сайта использовать один значок значка в одном месте на сайте. </p> <p> Есть несколько других известных посягательств на пространство URI, в том числе «роботы.txt» и расположение P3P-конфиденциальности. политика. Группа технической архитектуры изучает альтернативы которые не затрагивают пространство URI без лицензии. </p> <h3><span class="ez-toc-section" id="i-18"> Использование профилей для определения таких терминов, как «значок» </span></h3> <p> Грубо говоря, профиль — это определение множества термины. В идеале профиль включает как машиночитаемую информацию, и удобочитаемая информация. В HTML 4.01 и XHTML 1.0 несколько такие атрибуты, как атрибут <code> rel </code>, не имеют предопределенного набора значения.Вместо этого автор может предоставить значения в соответствии с потребностями и затем используйте профиль, чтобы объяснить, что означают значения. В нашем случае мы рекомендовали авторам использовать значение «значок» и профиль, который объясняет, что «когда мы говорим значок, мы имеем в виду «это значок сайта». </p> <p> В методе 1 выше мы используем атрибут <code> rel </code> с СВЯЗЬ элемент и выбираем профиль с атрибутом <code> профиль </code> в элементе HEAD. </p> <p> Мы определили профиль, который вы можете свободно использовать для своих сайтов.</p> <h3><span class="ez-toc-section" id="i-19"> Ограничения </span></h3> <p> Описанные выше подходы имеют несколько ограничений. включая предпочтительный метод (именно поэтому TAG продолжает работать по вопросу): </p> <ul> <li> Подходы работают только в HTML или XHTML </li> <li> Предпочтительный подход связывает значок с HTML-документом, не собрание документов (т.е. сайт) </li> <li> Предлагаемый профиль для определения значения «значок» не является общепризнанный стандарт, что означает, что могут быть проблемы с функциональной совместимостью на практике.</li> <li> Стандарт отсутствует (по крайней мере, определенный в HTML 4.01) для машиночитаемых профилей, которые позволить браузеру узнать, что «это означает, что изображение является фавиконом». Таким образом, браузер должен быть запрограммирован заранее, чтобы распознать это конкретное значение <code> отн. </code> . Для получения дополнительной информации об использовании профилей в HTML и XHTML см. <cite> GRDDL </cite> [ГРДДЛ]. </li> </ul> <h3><span class="ez-toc-section" id="i-20"> Каталожные номера </span></h3> <dl> <dt> ФАВИКОН-ВИКИПЕДИЯ </dt> <dd> <cite> Фавикон </cite> , Википедия, Доступно по адресу http://en.wikipedia.org/wiki/Фавикон. </dd> <dt> ГРДДЛ </dt> <dd> <cite> Сбор Описания ресурсов из диалектов языков </cite> , D. Азаэль-Массье, Д. Коннолли, редакторы, представление команды W3C, 16 мая. 2005 г., http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/. Последняя версия доступно на http://www.w3.org/TeamSubmission/grddl/. </dd> <dt> HTML401 </dt> <dd> <cite> HTML 4.01 Спецификация </cite>, Д. Раггетт, А. Ле Хорс, И. Джейкобс, Редакторы, Рекомендация W3C, 24 декабря 1999 г., http://www.w3.org/TR/1999/REC-html401-19991224. Последняя версия доступно на http://www.w3.org/TR/html401. </dd> <dt> ДАННЫЕ САЙТА-36 </dt> <dd> <cite> Улучшение метаданных веб-сайта в файлах robots.txt, w3c/p3p и favicon и т. д. </cite> , TAG, Доступно на http://www.w3.org/2001/tag/issues.html#siteData-36. </dd> <dt> XHTML1 </dt> <dd> <cite> XHTML™ 1.0 Расширяемый язык гипертекстовой разметки (второе издание) </cite> , S. Пембертон, редактор Рекомендации W3C, 1 августа 2002 г., http://www.w3.org/TR/2002/REC-xhtml1-20020801. Самый последний версия доступна на http://www.w3.org/TR/xhtml1. </dd> </dl> <h3><span class="ez-toc-section" id="i-21"> Благодарности </span></h3> <p> Следующие участники QA Interest Group и сотрудники W3C внесли значительный вклад в содержание этого документа: Доминик Азаэль-Массье (W3C), Крис Лилли (W3C) и Оливье Теро (W3C). </p> <h2><span class="ez-toc-section" id="i-22"> Руководство для начинающих по добавлению значка на ваш веб-сайт </span></h2> <p> Вы можете встретить термин favicon, когда речь идет о создании и разработке веб-сайтов.Но что именно? Что ж, в этой статье мы ответим на ваш вопрос и покажем, как добавить фавикон на свой сайт. Давайте начнем! </p> <h3><span class="ez-toc-section" id="i-23"> Что такое фавикон и почему он важен? </span></h3> <p> Проще говоря, фавикон — это логотип вашего веб-сайта, который появляется рядом с мета-заголовком на вкладке вашего браузера. Другими словами, вместо того, чтобы отображать значок пустого документа в браузере, на вашем веб-сайте будет отображаться значок вашего официального веб-сайта. </p> <p> Большинство веб-сайтов обычно используют свой логотип в качестве фавиконки.Если на вашем сайте нет логотипа, вы можете просто создать его с помощью бесплатного конструктора логотипов. Таким образом, ваши посетители легко заметят ваш сайт, когда откроют множество вкладок в одном окне браузера. Кроме того, ваш сайт будет выглядеть гораздо более профессионально. </p> <h3><span class="ez-toc-section" id="_Favicon-3"> Как добавить Favicon на свой сайт? </span></h3> <p> Выберите один из двух способов ниже, чтобы добавить фавикон на свой сайт! </p> <h4><span class="ez-toc-section" id="i-24"> Разрешить браузерам автоматически создавать значок </span></h4> <p> Самый простой способ добавить значок на свой сайт — загрузить его как <strong> .png </strong> или <strong> .ico </strong> из файлового менеджера </strong> вашего хостинга </strong> . Для этого выполните следующие действия: </p> <ol> <li> Подготовьте квадратное изображение в формате <strong> .png </strong> или <strong> .ico </strong> для логотипа вашего веб-сайта. <br/> </li> </ol> <h5/> </h5><p> Если у вас уже есть файл <strong> .png </strong>, используйте его. Тем не менее, конвертируйте изображение в формат <strong> .ico </strong> с помощью ConvertICo.com, если вам когда-нибудь понадобится. </p> <li> Переименуйте изображение <strong> .png </strong> или <strong> .ico </strong> в значок <strong> favicon </strong> .<br/> </li> <h5/> </h5><p> Большинство браузеров автоматически определяют файлы <strong> favicon.png </strong> и <strong> favicon.ico </strong>, расположенные в каталоге вашего веб-сайта, в качестве значка вашего веб-сайта. Таким образом, вам не понадобится кодирование. </p> <li> Откройте папку <strong> public_html </strong>, перейдя в hPanel, затем <strong> Файловый менеджер -> Перейти к файловому менеджеру </strong> . <br/> </li> <li> Загрузите файл <strong> favicon.png </strong> или <strong> .ico </strong> в папку <strong> public_html </strong>. Перезагрузите свой сайт, и вы увидите фавикон.</li> <h4><span class="ez-toc-section" id="_headerphp"> Загрузите обычное изображение и отредактируйте файл header.php вашей темы </span></h4> <p> В качестве альтернативы, если у вас есть изображение, отличное от формата <strong> .png </strong> или <strong> .ico </strong> (jpg, BMP, gif и т. д.), вы также можете использовать его в качестве значка своего веб-сайта. Однако вам необходимо изменить файл <strong> header.php </strong> в используемой в настоящее время папке темы. Для этого выполните следующие действия на панели hPanel. </p> <ol> <li> Как только вы получите квадратное изображение в качестве логотипа, перейдите в <strong> File Manager -> Go To File Manager -> public_html </strong> .</li> <li> Загрузите изображение в папку <strong> public_html </strong>. <br/> </li> </ol> <h5/> </h5><p> Вы можете сохранить исходное имя изображения или переименовать его в <strong> favicon </strong> . Рекомендуется переименовать значок, чтобы отличать его от других изображений. </p> <li> Перейдите в папку <strong> wp-content -> themes </strong>. Затем перейдите к папке темы, которую вы используете в данный момент. </li> <li> Откройте файл <strong> header.php </strong> и вставьте следующий синтаксис непосредственно перед концом тега <strong> <head></head> </strong>: <pre> <link rel="shortcut icon" type="image/jpg" href="/favicon.jpg"/> </pre> </li> <h5/> </h5><p> Измените части <strong> /jpg </strong> и <strong> /favicon.jpg </strong> в соответствии с форматом и названием изображения, которое вы собираетесь использовать. </p> <li> После сохранения изменений изображение должно отображаться как значок вашего веб-сайта. </li> <h5/> </h5><p> Если вы не видите новую иконку, очистите кеш браузера и перезапустите браузер. </p> <h3><span class="ez-toc-section" id="i-25"> Заключение </span></h3> <p> Как видите, фавиконка на вашем сайте имеет решающее значение. Это не только делает ваш сайт различимым на вкладках браузера, но и придает ему профессиональный вид.</p> <p> Вы можете добавить его автоматически, загрузив изображение <strong> .png </strong> или <strong> .ico </strong> с именем <strong> favicon </strong> в папку <strong> public_html </strong>. Кроме того, вы можете загрузить обычное изображение (jpg, BMP, gif и т. д.) и изменить файл <strong> header.php </strong> в папке используемой вами темы. </p> <p> Было ли это руководство полезным? Оставьте комментарий ниже! </p> <p> Линас начинал как агент по работе с клиентами, а сейчас является полнофункциональным веб-разработчиком и руководителем технической группы в Hostinger.Он увлечен тем, что предлагает людям первоклассные технические решения, но, несмотря на то, что ему нравится программировать, он втайне мечтает стать рок-звездой. </p> <h2><span class="ez-toc-section" id="HTML_Favicon"> HTML Favicon: практическое руководство </span></h2> <p> <em> На панели вкладок вашего браузера рядом с названием веб-сайта появляется значок HTML. Фавикон — это небольшое изображение, которое идентифицирует веб-сайт, который посещает пользователь. Фавиконы </em> <em> объявлены в </em> <em> теге <head> веб-страницы. </em> </p> <p> Вы заметили, что все или 99% вкладок вашего браузера имеют собственный отличительный логотип сбоку? Что ж, это была самая крутая вещь (еще в 1999 году), когда Internet Explorer впервые ее поддержал.</p> <p> Это маленькое изображение или иконка favicon, обозначающая любимую иконку. Фавиконки не обязательны, но они распространены на большинстве веб-сайтов. Они также используются для ярлыков на нескольких устройствах. Таким образом, все веб-сайты и веб-приложения должны использовать фавиконы, чтобы выделиться. </p> <h3><span class="ez-toc-section" id="_HTML_Favicon"> Что такое значок HTML Favicon? </span></h3> <p> Фавикон HTML — это изображение, которое отображается в списке вкладок вашего браузера. Вы увидите свою иконку, если добавите сайт в закладки, а также на некоторых сайтах, которые позволяют вставлять ссылки.Фавикон позволяет пользователю легко идентифицировать сайт в списке вкладок, закладках и во встроенных списках ссылок. </p> <p> Фавикон добавляется в тег <head> веб-страницы. Тег <head> — это место, куда помещается вся так называемая «мета» информация. Метаинформация — это сведения о самой веб-странице, например заголовок страницы. </p> <h3> </h3><strong> Фавикон HTML: традиционный способ добавить фавикон </strong> </h3> <p> Предположим, вы закончили свое крутое приложение с использованием новейших технологий.Вы хотите добавить немного бликов. Когда кто-то посещает URL-адрес вашего веб-сайта, он должен увидеть значок, идентифицирующий ваше приложение, на панели браузера. У вас есть готовый дизайн, и вы хотите добавить фавиконку на страницу. </p> <p> Сначала вы должны убедиться, что ваше изображение является либо файлом ICO, либо сохранить его в формате PNG (для сохранения прозрачности). Размер файла должен быть не менее 16×16. Затем конвертируйте изображение в формат ICO. </p> <p> <strong> Почему мы переходим на ICO? </strong> Мы делаем это, потому что браузеры имеют много разрешений, а фавиконы используются в качестве ярлыков.Файл ICO будет содержать множество изображений PNG для поддержки различных разрешений и ярлыков. Но у ICO есть свои недостатки, о которых мы поговорим чуть позже. </p> <p> 81% участников заявили, что после посещения буткемпа они стали более уверенными в своих перспективах работы в сфере технологий. Подберите себе буткемп сегодня. </p> Найдите свой матч для буткемпа <p> Средний выпускник буткемпа тратит менее шести месяцев на смену карьеры, от начала буткемпа до поиска своей первой работы. </p> Начните свою карьеру сегодня <p> Вы можете использовать один из множества онлайн-инструментов для преобразования ICO из изображения PNG.</p> <p> Ваш браузер выберет ваш значок, перетащив файл в корневой каталог. Для практики добавим favicon.ico в index.html между тегом <em> <head> </em>. Добавьте в тег <head> следующий код: </p>. <pre> <ссылка rel="icon" href="/favicon.ico" type="image/x-icon"> </pre> <p> Обновите и проверьте всплывающую иконку на вкладке! Ветер. </p> <p> Местоположение нашего изображения — /favicon.ico. Имеется в виду файл favicon.ico в корневой папке нашего сайта.Корневая папка — это основная папка, обычно та, в которой находится файл index.html. </p> <p> <strong> Примечание </strong> . Если вы получаете сообщение об ошибке «favicon.ico Not Found», убедитесь, что значок называется <em> favicon.ico </em> <em> . </em> Затем убедитесь, что ваша иконка находится в основной папке вашего сайта. Наконец, убедитесь, что ваш index.html размещен в файле, который вы запрашиваете на своей веб-странице. </p> <h3><span class="ez-toc-section" id="Favicon_HTML"> Favicon HTML: </span></h3><strong> Более совместимый способ добавления Favicon </strong> </h3> <p> Вы могли заметить, что фавикон работает не во всех системах.Это связано с тем, что формат <strong> ICO уже не так надежен </strong> . Чтобы исправить это, в HTML5 был введен атрибут <em>, размеры </em>, чтобы мы могли напрямую полагаться на файлы PNG. Сегодня нам не обязательно сжимать PNG в ICO! </p> <p> Мы можем сохранить наше PNG-изображение в трех размерах, чтобы оно соответствовало favicon.ico (16×16), панели задач (32×32) и ярлыкам (96×96). Тогда наш тег HTML code <em> <head> </em> можно изменить как: </p> <p> Найдите свой тренировочный лагерь </p> <ul> <li> <i aria-hidden="true"/> Career Karma подберет для вас лучшие технические учебные курсы </li> <li> <i aria-hidden="true"/> Получите эксклюзивные стипендии и подготовительные курсы </li> </ul> <pre> <ссылка rel="icon" type="image/png" href="/favicon16x16.png"> <ссылка rel="icon" type="image/png" href="/favicon32x32.png"> <ссылка rel="icon" type="image/png" href="/favicon96x96.png"> </pre> <p> Это должно сделать наш веб-сайт или приложение более соответствующим современным стандартам! </p> <h3> </h3><strong> HTML Добавить Favicon: Становится сложнее </strong> </h3> <p> Когда дело доходит до поддержки мобильных веб-браузеров или больших дисплеев, наш потенциальный список избранных значков продолжает расширяться. </p> <p> Возьмем, к примеру, <em> apple-touch-icon </em> , который в основном является значком, когда вы добавляете его на главный экран на устройстве iOS.Что ж, если вы хотите оптимизировать для устройств iOS, да, вам понадобится специальный значок для этого. </p> <p> Вот, наш список фавиконов растет: </p> <pre> <link rel="apple-touch-icon" href="touch-ipad.png" > <link rel="apple-touch-icon" href="touch-iphone.png" > <link rel="apple-touch-icon" href="touch-ipad-ret.png" > </pre> <p> Вы можете спросить, а как насчет устройств Android? Подождите, как мы перешли от этого единственного и <em> потрясающего </em> favicon.ico к постоянно растущему их списку? </p> <h3> </h3><strong> Заключение </strong> </h3> <p> Есть отличные ссылки с открытым исходным кодом и множество генераторов фавиконов, которые помогут вам на вашем пути.Для небольшого приложения или проекта портфолио у вас может не хватить времени, чтобы охватить большинство или все экземпляры фавикона. </p> <p> В конце концов, все сводится к вашим собственным потребностям. Не стесняйтесь экспериментировать с тем, что работает с вами. Одна из стратегий будет заключаться в том, чтобы начать с фавиконов размером 16 × 16 PNG, 32 × 32 PNG и 152 × 152 PNG, а затем расширять их. </p> <p> Вы также можете не усложнять и придерживаться старомодного favicon.ico. Этот формат поддерживается, поэтому ничто не мешает вам это сделать.Просто обратите внимание, что по мере роста вашего приложения или проекта вам нужно будет добавлять / заменять значки PNG. Теперь вы знаете, как добавить фавикон на свой сайт. </p> <p> Если вам нужны дополнительные ресурсы для изучения HTML и лучшие онлайн-курсы, ознакомьтесь с нашим руководством по изучению HTML. </p> <h2><span class="ez-toc-section" id="HTML-3"> HTML код фавиконки </span></h2> <p> Фавикон <dfn> </dfn> — это небольшой файл изображения, содержащий один или несколько значков, которые можно использовать для представления веб-сайта, блога или даже отдельной веб-страницы. </p> <p> Фавиконы обычно появляются в таких местах, как вкладка браузера, адресная строка, история браузера, панель закладок и т. д.Фавиконы — отличный способ отличить ваш сайт от других, особенно когда у пользователей открыто много вкладок или они просматривают историю своего браузера или панель закладок. Фавиконы помогают повысить узнаваемость вашего бренда, поскольку пользователи научатся ассоциировать цвета, шрифты и т. д. фавикона с вашим брендом при использовании вашего веб-сайта. </p> <p> Если у вашего веб-сайта нет значка фавикона, пользователи обычно увидят обычный значок веб-страницы. </p> <h3><span class="ez-toc-section" id="_Favicon-4"> Добавление Favicon на ваш веб-сайт </span></h3> <p> Сначала вам нужно загрузить фавиконку на свой сервер.Вы можете назвать его как угодно и разместить где угодно, но если вы назовете его <code> favicon.ico </code> и поместите его в корневой каталог веб-сайта, большинство браузеров отобразят его автоматически. Сказав это, вы также можете добавить HTML-код на свой веб-сайт, чтобы браузеры знали, какой значок использовать. </p> <p> Вот пример кода, который вы можете использовать. Поместите его внутрь элемента <code> <head> </code> (замените местоположение изображения на местоположение используемого изображения): </p> <pre> <code> <link rel="значок ярлыка" href="http://example.com/favicon.ico" /> </code> </pre> <p> Обратите внимание, что если вы используете этот код, вы можете назвать фавиконку как угодно. </p> <p> Кроме того, хотя в этом примере используется расширение <code> .ico </code>, вы можете использовать другие форматы изображений, например <code> .png </code> . <code> .gif </code> , <code> .jpeg </code> и даже анимированные GIF-файлы. Тем не менее, формат <code> .ico </code> довольно давно получил широкое распространение в браузерах и является распространенным форматом при использовании фавиконов. </p> <p> Фавиконы могут иметь размер 16×16, 32×32, 48×48 или 64×64 пикселя и 8-битную, 24-битную или 32-битную глубину цвета.</p> <h3><span class="ez-toc-section" id="_Apple_iOS"> Значки главного экрана Apple iOS </span></h3> Устройства Apple <p> с операционной системой iOS версии 1.1.3 или более поздней (например, iPod Touch, iPhone и iPad) поддерживают возможность предоставления пользовательского значка, который будет отображаться на главном экране пользователей, когда они используют веб-интерфейс <i>. Функция Clip </i> (называется <i> Добавить на главный экран </i> в Mobile Safari). </p> <p> Некоторые устройства Android также поддерживают эту функцию. </p> <p> Чтобы предоставить значок для этой цели, загрузите значок на сервер, затем добавьте следующий код с HTML веб-сайта внутри элемента <code> <head> </code> (замените местоположение изображения на местоположение изображения, которое будет использоваться ).</p> <pre> <code> <link rel="apple-touch-icon" href="http://example.com/images/apple-touch-icon.png" /> </code> </pre> <p> iOS добавит закругленные углы и отражающий блеск значку на главном экране iOS. </p> <p> Если вы предпочитаете без светоотражающего блеска, используйте следующий код: </p> <pre> <code> <link rel="apple-touch-icon-precomposed" href="http://example.com/images/apple-touch-icon.png" /> </code> </pre> <h2><span class="ez-toc-section" id="i-26"> Как изменить значок или фавикон в адресной строке.ико? </span></h2> <h3><span class="ez-toc-section" id="i-27"> Обзор </span></h3> <p> Значок «<b> Избранное </b>» или favicon – это квадратный значок, который можно добавить в закладки и который напоминает ваш веб-сайт. Эти веб-иконки могут иметь размер от 16×16 до 64×64. Большинство веб-дизайнеров включают изображение favicon.ico при разработке сайта. </p> <p> Любая программа рисования позволит создать фавикон. Поиск в Google покажет множество инструментов для создания фавиконов. Одним из популярных сайтов является http://www.favicon.cc/. </p> <p> <b> Примечание: </b> Для дополнительных доменов разместите фавикон.ico в каталоге аддон-домена. </p> <hr/> <hr/> <h3><span class="ez-toc-section" id="i-28"> Добавление фавикона на ваш веб-сайт </span></h3> <h4><span class="ez-toc-section" id="_1-2"> Шаг 1. Найдите изображение </span></h4> <ul> <li> Большинство веб-сайтов используют уменьшенную версию логотипа или что-то подобное. </li> </ul> <p> Главное, чтобы значок был простым и понятным при таком маленьком размере. Большинство интерфейсов браузера (верхняя панель инструментов, содержащая кнопки браузера) могут отображать 256 цветов, но лучше всего использовать цвета Windows 16. </p> <h4><span class="ez-toc-section" id="_2"> Шаг 2. Преобразование изображения в значок </span></h4> <h4><span class="ez-toc-section" id="_3"> Шаг 3. Добавление значка на веб-страницы </span></h4> <ol> <li> Опубликуйте значок в корневом каталоге вашего веб-сайта.Это место, где Internet Explorer будет автоматически искать ваш значок, когда посетитель добавляет ваш сайт в закладки. </li> <li> Помогите браузеру найти ваш значок, включив в html в теге <head> следующее: <pre> <code> <link rel="icon" href="http://www.your-web-site-name.com/favicon.ico"> </code> </pre> Поместите его ближе к закрывающему тегу </head>, потому что более важная информация, например ваши метатеги, должна появиться раньше. </li> <li> Сохраните свою веб-страницу и опубликуйте ее.</li> </ol> <p> Если вы хотите создать разные значки для разных страниц, просто назовите их иначе, чем favicon.ico, но при этом сохраните суффикс .ico. Ссылайтесь на них на своих страницах так же, как описано выше, просто изменив местоположение href для разных значков. </p> <h4><span class="ez-toc-section" id="_4"> Шаг 4. Проверка значка </span></h4> <ol> <li> Откройте Internet Explorer (версия 5 или выше) и добавьте свою страницу в закладки. </li> <li> Определите, отличается ли ваш значок от других веб-сайтов, добавленных в закладки с избранными значками.</li> <li> При необходимости отредактируйте свой значок и снова опубликуйте его. </li> <li> Закройте браузер и снова откройте его. Снова добавьте свою страницу в закладки, чтобы проверить новую версию значка. </li> <li> Повторяйте, пока не будете уверены, что ваш значок достаточно привлекателен. </li> </ol> <h3><span class="ez-toc-section" id="i-29"> Общие вопросы </span></h3> <h4><span class="ez-toc-section" id="_Internet_Explorer_faviconico"> При просмотре в Internet Explorer мой favicon.ico не загружается. </span></h4> <p> Есть несколько решений этой проблемы: </p> <ul> <li> Добавьте страницу в избранное. Если у вас уже есть страница в папке избранного, удалите ее и добавьте снова.</li> <li> Убедитесь, что файл значка называется favicon.ico и находится в корневой папке вашего веб-сервера. </li> <li> Убедитесь, что путь к значку в шапке вашей страницы является абсолютным, а не относительным. </li> <li> Удалите временные файлы Интернета. Если папка с временными файлами достигла максимального размера, фавикон нельзя использовать. </li> </ul> <p> Для получения дополнительной информации вы можете посетить Как сделать иконку избранного?.<div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div> </div><!-- .entry-content --> <div class="single-meta"> <footer class="entry-footer"> #<a href="https://gnomesmonetized.ru/category/raznoe-2" rel="category tag">Разное</a> </footer><!-- .entry-footer --> </div> </article><!-- #post-## --> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://gnomesmonetized.ru/raznoe-2/kakoj-dolzhen-byt-emajl-kak-pravilno-napisat-adres-elektronnoj-pochty-e-mail-%e2%9c%94-chtoby-vam-mogli-na-nee-otpravit-pismo.html" rel="prev"><span class="screen-reader-text">Предыдущая запись:</span> <span class="post-title">Какой должен быть емайл: Как правильно написать адрес электронной почты (e-mail) ✔, чтобы вам могли на нее отправить письмо…</span></a></div><div class="nav-next"><a href="https://gnomesmonetized.ru/raznoe-2/chto-znachit-kek-v-perepiske-chto-takoe-kek-yandeks-kyu.html" rel="next"><span class="screen-reader-text">Следующая запись:</span> <span class="post-title">Что значит кек в переписке: «Что такое кек?» — Яндекс.Кью</span></a></div></div> </nav> <div id="comments" class="comments-area"> <div class="comments-wrapper"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/kak-sdelat-ikonku-sajta-v-html-kak-sdelat-ikonku-sajta-na-vkladke.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://gnomesmonetized.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message" aria-hidden="true">Обязательные поля помечены <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required" aria-hidden="true">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='14037' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area" role="complementary"> <div class="theiaStickySidebar"> <div id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://gnomesmonetized.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /> </form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h5 class="widget-title center-widget-title">Рубрики</h5><div class="menu-1-container"><ul id="menu-1" class="menu"><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://gnomesmonetized.ru/category/bez-vlozhenij">Без вложений</a></li> <li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://gnomesmonetized.ru/category/raznoe">Бизнес развитие</a></li> <li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://gnomesmonetized.ru/category/bystro">Быстрый заработок</a></li> <li id="menu-item-5383" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5383"><a href="https://gnomesmonetized.ru/category/zarabot">Где заработать</a></li> <li id="menu-item-5384" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5384"><a href="https://gnomesmonetized.ru/category/zarabot-3">Заработок</a></li> <li id="menu-item-5385" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5385"><a href="https://gnomesmonetized.ru/category/shkolniku">Заработок школьнику</a></li> <li id="menu-item-5386" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5386"><a href="https://gnomesmonetized.ru/category/na-sajtax">На сайтах</a></li> <li id="menu-item-5387" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5387"><a href="https://gnomesmonetized.ru/category/proverennye">Проверенные схемы</a></li> <li id="menu-item-5389" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5389"><a href="https://gnomesmonetized.ru/category/sposoby">Способы заработка</a></li> <li id="menu-item-5390" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5390"><a href="https://gnomesmonetized.ru/category/frilans">Фриланс</a></li> <li id="menu-item-5388" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5388"><a href="https://gnomesmonetized.ru/category/raznoe-2">Разное</a></li> </ul></div></div><div id="custom_html-10" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </div></div> </div> </aside></div><!-- #content --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="copyright-area"> <div class="wrapper"> <div class="col-row"> <div class="col col-full"> <div class="site-info"> <div class="footer_image"> </div> <h4 class="site-copyright"> 2019 © Все права защищены. </h4> <div class="col col-full site-copyright"> <a href="/sitemap.xml" class="c_sitemap">Карта сайта</a> </div> </div> </div> </div> </div> </div> </footer> </div> <div class="scroll-up alt-bgcolor"> <i class="ion-ios-arrow-up text-light"></i> </div> <style type="text/css"> .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://gnomesmonetized.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=6.0' type='text/css' media='all' /> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://gnomesmonetized.ru/wp-content/plugins/pagination/css/nav-style.css?ver=6.0' type='text/css' media='all' /> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/js/skip-link-focus-fix.js?ver=20151215' id='jumla-skip-link-focus-fix-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/libraries/headroom/headroom.js?ver=6.0' id='headroom-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/libraries/headroom/jQuery.headroom.js?ver=6.0' id='jquery-headroom-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/libraries/owlcarousel/js/owl.carousel.min.js?ver=6.0' id='owlcarousel-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/libraries/magnific-popup/jquery.magnific-popup.min.js?ver=6.0' id='jquery-magnific-popup-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/twp/js/twp-scroll.js?ver=6.0' id='jquery-scroll-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/libraries/theiaStickySidebar/theia-sticky-sidebar.min.js?ver=6.0' id='theiaStickySidebar-js'></script> <script type='text/javascript' id='mediaelement-core-js-before'> var mejsL10n = {"language":"ru","strings":{"mejs.download-file":"\u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0444\u0430\u0439\u043b","mejs.install-flash":"Flash player \u043f\u043b\u0430\u0433\u0438\u043d \u0431\u044b\u043b \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d \u0438\u043b\u0438 \u043d\u0435 \u0431\u044b\u043b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d Flash player \u0438\u043b\u0438 \u0441\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441 https:\/\/get.adobe.com\/flashplayer\/","mejs.fullscreen":"\u041d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d","mejs.play":"\u0412\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438","mejs.pause":"\u041f\u0430\u0443\u0437\u0430","mejs.time-slider":"\u0428\u043a\u0430\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438","mejs.time-help-text":"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0432\u043b\u0435\u0432\u043e\/\u0432\u043f\u0440\u0430\u0432\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u0443 \u0441\u0435\u043a\u0443\u043d\u0434\u0443; \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0435\u0441\u044f\u0442\u044c \u0441\u0435\u043a\u0443\u043d\u0434.","mejs.live-broadcast":"\u041f\u0440\u044f\u043c\u0430\u044f \u0442\u0440\u0430\u043d\u0441\u043b\u044f\u0446\u0438\u044f","mejs.volume-help-text":"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c.","mejs.unmute":"\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0437\u0432\u0443\u043a","mejs.mute":"\u0411\u0435\u0437 \u0437\u0432\u0443\u043a\u0430","mejs.volume-slider":"\u0420\u0435\u0433\u0443\u043b\u044f\u0442\u043e\u0440 \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u0438","mejs.video-player":"\u0412\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440","mejs.audio-player":"\u0410\u0443\u0434\u0438\u043e\u043f\u043b\u0435\u0435\u0440","mejs.captions-subtitles":"\u0421\u0443\u0431\u0442\u0438\u0442\u0440\u044b","mejs.captions-chapters":"\u0413\u043b\u0430\u0432\u044b","mejs.none":"\u041d\u0435\u0442","mejs.afrikaans":"\u0410\u0444\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439","mejs.albanian":"\u0410\u043b\u0431\u0430\u043d\u0441\u043a\u0438\u0439","mejs.arabic":"\u0410\u0440\u0430\u0431\u0441\u043a\u0438\u0439","mejs.belarusian":"\u0411\u0435\u043b\u0430\u0440\u0443\u0441\u0441\u043a\u0438\u0439","mejs.bulgarian":"\u0411\u043e\u043b\u0433\u0430\u0440\u0441\u043a\u0438\u0439","mejs.catalan":"\u041a\u0430\u0442\u0430\u043b\u043e\u043d\u0441\u043a\u0438\u0439","mejs.chinese":"\u041a\u0438\u0442\u0430\u0439\u0441\u043a\u0438\u0439","mejs.chinese-simplified":"\u041a\u0438\u0442\u0430\u0439\u0441\u043a\u0438\u0439 (\u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439)","mejs.chinese-traditional":"\u041a\u0438\u0442\u0430\u0439\u0441\u043a\u0438\u0439 (\u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439)","mejs.croatian":"\u0425\u043e\u0440\u0432\u0430\u0442\u0441\u043a\u0438\u0439","mejs.czech":"\u0427\u0435\u0448\u0441\u043a\u0438\u0439","mejs.danish":"\u0414\u0430\u0442\u0441\u043a\u0438\u0439","mejs.dutch":"\u041d\u0438\u0434\u0435\u0440\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439 (\u0433\u043e\u043b\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439)","mejs.english":"\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439","mejs.estonian":"\u042d\u0441\u0442\u043e\u043d\u0441\u043a\u0438\u0439","mejs.filipino":"\u0424\u0438\u043b\u0438\u043f\u043f\u0438\u043d\u0441\u043a\u0438\u0439","mejs.finnish":"\u0424\u0438\u043d\u0441\u043a\u0438\u0439","mejs.french":"\u0424\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u0438\u0439","mejs.galician":"\u0413\u0430\u043b\u0438\u0441\u0438\u0439\u0441\u043a\u0438\u0439","mejs.german":"\u041d\u0435\u043c\u0435\u0446\u043a\u0438\u0439","mejs.greek":"\u0413\u0440\u0435\u0447\u0435\u0441\u043a\u0438\u0439","mejs.haitian-creole":"\u0413\u0430\u0438\u0442\u044f\u043d\u0441\u043a\u0438\u0439 \u043a\u0440\u0435\u043e\u043b\u044c\u0441\u043a\u0438\u0439","mejs.hebrew":"\u0418\u0432\u0440\u0438\u0442","mejs.hindi":"\u0425\u0438\u043d\u0434\u0438","mejs.hungarian":"\u0412\u0435\u043d\u0433\u0435\u0440\u0441\u043a\u0438\u0439","mejs.icelandic":"\u0418\u0441\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439","mejs.indonesian":"\u0418\u043d\u0434\u043e\u043d\u0435\u0437\u0438\u0439\u0441\u043a\u0438\u0439","mejs.irish":"\u0418\u0440\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439","mejs.italian":"\u0418\u0442\u0430\u043b\u044c\u044f\u043d\u0441\u043a\u0438\u0439","mejs.japanese":"\u042f\u043f\u043e\u043d\u0441\u043a\u0438\u0439","mejs.korean":"\u041a\u043e\u0440\u0435\u0439\u0441\u043a\u0438\u0439","mejs.latvian":"\u041b\u0430\u0442\u0432\u0438\u0439\u0441\u043a\u0438\u0439","mejs.lithuanian":"\u041b\u0438\u0442\u043e\u0432\u0441\u043a\u0438\u0439","mejs.macedonian":"\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0441\u043a\u0438\u0439","mejs.malay":"\u041c\u0430\u043b\u0430\u0439\u0441\u043a\u0438\u0439","mejs.maltese":"\u041c\u0430\u043b\u044c\u0442\u0438\u0439\u0441\u043a\u0438\u0439","mejs.norwegian":"\u041d\u043e\u0440\u0432\u0435\u0436\u0441\u043a\u0438\u0439","mejs.persian":"\u041f\u0435\u0440\u0441\u0438\u0434\u0441\u043a\u0438\u0439","mejs.polish":"\u041f\u043e\u043b\u044c\u0441\u043a\u0438\u0439","mejs.portuguese":"\u041f\u043e\u0440\u0442\u0443\u0433\u0430\u043b\u044c\u0441\u043a\u0438\u0439","mejs.romanian":"\u0420\u0443\u043c\u044b\u043d\u0441\u043a\u0438\u0439","mejs.russian":"\u0420\u0443\u0441\u0441\u043a\u0438\u0439","mejs.serbian":"\u0421\u0435\u0440\u0431\u0441\u043a\u0438\u0439","mejs.slovak":"\u0421\u043b\u043e\u0432\u0430\u0446\u043a\u0438\u0439","mejs.slovenian":"\u0421\u043b\u043e\u0432\u0435\u043d\u0441\u043a\u0438\u0439","mejs.spanish":"\u0418\u0441\u043f\u0430\u043d\u0441\u043a\u0438\u0439","mejs.swahili":"\u0421\u0443\u0430\u0445\u0438\u043b\u0438","mejs.swedish":"\u0428\u0432\u0435\u0434\u0441\u043a\u0438\u0439","mejs.tagalog":"\u0422\u0430\u0433\u0430\u043b\u043e\u0433","mejs.thai":"\u0422\u0430\u0439\u0441\u043a\u0438\u0439","mejs.turkish":"\u0422\u0443\u0440\u0435\u0446\u043a\u0438\u0439","mejs.ukrainian":"\u0423\u043a\u0440\u0430\u0438\u043d\u0441\u043a\u0438\u0439","mejs.vietnamese":"\u0412\u044c\u0435\u0442\u043d\u0430\u043c\u0441\u043a\u0438\u0439","mejs.welsh":"\u0412\u0430\u043b\u043b\u0438\u0439\u0441\u043a\u0438\u0439","mejs.yiddish":"\u0418\u0434\u0438\u0448"}}; </script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.16' id='mediaelement-core-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-includes/js/mediaelement/mediaelement-migrate.min.js?ver=6.0' id='mediaelement-migrate-js'></script> <script type='text/javascript' id='mediaelement-js-extra'> /* <![CDATA[ */ var _wpmejsSettings = {"pluginPath":"\/wp-includes\/js\/mediaelement\/","classPrefix":"mejs-","stretching":"responsive"}; /* ]]> */ </script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-includes/js/mediaelement/wp-mediaelement.min.js?ver=6.0' id='wp-mediaelement-js'></script> <script type='text/javascript' id='jumla-script-js-extra'> /* <![CDATA[ */ var jumlaVal = {"nonce":"b5b564d714","ajaxurl":"https:\/\/gnomesmonetized.ru\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/twp/js/custom-script.js?ver=6.0' id='jumla-script-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-includes/js/comment-reply.min.js?ver=6.0' id='comment-reply-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> </body> </html>