Favicon как установить: Как установить фавикон (favicon) на сайт

Содержание

Как добавить иконку сайта в адресную строку браузера?

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

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

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

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.

Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

<head>
 <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head>
 <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>

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

Формат ICO и другие графические форматы иконок. Установка фавикон на сайт с поддержкой для iOS, Android и др. устройств, а также новинок HTML5. Пошаговая инструкция, от простого к сложному, доступно и наглядно, для начинающих веб-мастеров.

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

Так вы узнаете о некоторых секретах формата ICO, проблемах с Internet Explorer и их устранении, о новых графических форматах favicon (прозрачных и анимированных), стандартах HTML5 и иконках для мобильных устройств под iOS и Android, а также многое другое.

Содержание:

  • Формат ICO
  • Файл favicon.ico
  • image/vnd.microsoft.icon vs image/x-icon?
  • BugFix для Internet Explorer
  • Другие графические форматы фавикон
  • Фавикон в HTML5
  • Favicon.ico для мобильных браузеров
    • Фавикон для Apple
    • Фавикон для Android
  • Адрес файла favicon. ico
  • Как установить фавикон иконку на сайт?

Формат ICO

А начну я с того, что формат ICO (Windows icon) был разработан компанией Microsoft для значков файлов. Он аналогичен формату CUR (Windows cursors) и наиболее близок к BMP. Отличие лишь в заголовках, а также наличии маски, что и позволяет создавать прозрачность в рисунках. Однако

альфа-канал (полупрозрачность) для 32-битных значков появился лишь в Windows XP.

Файл favicon.ico

Идея с файлом favicon.ico (картинкой 16х16 пикселей) тоже принадлежит Microsoft, которую они реализовали для закладок в Internet Explorer 5. Отсюда и название fav – сокращённо от favorite – избранное, а icon – значок. На данный момент этот формат поддерживается всеми популярными браузерами, но главное в деталях. Условно обобщённый вариант установки фавикон на сайт имеет следующий вид:

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

Обратите внимание на то, что в приведённом примере используется два отношения:

shortcut (с англ. ярлык) и icon (с англ. иконка). Фишка в том, что shortcat здесь является излишним, и был оставлен лишь для старых версий Internet Explorer, но он должен идти перед icon.

image/vnd.microsoft.icon vs image/x-icon?

Интересно и то, что в 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в IANA и его MIME-типом стал image/vnd.microsoft.icon. Проблема в том, что старые версии Internet Explorer не могут корректно интерпретировать его, так что лучше использовать старый image/x-icon.

BugFix для Internet Explorer

Не забываем и о том, что для Internet Explorer можно использовать HTML-костыли основанные на комментариях, например:

<!—[if IE]>
<link rel=»shortcut icon» href=»http://sitename. ru/favicon.ico» />
<![endif]—>

Другие графические форматы фавикон

Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF, их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5), а вот анимированный

GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.

Приведу несколько корректных примеров вставки favicon в соответствующих форматах на сайт:

<link rel=»icon» type=»image/png» href=»http://sitename.ru/favicon.png» />
<link rel=»icon» type=»image/gif» href=»/favicon.gif» />
<link rel=»icon» type=»image/jpeg» href=»/favicon.gif» />
<link rel=»icon» type=»video/png» href=»/animated.png» />
<link rel=»icon» type=»image/svg+xml» href=»/favicon. svg» />

Обращаю внимание на то, что для APNG использует MIME-тип video/png, а для GIF (даже анимированного) – image/gif. Также интересен здесь и MIME-тип для SVG формата, это image/svg+xml.

Фавикон в HTML5

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

{ширина1}x{высота1} [{ширинаN}x{высотаN}] | any

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

<link rel=icon href=favicon.png type=»image/png»>
<link rel=icon href=windows.ico type=»image/vnd.microsoft.icon»>
<link rel=icon href=mac.icns>
<link rel=icon href=iphone.png type=»image/png»>
<link rel=icon href=gnome. svg type=»image/svg+xml»>

Favicon.ico для мобильных браузеров

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

Фавикон для Apple

Например, для Safari на iOS рекомендуется следующий набор отношений:

<link rel=»apple-touch-icon» href=»/2014/05/ipad-retina.png» />

<link rel=»apple-touch-icon» href=»/2014/05/iphone-retina.png» />
<link rel=»apple-touch-icon» href=»/2014/05/ipad.png» />
<link rel=»apple-touch-icon» href=»/2014/05/iphone.png» />

Если атрибут sizes не указан, используется значение по умолчанию 57×57.

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

  • apple-touch-icon-57×57.png
  • apple-touch-icon-72×72. png
  • apple-touch-icon-114×114.png
  • apple-touch-icon-144×144.png

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

<link rel=»apple-touch-icon-precomposed» href=»/2014/05/ipad-retina.png» />
<link rel=»apple-touch-icon-precomposed» href=»/2014/05/iphone-retina.png» />
<link rel=»apple-touch-icon-precomposed» href=»/2014/05/ipad.png» />
<link rel=»apple-touch-icon-precomposed» href=»/2014/05/iphone.png» />

Здесь тоже имеется набор автоматически распознаваемых имён:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-72×72-precomposed.png
  • apple-touch-icon-114×114-precomposed.png
  • apple-touch-icon-144×144-precomposed.png

Фавикон для Android

Браузеры на базе Android унаследовали формат Apple. По сути, будет достаточно указать, что-то вроде следующего:

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

Адрес файла favicon.ico

Наверное, Вы обратили внимание на то, что в некоторых примерах используется относительный, а не абсолютный путь к фавикон? Это не случайно, т.к. помимо HTTP сейчас набирает обороты HTTPS. Для избежания проблем, в абсолютном адресе, проще не указывать протокол, например:

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

или использовать относительный путь.

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

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

<!—[if IE]>
<link rel=»shortcut icon» href=»http://sitename.ru/favicon.ico» />
<![endif]—>
<link rel=»icon» type=»image/png» href=»/favicon.png» />
<link rel=»icon» type=»image/gif» href=»/favicon.gif» />
<link rel=»apple-touch-icon» href=»/apple-touch-icon-57×57. png» />
<link rel=»apple-touch-icon-precomposed» href=»/apple-touch-icon-57×57-precomposed.png»/>

Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на shortcut. Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57×57 пикселей, одну без эффектов, а другую со своими эффектами (precomposed – отключит эффекты браузера). Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь, начиная от корня сайта (/ – в начале адреса), но для IE, наверное, лучше будет использовать абсолютный путь.

На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. – пишите. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/LVkHdk

Подробное руководство по фавикону для сайта

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

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

Favicon (от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.

Значок отображается:

  • браузером на открытой вкладке и в закладках рядом с URL сайта;
  • в качестве ярлыка на смартфоне, если пользователь вынесет сайт на рабочий стол;
  • в поисковой выдаче Яндекса около заголовка на сниппете сайта.
Сайты с фавиконами в выдаче Яндекса

В Google фавиконки не отображаются. Поисковик периодически тестирует эту функцию, так что они могут появиться в будущем.

Фавиконки в выдаче Google (тест)

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

Зачем нужен фавикон

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

  • Выделяет сайт в выдаче

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

Сайт без фавикона в выдаче среди прочих
  • С фавиконом сайт запоминается лучше

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

Логотип компании в фавиконе
  • Упрощает поиск нужного сайта

В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.

Закладки в Google Chrome
  • Избавляет от ошибки в лог-файлах

Браузеры запрашивают файл favicon. ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.

К примеру, такую:

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at <a href="http://localhost:8383/favicon.ico">http://localhost:8383/favicon.ico</a>

Какую картинку выбрать для фавикона

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

Фавикон с чашкой для сайта о кофе выглядит гармоничнее

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

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

Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.

Как создать favicon для сайта

Есть три самых распространенных способа:

  1. Специальный плагин для Photoshop
    Позволяет работать этому популярному редактору изображений с форматом ico.
  2. Специальные программы для изготовления фавиконов
    Они специально «заточены» для изготовления иконок для сайта.
  3. Онлайн генератор favicon
    Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.

Панель бесплатного генератора фавикона

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

  1. Создайте картинку для фавикона с именем favicon.ico.
  2. Готовый файл нужно сохранить в корневом каталоге сайта. 
  3. Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению  https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
  4. Добавьте ссылку на размещенный файл в HTML-код главной:
...
<link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">
...

Атрибут «rel» указывает на тип ресурса. Большинство браузеров распознают «icon», для Internet Explorer нужен «shortcut icon».

...
<link rel="shortcut icon" href="<img="" src="https://sitename.ru/favicon.png">" type="image/x-icon">
...

От формата файла зависит тип передаваемых данных. Для ICO это «image/x-icon» или «image/vnd.microsoft.icon», для PNG — «image/png» и аналогично для других форматов.

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

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

Как установить разные favicon для отдельных страниц

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

Фавиконы на разных разделах одного сайта


Как установить разные фавиконки разделам сайта:

  1. Фавикон для главной и остальных страниц назовите favicon.ico, для отдельных разделов укажите названия по этим разделам, чтобы не запутаться.
  2. В коде нужной страницы пропишите путь к другой фавиконке раздела:
<link rel="icon" href="http://ваш-сайт. ru/путь_к_иконке/favicon_blog.ico" type="image/ico">

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

С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.

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

Фавиконы сайтов на экране смартфона

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

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

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

<link rel="icon" type="image/ico" href="/icons/favicon.ico">
<link rel="icon" type="image/ico" href="/icons/favicon.ico">
<link rel="shortcut icon" href="/icons/favicon.ico">

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

Android


Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

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

Пример кода:

{
    "name": "%title%",
    "icons": [
        {
            "src": "\/android-chrome-36x36. png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4. 0"
        }
    ]
}

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

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

<meta name="msapplication-TileColor" content="#da532c">

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

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. 

В rel нужно указать “apple-touch-icon.png”.

Пример кода:

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

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Пример кода:

<link rel="mask-icon" href="mask.svg" color="red">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

У Microsoft есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70. png">
<square150x150logo src="/mstile-150x150.png">
<square310x310logo src="/mstile-310x310.png">
<wide310x150logo src="/mstile-310x150.png">
<tilecolor>#da532c</tilecolor>
</wide310x150logo></square310x310logo></square150x150logo></square70x70logo></tile>
</msapplication>
</browserconfig>

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

Установка Favicon на сайт

Вы здесь: Главная — HTML — HTML Основы — Установка Favicon на сайт

Favicon — это небольшая картинка размером 16×16 (или 32×32) пикселя, которая находится в браузере слева от адресной строки. Почему-то не так много людей добавляют favicon на свои сайты. На мой взгляд, они многое теряют. Например, в Yandex отображаются иконки сайтов, и люди переходят по таким сайтам гораздо чаще, чем по тем, на которых нет favicon. Также, на мой взгляд, это немного повышает авторитетность сайта. В общем, в этой статье мы установим favicon на сайт.

Для начала как найти favicon. Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc. На нём Вы прямо в онлайне создадите себе favicon. Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ — это воспользоваться поиском и запросом: «коллекция favicon«. Думаю, что уже первый сайт покажет Вам тысячи различных favicon, и Вам останется его только выбрать.

Теперь второй шаг — установка favicon на сайт. Для этого добавьте внутри тега <head> следующую строку:

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

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

После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.

Иногда favicon появляется не сразу. Как правило, виновато кэширование браузера. Поэтому если картинка отсутствует, то попробуйте очистить кэш браузера (в настройках это должно быть). Также может помочь перезапуск браузера. Но ещё раз говорю: если Вы всё сделали правильно, то favicon на Вашем сайте появится.

Вот и всё, что хотелось рассказать об установке favicon на сайт.

Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

  • Создано 05.12.2010 10:17:20
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

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

Favicon (сокр. от англ.FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

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

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

Например, с помощью сайта favicon.ru.

Заходим на сайт. Здесь мы видим, что можно создать фавиконку 3-мя способами:

  1. Заказать favicon у профессионалов
  2. Сделать favicon из изображения
  3. Нарисовать иконку

Давайте разберем каждый пункт.

Как сделать favicon из изображения

1. Для того чтобы сделать фавиконку из изображения нажимаем «Выберите файл».

2. Выбираем нужное изображение, которое сохранено на вашем компьютере и нажимаем «Открыть».

3. Я выбрала вот такую белочку:) Зеленый квадрат, который вы видите на изображении, можно перемещать, менять размер. Когда вы всё настроете, то нажимаете «Далее».

4.  Вот что мы получили в итоге. Не пугайтесь того, что у вас получилось) Иконка всего лишь 16х16 и будет выглядеть хорошо. Результат вы видите ниже. Если вас всё устраивает, то нажимаем «Скачать Favicon» и готово!

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

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

 Установка favicon на сайт

Разместить favicon можно несколькими способами, которые мы сейчас рассмотрим.

Вставляем фавикон с помощью настроек темы WordPress

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

1. Находим вкладку «Внешний вид», затем «Настроить».

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

3. Выбираем нужное изображение.

4. Нажимаем «Сохранить и опубликовать».

5. Смотрим результат.

Установка иконки через корневой каталог

1. Заходим в панель управления и в «Диспетчер файлов».

2. Если у вас один сайт, то иконку нужно поместить в public_html, если у вас несколько сайтов, которые разбросаны по папкам, то сначала открываем папку с нужным сайтом и туда помещаем favicon.

3. Затем нажимаем «Загрузить».

4. Готово! Наша favicon установлена!

Установка с помощью плагина favicon для WordPress

Для того, чтобы использовать этот метод, вам нужно скачать плагин Favicons для WordPress (щелкните по ссылке). После этого вам нужно его установить.

  1. Иконкой можно сделать граватар.
  2. Если вы хотите использовать свой значок, то нужно указать путь к файлу.
  3. Можно использовать иконки из набора значков.

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

Как установить фавикон на WordPress сайт и правильно подключить

👍 Научим создавать сайты на WordPress бесплатно за 11 уроков. Подробнее →

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

Что такое favicon и зачем нужно устанавливать на сайт

Это маленькая картинка, которая видна слева во вкладке браузера на открытой странице сайта. Также отображается в поисковой выдаче Яндекс. Размер изображения рекомендуется создавать небольшой – от 120 до 512 пикселей. Если меньше, то может нечетко выглядеть, будет менее заметным среди сохраненных избранных закладок.

Какой лучше формат иконки сделать

Это могут быть типы файлов: SVG, PNG, ICO, GIF, JPEG, BMP. Чаще всего используют первые три. А вообще алгоритм такой – четче иконка и меньший размер файла.

Как создать фавиконку бесплатно

Можете скачать уже готовую (с бесплатных ресурсов типа freepik.com, iconsdb.com и других, которые отлично ищутся в интернете) или создать свою с помощью сервиса favicon.io. Последний позволит сгенерировать Favicon из загруженного фото, текста или смайлика Emoji, скачать в форматах ICO/PNG и в разных размерах.

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

Разберем 2 варианта.

С помощью Настройщика темы

Обычно в любом WP-шаблоне пользователь сможет задать фавиконку для своего сайта – в админ-разделе Внешний вид > Настроить > Свойства сайта.

В других темах расположение опции добавления фавикона может отличаться. Например, для Astra нужно в Кастомайзере перейти в секцию Шапка > Айдентика сайта.

Прописать код вручную

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

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

Добавить информацию о фавиконе и его формате можно несколькими способами. Например, в плагинах Clearfy Pro, Code Snippets или через файл functions.php.

Какой вариант вы бы не выбрали, в HTML-раздел <head> ВордПресс-сайта нужно добавить код

<link rel="icon" href="URL-ссылка на картинку фавиконки" type="image/jpeg">

Значение атрибута type зависит от типа картинки:

  • .ico – “image/x-icon”,
  • .jpeg – “image/jpeg”,
  • .png – “image/png”,
  • .bmp – “image/bmp”,
  • .gif – “image/gif”.

Фавиконку на хостинг можете загрузить с помощью встроенных средств CMS – через админ-меню Медиафайлы > Добавить новый.

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

Мне нравится4Не нравится

Если Вам понравилась статья — поделитесь с друзьями

Как установить favicon на WordPress — пошаговая инструкция

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

Зачем вообще нужен favicon? Ведя поиск в интернете, часто пользователи открывают множество вкладок в браузере. С большим количеством вкладок названия страниц сайтов будут спрятаны. Если вы установите favicon, то пользователь сможет отыскать ваш сайт без необходимости проверять каждую открытую вкладку. Это улучшает удобство работы с сайтами и поможет сделать сайт узнаваемым среди пользователей.

Как создать favicon

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

ВИДЕО ПО ТЕМЕ:
Прочитать статью — хорошо, а прочитать статью

и посмотреть видео — еще лучше!

Смотрите наши видео, как создать интернет-магазин на WordPress с нуля

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

Установка favicon на WordPress может осуществляться несколькими методами. Рассмотрим каждый из них.

Метод 1. С помощью панели управления WordPress

Если у вас версия Wordpress 4.3 и выше, вы можете добавить favicon непосредственно в администраторской панели управления: выполните вход в панель управления WordPress и перейдите в меню Внешний вид >> Настроить.

Вы попадете в меню Настройки текущей темы вашего сайта. Теперь перейдите в меню Свойства сайта.

Нажмите на Выбрать Изображение и загрузите изображение, которое хотите использовать для favicon.

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

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

Теперь вы можете открыть ваш сайт и увидеть добавленный favicon.

Метод 2. С помощью плагина All In One Favicon

Для начала нужно установить сам плагин. Перейдите в меню Плагины >> Добавить Новый и установите All In One Favicon.

После установки плагина, перейдите в меню Настройки >> All in one Favicon.

Загрузите изображение в строках ICO Frontend и ICO Backend, а затем сохраните настройки.

Теперь обновите страницу вашего сайта и вы увидите добавленный favicon.

85 % пользователей не будут покупать через веб-сайт, если они не уверены, что их данные передаются безопасно.
Защитите свой сайт с SSL-сертификатом и не теряйте клиентов!

Метод 3. С помощью изменения header.php файла

Выполните вход в контрольную панель вашего хостинга. Рассмотрим этот пример на cPanel.

Перейдите в меню cPanel >> Диспетчер файлов.

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

После этого favicon должен отобразиться автоматически.

Однако в некоторых случаях вам необходимо будет внести ручные изменения. Всё зависит от особенностей вашей WordPress-темы.

Важно: перед тем, как вносить какие-либо изменения, убедитесь, что у вас есть резервная копия темы.

Перейдите в меню Внешний вид >> Редактор.

Выберите для редактирования Заголовок Темы (файл header.php).

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

<link rel="icon" href="http://www.yourdomain.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.yourdomain.com/favicon.ico" type="image/x-icon" />

Не забудьте поменять “yourdomain.com” на ваш домен.

Теперь нажмите на Сохранить файл и перезагрузите страницу.

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

Делайте блог на хостинге с предустановленным WordPress!
Наша теплая поддержка на связи 24/7

Читайте также:

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

С появлением телефонов (i | android | windows) все изменилось, и получение правильного и полного решения, работающего на любом устройстве, действительно занимает много времени.

Вы можете заглянуть на https://realfavicongenerator.net/favicon_compatibility или http://caniuse.com/#search=favicon, чтобы получить представление о том, как лучше всего получить что-то, что работает на любом устройстве.

Вам стоит взглянуть на http://realfavicongenerator.net/ чтобы автоматизировать большую часть этой работы, и, возможно, на https: // github.com / audreyr / favicon-cheat-sheet, чтобы понять, как это работает (даже если последний ресурс давно не обновлялся).

Одно полное решение требует добавления в заголовок следующего содержания (конечно, с соответствующими изображениями и файлами):

  

















  

В июне 2016 года RealFaviconGenerator заявил, что следующие 5 строк кода поддерживают столько же устройств, сколько предыдущие 18 строк:

  





  

Как создать и установить favicon.ico (Linux, GNU, Windows, Unix)

Как создать и установить favicon.ico (Linux, GNU, Windows, Unix) [Обзор] [Новости] [Утилиты] [Статьи] [Наука] [Стар.]

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

.ico

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

Favicon — это сокращение от «Значок избранного» («Значок избранного» для вас Американцы;). Название получено из списка закладок для Microsoft. Internet Explorer, который называется «Избранное» / «Список избранного». Когда вы добавляете сайт в список избранного / избранного, Internet Explorer (версия 5 и выше) спрашивает сервер, есть ли у него файл позвонил favicon.ico . Если присутствует, этот файл будет использоваться для отображения значка. рядом с текстом закладки.

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

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

Чтобы создать favicon.ico , просто создайте файл .PNG размером 16×16 и преобразуйте его. в ресурс значков с png2ico.Если хотите, можете добавить больше изображений в тот же ресурс значков для предоставления альтернативных разрешений. Самый браузеры используют только изображение 16×16, но в другом контексте (например, когда вы перетаскиваете URL-адрес из адресной строки на рабочий стол) может отображаться значок большего размера. Если ресурс значка содержит только изображение 16×16, оно будет масштабировано до подходящего размера, поэтому технически нет необходимости добавлять альтернативу резолюции. Однако это может повысить качество отображаемого значка.

Имейте в виду, что для пользователя с медленным модемом значок .ico может увеличиться время загрузки страницы на несколько секунд, если оно слишком велико, поэтому не переусердствовать над этим. Добавление альтернативы 32×32 должно быть достаточно, чтобы изображение будет хорошо смотреться даже в контексте с более крупными значками. Добавление еще большего количества и больших альтернатив — ненужное раздувание. Постарайтесь, чтобы количество цветов было меньше 16 и создайте значок из 16 цветов, используя переключатель --colors 16 png2ico (или даже создать значок ч / б с переключателем --colors 2 ). Это приведет к меньшему файл, который загружается быстрее.

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

Установка вашего Favicon

Чтобы добавить новый значок favicon.ico на веб-страницу поместите его на сервер в тот же каталог, что и веб-страница, для (например, www.example.com/foo/favicon.ico для www.example.com/foo/index.html ). Это первое место браузер будет искать. Если он не находит там значка, он проверяет каталог верхнего уровня сервера ( www.example.com/favicon.ico для сервера www.example.com ), поэтому, поместив его туда, вы можете получить значок по умолчанию для всех страниц в вашем домене.В зависимости от браузер и конфигурация, favicon.ico не всегда отображается, даже если он находится в одном из указанных выше мест, если веб-страница явно не заявляет о своем присутствии. Заявить, что на вашей веб-странице есть значок, вы добавляете следующие 2 строки в раздел вашей страницы:




[Обзор] [Новости] [Утилиты] [Статьи] [Наука] [Стар.]

Авторские права (c) 2000-2010, Матиас Бенкманн

[проверить эту страницу]

Как создать и добавить значок

Что за значок и как его получить?

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

У нас красная буква «е».

Поскольку я использую Google Chrome, значки отображаются как на вкладке браузера, так и на панели закладок.

Почему значки значков так важны?

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

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

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

Создание значка Favicon

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

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

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

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

Сначала я открыл наш логотип в Photoshop и обрезал его, чтобы включить только ту часть, которую я хотел для нашей.Для достижения наилучших результатов используйте логотип или изображение с прозрачным фоном. ( пользователей WordPress : хотя ваш значок будет иметь размер только 16 на 16 пикселей, WordPress предлагает конечный размер 512 на 512 пикселей, поэтому начните с большого изображения.)

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

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

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

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

WordPress упростил добавление значков на ваш сайт.Сначала войдите в панель администратора WordPress. В пункте меню «Внешний вид» выберите «Настроить».

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

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

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

Добавление значка с кодом

Если вы не используете WordPress для своего сайта, не волнуйтесь. Вы также можете добавить значки в код своего веб-сайта. Вам потребуется доступ к разделу вашего сайта через CMS или FTP-клиент.

Загрузите значок на свой сервер и запишите URL-адрес его местоположения. Например: http://www.mywebsite.com/images/favicon.ico

Добавьте следующий код в теги прямо над или под тегом , заменив атрибут href на URL местоположения вашего значка: </p> <p> <em> <link rel = "ярлык" type = "image / x-icon" href = "http: // www.mywebsite.com/images/favicon.ico ”/> </em> </p> <p> Сохраните изменения и откройте свой веб-сайт, чтобы увидеть новый значок! </p> <p> </p> <h2><span class="ez-toc-section" id="i-24"> значков — </span></h2> npm <p> </p> <p> Модуль Node.js для создания значков и связанных с ними файлов. Первоначально созданный для Web Starter Kit и Catalyst от Google. Требуется Node 4+. Устанавливается через NPM с помощью: </p> <pre> <code> npm установить значки </code> </pre> <h3><span class="ez-toc-section" id="i-25"> Использование </span></h3> <h4><span class="ez-toc-section" id="Nodejs"> Node.js </span></h4> <p> Чтобы использовать Favicons, потребуйте соответствующий модуль и вызовите его, необязательно указав конфигурацию и объекты обратного вызова.Образец показан справа. Полный список опций можно найти на GitHub. </p> <p> Модули-оболочки Gulp / Grunt имеют несколько дополнительных свойств. Вы также можете настроить и использовать Favicons из терминала с точечным синтаксисом. </p> <p> Favicons генерирует свои значки локально, используя чистый Javascript без внешних зависимостей. </p> <p> Обратите внимание: Favicons протестирован на узле 10.13 и выше. </p> <pre> var favicons = require ("favicons"), source = "test / logo.png", // Исходное изображение (я).строка, буфер или массив строк configuration = { path: "/", // Путь для замены пути значков по умолчанию. `строка` appName: null, // Имя вашего приложения. `строка` appShortName: null, // Короткое имя вашего приложения. `строка`. По желанию. Если не установлено, будет использоваться appName. appDescription: null, // Описание вашего приложения. `строка` developerName: null, // Ваше (или имя вашего разработчика) имя. `строка` developerURL: null, // Ваш URL (или адрес вашего разработчика). `строка` dir: "auto", // Основное направление текста для name, short_name и description lang: "en-US", // Основной язык для имени и краткого_имя background: "#fff", // Цвет фона для плоских значков.`строка` theme_color: "#fff", // Пользовательский цвет темы, например, в переключателе задач Android. `строка` appleStatusBarStyle: «black-translucent», // Стиль строки состояния Apple: «black-translucent», «default», «black». `строка` display: "standalone", // Предпочтительный режим отображения: "fullscreen", "standalone", "minimal-ui" или "browser". `строка` Ориентация: «любая», // Ориентация по умолчанию: «любая», «естественная», «портретная» или «альбомная». `строка` scope: "/", // набор URL-адресов, которые браузер рассматривает в вашем приложении start_url: "/? homescreen = 1", // Стартовый URL при запуске приложения с устройства.`строка` version: "1.0", // Строка версии вашего приложения. `строка` logging: false, // Печатать журналы на консоль? `логическое` pixel_art: false, // Сохраняет пиксели «резкими» при увеличении для пиксельной графики. Поддерживается только в автономном режиме. loadManifestWithCredentials: false, // Браузеры не отправляют файлы cookie при получении манифеста, включите это, чтобы исправить это. `логическое` icons: { // Параметры платформы: // - смещение - смещение в процентах // - фон: // * false - использовать по умолчанию // * true - принудительно использовать значение по умолчанию, e.грамм. установить фон для значков Android // * цвет - установить фон для указанных иконок // * маска - применить маску для создания значка круга (применяется по умолчанию для firefox). `логическое` // * overlayGlow - применить эффект свечения после наложения маски (применяется по умолчанию для firefox). `логическое` // * overlayShadow - применить тень после применения маски. // android: true, // Создаем значок рабочего стола Android. `boolean` или` {offset, background, mask, overlayGlow, overlayShadow} `или массив источников appleIcon: true, // Создание значков Apple Touch.`boolean` или` {offset, background, mask, overlayGlow, overlayShadow} `или массив источников appleStartup: true, // Создание загрузочных образов Apple. `boolean` или` {offset, background, mask, overlayGlow, overlayShadow} `или массив источников Coast: true, // Создать иконку Opera Coast. `boolean` или` {offset, background, mask, overlayGlow, overlayShadow} `или массив источников favicons: true, // Создание обычных значков. `boolean` или` {offset, background, mask, overlayGlow, overlayShadow} `или массив источников firefox: true, // Создаем значки Firefox OS.`boolean` или` {offset, background, mask, overlayGlow, overlayShadow} `или массив источников windows: true, // Создание значков плитки Windows 8. `boolean` или` {offset, background, mask, overlayGlow, overlayShadow} `или массив источников yandex: true, // Создать иконку браузера Яндекс. `boolean` или` {offset, background, mask, overlayGlow, overlayShadow} `или массив источников }, }, callback = function (error, response) { if (error) { console.log (сообщение об ошибке); // Описание ошибки e.грамм. "Произошла неизвестная ошибка" возвращение; } console.log (response.images); // Массив {имя: строка, содержимое: <буфер>} console.log (файлы ответов); // Массив {имя: строка, содержимое: <строка>} console.log (response.html); // Массив строк (элементы html) }; значки (источник, конфигурация, обратный вызов); </pre> <p> Источники по умолчанию следующие (сгруппированы по платформам): </p> <pre> { "android": [ "android-chrome-144x144.png", "android-chrome-192x192.png ", "android-chrome-256x256.png", "android-chrome-36x36.png", "android-chrome-384x384.png", "android-chrome-48x48.png", "android-chrome-512x512.png", "android-chrome-72x72.png", "android-chrome-96x96.png" ], "appleIcon": [ "apple-touch-icon-1024x1024.png", "apple-touch-icon-114x114.png", "apple-touch-icon-120x120.png", "apple-touch-icon-144x144.png", "apple-touch-icon-152x152.png", "apple-touch-icon-167x167.png", "яблоко-сенсорный-значок-180x180.png ", "apple-touch-icon-57x57.png", "apple-touch-icon-60x60.png", "apple-touch-icon-72x72.png", "apple-touch-icon-76x76.png", "apple-touch-icon-precomposed.png", "apple-touch-icon.png" ], "appleStartup": [ "apple-touch-startup-image-1125x2436.png", "apple-touch-startup-image-1136x640.png", "apple-touch-startup-image-1242x2208.png", "apple-touch-startup-image-1242x2688.png", "apple-touch-startup-image-1334x750.png", "яблоко-сенсорный-запуск-изображение-1536x2048.png ", "apple-touch-startup-image-1620x2160.png", "apple-touch-startup-image-1668x2224.png", "apple-touch-startup-image-1668x2388.png", "apple-touch-startup-image-1792x828.png", "apple-touch-startup-image-2048x1536.png", "apple-touch-startup-image-2048x2732.png", "apple-touch-startup-image-2160x1620.png", "apple-touch-startup-image-2208x1242.png", "apple-touch-startup-image-2224x1668.png", "apple-touch-startup-image-2388x1668.png", "apple-touch-startup-image-2436x1125.png ", "apple-touch-startup-image-2688x1242.png", "apple-touch-startup-image-2732x2048.png", "apple-touch-startup-image-640x1136.png", "apple-touch-startup-image-750x1334.png", "apple-touch-startup-image-828x1792.png" ], "побережье": [ "Coast-228x228.png" ], "значки": [ "favicon-16x16.png", "favicon-32x32.png", "favicon-48x48.png", "favicon.ico" ], "Fire Fox": [ "firefox_app_128x128.png", "firefox_app_512x512.png", "firefox_app_60x60.png" ], "окна": [ "mstile-144x144.png ", "mstile-150x150.png", "mstile-310x150.png", "mstile-310x310.png", "mstile-70x70.png" ], "яндекс": [ "yandex-browser-50x50.png" ] } </pre> <p> Вы можете программно получить доступ к конфигурации Favicons (имена файлов значков, HTML, файлы манифеста и т. Д.) С помощью: </p> <pre> var config = require ("значки"). Config; </pre> <h4><span class="ez-toc-section" id="i-26"> Глоток </span></h4> <p> Чтобы использовать Favicons с Gulp, вы можете использовать gulp-plugin или вызвать его вручную следующим образом: </p> <pre> var favicons = require ("favicons").транслировать, журнал = требовать ("фантазии журнал"); gulp.task ("по умолчанию", function () { ответный глоток .src ("logo.png") .трубка( значки ({ appName: "Мое приложение", appShortName: "Приложение", appDescription: "Это мое приложение", developerName: "Хайден Близел", developerURL: "http://haydenbleasel.com/", фон: "# 020307", путь: "favicons /", url: "http://haydenbleasel.com/", дисплей: "автономный", ориентация: «портрет», сфера: "/", start_url: "/? homescreen = 1", версия: 1.0, ведение журнала: ложь, html: "index.html", pipeHTML: правда, заменить: правда, }) ) .on ("ошибка", журнал) .pipe (gulp.dest ("./")); }); </pre> <h3><span class="ez-toc-section" id="i-27"> Выход </span></h3> <p> Полный список файлов см. В <code> config / files.json </code>. Полный HTML-код можно найти в <code> config / html.js </code>. Наконец, чтобы увидеть полный список значков, проверьте <code> config / icons.json </code>. </p> <h3><span class="ez-toc-section" id="i-28"> Вопросы </span></h3> <blockquote> <p> Почему вам не хватает определенных значков? </p> </blockquote> <p> Потому что чистые модули Javascript в настоящий момент недоступны.Например, для значка SVG El Capitan и возможности плитки Windows требуется поддержка SVG. Если модули для этой задачи начинают появляться, переходите к соответствующей проблеме, и мы займемся этим как можно скорее. </p> <h3><span class="ez-toc-section" id="i-29"> Спасибо </span></h3> <h3><span class="ez-toc-section" id="i-30"> Вклад </span></h3> <p> Не стесняйтесь продвигать свой код, если вы согласны с публикацией по лицензии MIT. </p> <p> При тестировании не забывайте обновлять снимки каждый раз, когда вы их редактируете: <code> ava --update-snapshots </code>. </p> <h2><span class="ez-toc-section" id="_WordPress_3"> Как добавить фавикон WordPress на свой сайт (3 простых варианта) </span></h2> <p> Фавиконы чаще всего называются небольшими значками, которые отображаются рядом с названиями веб-сайтов на вкладках браузера.Однако, несмотря на то, что они возникли именно там, ваш значок WordPress также используется в других местах, таких как закладки браузера, кнопки главного экрана iOS и многое другое. </p> <p> Таким образом, это важная часть вашего бренда. При правильном использовании ваш значок или значок сайта могут помочь пользователям легко идентифицировать вашу компанию. Это может помочь повысить узнаваемость бренда и даже улучшить пользовательский интерфейс (UX) сайта. </p> <p> В этой статье мы обсудим преимущества использования значка на сайте WordPress.Затем мы объясним, как его создать, и рассмотрим три простых варианта добавления его на свой сайт. </p> <p> Наконец, мы завершим его некоторыми советами и передовыми методами работы с иконками WordPress. Давайте начнем! </p> <h3><span class="ez-toc-section" id="_WordPress_Favicon"> Преимущества использования WordPress Favicon </span></h3> <p> Если у вас когда-либо было открыто слишком много вкладок одновременно (виновато!), Вы, вероятно, оцените полезность значка. Фавикон позволяет пользователям быстро идентифицировать ваш веб-сайт, когда в их браузере открыто несколько вкладок: </p> <p> Значок Kinsta в браузере Chrome </p> <p> В зависимости от количества открытых вкладок заголовок вашего сайта может быть не всегда виден.Следовательно, добавление значка может помочь улучшить UX для ваших посетителей. </p> <p> Помимо повышения узнаваемости бренда, использование значка WordPress также может сделать ваш сайт более профессиональным и авторитетным. В свою очередь, это может помочь повысить доверие клиентов. </p> <p> Кроме того, если кто-то сохранит ваш веб-сайт на главном экране своего мобильного устройства, ваш значок будет отображаться в виде значка. Использование логотипа вашего бренда или подобных изображений может помочь сделать ваш сайт более узнаваемым и в целом помочь в создании единой эстетики.</p> Встречайте значок, также известный как маленький значок рядом с названием сайта на вкладке браузера. ✨ Это важно для брендинга, и его легко создать с помощью этого руководства! 😊Нажмите, чтобы написать твит <h3><span class="ez-toc-section" id="_WordPress-4"> Как создать фавикон WordPress </span></h3> <p> Если у вас уже есть значок, который вы готовы использовать (большинство компаний используют свой логотип или его вариант), переходите к следующему разделу. В противном случае давайте посмотрим, как создать свою картинку для значка. </p> <p> Раньше вам приходилось использовать определенный файл ICO для вашего значка.Однако в настоящее время все современные браузеры поддерживают использование файлов ICO, PNG и GIF для вашего значка. JPEG также широко поддерживается (читайте: JPG против JPEG), но не во всех версиях Internet Explorer, что делает его менее идеальным для использования значков. </p> <p> Если вы знакомы с Photoshop, вы можете использовать его для создания значка вручную. Однако часто бывает проще использовать базовый облачный инструмент для создания набора значков значка из существующего изображения. </p> <p> RealFaviconGenerator (облачная версия плагина, которую мы обсудим позже) — отличный вариант, потому что: </p> <ul> <li> Он также создает значки приложений.</li> <li> Он предоставляет значки значков в форматах PNG и ICO. </li> <li> Вы можете настроить свой значок после загрузки изображения. </li> <li> Все, что вам нужно сделать, это вставить код, который дает вам плагин. </li> </ul> <p> Другие полезные генераторы значков: </p> <ul> <li> Favicon.cc, который позволяет создать значок с нуля или загрузить существующее изображение. </li> <li> Favicon Generator, который работает аналогично RealFaviconGenerator. </li> </ul> <p> Чтобы использовать RealFaviconGenerator, начните с загрузки изображения, которое вы хотите использовать, нажав <strong> Выберите свое изображение Favicon </strong>: </p> <p> Загрузка исходного изображения значка на RealFaviconGenerator </p> <p> На следующем экране вы можете настроить конкретную информацию о вашем наборе значков (при желании).Когда вы закончите, прокрутите вниз и нажмите <strong> Generate your Favicons and HTML cod </strong> <strong> e </strong>: </p> <p> Экран параметров генератора значков в RealFaviconGenerator </p> <p> На следующей странице щелкните <strong> Пакет Favicon </strong>, чтобы загрузить изображения значков: </p> <p> Экран для загрузки пакета Favicon </p> <p> Не забудьте оставить эту страницу открытой, если вы планируете вручную добавить значок на свой сайт. </p> <h4><span class="ez-toc-section" id="_WordPress-5"> Советы по созданию фавикона WordPress </span></h4> <p> Есть несколько советов по дизайну и форматированию, которые стоит упомянуть и изучить, прежде чем создавать свой значок.Самое главное, рекомендуемый размер значков — 512 × 512 пикселей. </p> <p> Хотя ваш значок WordPress будет идеальным квадратом, вы также можете использовать прямоугольное изображение и обрезать его до или после загрузки в WordPress. WordPress поставляется со встроенной функцией обрезки значков сайта, если вы добавляете их через настройщик (который мы вскоре рассмотрим). </p> <p> Также важно отметить, что ваш значок будет отображаться в виде квадрата 16 × 16 пикселей. Поэтому вам нужно выбрать изображение, которое будет хорошо смотреться после того, как уменьшится до этих размеров.Хотя он будет отображаться с таким размером, он все равно должен иметь высоту и ширину не менее 512 пикселей. </p> <p> Наконец, неплохо было бы ознакомиться с некоторыми рекомендациями Google по созданию и использованию значков. Это поможет обеспечить оптимальное отображение вашего значка в поисковых системах и на вкладках браузера. </p> <h3><span class="ez-toc-section" id="_WordPress_3-2"> Как добавить фавикон WordPress на свой сайт (3 простых варианта) </span></h3> <p> Когда у вас есть значок, вы готовы добавить его на свой сайт WordPress. Давайте рассмотрим три метода, которые вы можете использовать для этого.</p> <h4><span class="ez-toc-section" id="1_WordPress_Favicon"> 1. Использование настройщика WordPress для загрузки вашего Favicon </span></h4> <p> Начиная с WordPress 4.3, все сайты WordPress включают функцию значка сайта, которая упрощает загрузку и обрезку изображения для использования в качестве значка. Для большинства пользователей это самый простой и быстрый способ добавления значка фавикона в WordPress. </p> <p> Все, что вам нужно, это изображение размером не менее 512 × 512 пикселей. Остальную часть процесса возьмет на себя WordPress. Для начала перейдите к <strong> Внешний вид </strong> → <strong> Настройте </strong> на панели инструментов WordPress: </p> <p> Меню внешнего вида в WordPress </p> <p> Оттуда перейдите на вкладку <strong> Site Identity </strong>: </p> <p> Параметр «Идентификация сайта» в настройщике WordPress </p> <p> Затем посмотрите внизу на раздел <strong> Site Icon </strong> и нажмите <strong> Select site icon </strong> button: </p> <p> <h3><span class="ez-toc-section" id="i-31"> Подпишитесь на информационный бюллетень </span></h3> </p> <h4><span class="ez-toc-section" id="_1000"> Хотите узнать, как мы увеличили наш трафик более чем на 1000%? </span></h4> <p> Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress! </p> Подпишитесь сейчас <p> Кнопка «выбрать значок сайта» в настройщике WordPress </p> <p> Откроется обычный интерфейс библиотеки мультимедиа WordPress.Вы можете выбрать существующее изображение в медиатеке или загрузить новое. Если вы использовали RealFaviconGenerator для создания своего значка, убедитесь, что загруженный вами пакет распакован. </p> <p> Когда у вас есть понравившееся изображение, нажмите на него и выберите <strong> Выберите </strong> в правом нижнем углу: </p> <p> Выбор изображения фавикона в WordPress </p> <p> Если ваше изображение еще не является идеальным квадратом (например, 512 × 512 пикселей), WordPress даст вам возможность обрезать его на следующем экране.</p> <p> Используйте поле, чтобы выделить часть изображения, которую вы хотите использовать для своего значка. Вы можете увидеть предварительный просмотр того, как ваше обрезанное изображение будет выглядеть в правой части интерфейса. </p> <p> Когда вы будете довольны тем, как все выглядит, нажмите <strong> Crop Image </strong>, чтобы подтвердить свой выбор: </p> <p> Обрезка изображения вашего фавикона в WordPress </p> <p> Вот и все! Все, что вам нужно сделать, это выбрать <strong> Сохранить и опубликовать </strong>, чтобы ваш значок стал активным. Если вы когда-нибудь захотите изменить свой значок в будущем, вы можете вернуться к этому интерфейсу.</p> <h4><span class="ez-toc-section" id="2_WordPress_Favicon"> 2. Установка плагина для добавления вашего WordPress Favicon </span></h4> <p> Если вы предпочитаете плагин для встроенных функций значков сайта WordPress, вы можете использовать популярный бесплатный плагин под названием Favicon от RealFaviconGenerator (облачный инструмент, который мы обсуждали ранее). </p> <p> Этот плагин так же прост в использовании, как и собственный настройщик WordPress. Однако он предлагает дополнительные параметры совместимости для различных устройств и значков приложений. Чтобы использовать его, установите и активируйте бесплатный плагин через панель управления WordPress: </p> <p> Плагин WordPress для Favicon от RealFaviconGenerator </p> <p> После активации плагина перейдите к <strong> Внешний вид </strong> → <strong> Favicon </strong>, чтобы создать свой набор значков.Все, что вам нужно сделать, это выбрать или загрузить изображение размером не менее 70 × 70 пикселей (в идеале 260 × 260 пикселей): </p> <p> Экран для добавления значка в WordPress с помощью плагина </p> <p> После выбора изображения нажмите <strong> Создать значок </strong>. Когда вы нажмете эту кнопку, плагин выведет вас за пределы вашего сайта WordPress на сайт RealFaviconGenerator. </p> <p> В нижней части сайта прокрутите вниз и выберите <strong> Создать ваши значки и HTML-код </strong> (см. Предыдущий раздел).Пока инструмент работает, Real Favicon Generator отправит вас обратно на панель управления WordPress: </p> <p> Экран для предварительного просмотра того, как будет выглядеть ваш значок WordPress </p> <p> После этого ваш значок будет настроен и готов к работе. Вы можете просмотреть предварительный просмотр того, как он будет выглядеть на разных устройствах, в интерфейсе плагина. </p> <h4><span class="ez-toc-section" id="3_FTP"> 3. Добавление значка вручную через FTP </span></h4> <p> Если вы предпочитаете делать что-то вручную, можно добавить значок на свой сайт WordPress с помощью протокола передачи файлов (FTP) или диспетчера файлов, если ваш хост использует cPanel.</p> <p> Если вы воспользуетесь этим методом, вам также потребуется создать собственное изображение значка. Вы можете сделать это, выполнив действия, описанные ранее в этом посте. </p> <p> Для этой демонстрации мы будем использовать пакет, который мы создали и загрузили из RealFaviconGenerator, инструкции применимы, даже если вы использовали другой инструмент для создания своего значка. </p> <p> Чтобы вручную добавить значок WordPress на свой сайт, вам необходимо: </p> <ol> <li> Получите доступ к файлам вашего сайта либо через FTP-клиент, либо через файловый менеджер в cPanel вашего хостинга.</li> <li> Найдите корневой каталог вашего сайта и загрузите содержимое вашего пакета favicon (<em> favicons.zip </em>) </li> </ol> <p> Файлы должны находиться в той же папке, что и папки <em> wp-admin </em> и <em> wp-content </em>. Затем возьмите код, который RealFaviconGenerator предоставил вам ранее, и либо: </p>. <p> Использование плагина Insert Headers and Footers оптимально, потому что он гарантирует, что вы не потеряете свой значок, если в будущем измените темы WordPress.</p> <p> Для этого установите и активируйте Вставить верхние и нижние колонтитулы. Затем перейдите к настройкам <strong> </strong> → <strong> Вставить верхние и нижние колонтитулы </strong> и вставьте свой код в <strong> Scripts в разделе Header </strong>: </p> <p> Добавление кода значка с помощью плагина Insert Headers and Footers </p> <p> Обязательно сохраните изменения. Тогда все готово! </p> <h3><span class="ez-toc-section" id="_WordPress_Favicons"> Дополнительные советы по использованию WordPress Favicons </span></h3> <p> Если вы хотите, чтобы каждый сайт в вашей многосайтовой сети имел уникальный значок, самый простой способ добиться этого — использовать плагин для значков, подобный показанному выше.Хотя можно отредактировать файлы вашей темы, чтобы включить уникальные значки для каждого сетевого сайта, этот процесс значительно сложнее, чем использование плагина. </p> <p> Вы также можете рассмотреть возможность использования сети доставки контента (CDN) для обслуживания ваших изображений значков. Все три метода, которые мы обсуждали в этом посте, сохраняют ваши изображения значков на вашем сервере. Однако вы можете еще больше оптимизировать свой сайт, используя CDN для обслуживания этих изображений. </p> <p> Когда вы устанавливаете Cloudflare или такую ​​службу, как KeyCDN, браузеры посетителей загружают ваш значок с вашего CDN, а не с сервера вашего сайта.Если вы используете такой плагин, как CDN Enabler, он должен автоматически переписать ваш URL-адрес фавикона WordPress для работы с вышеуказанными методами. </p> Вы знаете этот маленький значок рядом с названием вашего веб-сайта на вкладке браузера? Это значок, и это руководство поможет вам создать свой собственный 😄Нажмите, чтобы твитнуть. <h3><span class="ez-toc-section" id="i-32"> Сводка </span></h3> <p> Фавикон WordPress может помочь повысить узнаваемость вашего бренда и улучшить UX для посетителей вашего сайта. К счастью, у вас есть несколько вариантов на выбор, что упрощает добавление одного.</p> <p> Три основных метода, которые вы можете использовать для добавления значка WordPress на свой сайт: </p> <ol> <li> Использование настройщика WordPress для загрузки значка сайта. </li> <li> Установка плагина, например Favicon от RealFaviconGenerator. </li> <li> Добавление значка вручную через FTP-клиент или файловый менеджер. </li> </ol> <hr/> <p> Экономьте время, деньги и повышайте производительность сайта с помощью: </p> <ul> <li> Мгновенная помощь от экспертов по хостингу WordPress, 24/7. </li> <li> Интеграция Cloudflare Enterprise.</li> <li> Глобальный охват аудитории с 28 центрами обработки данных по всему миру. </li> <li> Оптимизация с помощью нашего встроенного мониторинга производительности приложений. </li> </ul> <p> Все это и многое другое в одном плане без долгосрочных контрактов, поддержки миграции и 30-дневной гарантии возврата денег. Ознакомьтесь с нашими планами или поговорите с отделом продаж, чтобы найти план, который подходит именно вам. </p> <h2><span class="ez-toc-section" id="i-33"> Как настроить фавикон </span></h2> <h3><span class="ez-toc-section" id="i-34"> # Короткий ответ </span></h3> <p> Самый простой способ настроить значок (при условии, что изображение веб-размера уже создано), если использовать следующий код и поместить его в тег <code> <head> </code>.</p> <pre> <code> <link rel = "icon" type = "image / png" href = "http://example.com/favicon.png" /> </code> </pre> <h3><span class="ez-toc-section" id="i-35"> # Длинный ответ </span></h3> <p> Настройка значка может быть очень простой задачей, если вы освоите его. Самый простой и быстрый способ указан выше, но что, если вы хотите иметь разные размеры значков для разных устройств и браузеров? </p> <h3><span class="ez-toc-section" id="PNG"> #PNG Размеры </span></h3> <p> Чтобы добавить разные размеры к ссылке favicon, вы можете просто добавить атрибут <code> sizes </code> к тегу ссылки.Типичные размеры значков в большинстве браузеров: <code> 16x16 </code>, <code> 32x32 </code> и выше. Для некоторых других браузеров, таких как Google Tv и Chrome на Android, рекомендуемые размеры: <code> 96x96 </code> и <code> 192x192 </code> соответственно. Пример этих размеров будет выглядеть так. </p> <pre> <code> <link rel = "icon" type = "image / png" href = "http://example.com/favicon-16.png" /> <link rel = "icon" type = "image / png" href = "http://example.com/favicon-32.png" /> <link rel = "icon" type = "image / png" href = "http: // example.com / favicon-96.png "/> <link rel = "icon" type = "image / png" href = "http://example.com/favicon-192.png" /> </code> </pre> <h3><span class="ez-toc-section" id="_ICO-2"> # тип файла ICO </span></h3> <p> Основной способ установить значок — использовать ICO-файл. Хотя все современные браузеры могут читать формат png, он в основном используется для более старых версий IE. В Интернете можно найти множество генераторов favicon.ico для создания правильно отформатированного файла ico. Использование файла favicon.ico будет выглядеть так. </p> <pre> <code> <link rel = "icon" href = "favicon.ico "/> </code> </pre> <p> Браузеры также смогут найти файл ico, если он просто оставлен в корне сайта и не объявлен в метатеге. </p> <h3><span class="ez-toc-section" id="_SVG"> # Иконки SVG </span></h3> <p> Несколько браузеров, включая Chrome и Firefox, недавно добавили поддержку значков SVG. Если вы хотите узнать, какие браузеры поддерживают это, во время прочтения ознакомьтесь с caniuse.com/#feat=link-icon-svg. Чтобы использовать эту новую функцию, вам понадобится SVG-версия значка вашего веб-сайта и добавьте эту ссылку в заголовок вашего сайта.Не забудьте указать <code> sizes = "any" </code>, иначе браузер загрузит файл, даже если он не может отобразить его в качестве значка. </p> <pre> <code> <link rel = "icon" href = "/ favicon.svg" type = "image / svg + xml" /> </code> </pre> <p> Если вы используете медиа-запрос <code> prefers-color-scheme </code> на своем веб-сайте и хотите изменить значок для каждой темы, тогда все, что вам нужно, — это темная и / или светлая версия вашего значка и атрибут мультимедиа. </p> <pre> <code> <link rel = "icon" media = "prefers-color-scheme: dark" href = "favicon-light.ico "/> <link rel = "icon" media = "prefers-color-scheme: light" href = "favicon-light.ico" /> </code> </pre> <h2><span class="ez-toc-section" id="_FavIcon_2020"> Руководство по FavIcon на 2020 год для почти всех и каждого браузера </span></h2> <p> Когда-то для создания значка требовалось всего лишь создать один значок размером 16 × 16 пикселей и поместить его в корневой каталог веб-сайта. Это все еще работает сегодня, хотя и с некоторыми оговорками. </p> <p> В современных устройствах дисплеи, как правило, имеют дисплеи с высокой плотностью (сетчаткой). Эти устройства и дисплеи имеют больше пикселей на квадратный дюйм.Конечный результат — более четкий текст и изображения. Как правило, графику необходимо оптимизировать для дисплеев с высоким разрешением. Классический значок 16 x 16 пикселей на этих устройствах и дисплеях выглядит пиксельным; таким образом, необходимы дополнительные шаги. Что еще больше сбивает с толку, многие новые устройства, например iOS и Android, имеют свои предпочтительные замены значков. </p> <h3><span class="ez-toc-section" id="i-36"> Это практическое руководство по созданию значков для (почти) каждого мыслимого браузера. </span></h3> <p> Цель состоит в том, чтобы обеспечить наилучшие результаты (без пикселов) с наименьшим объемом работы и, что наиболее важно, при этом сохранить рассудок.</p> <p> <br/> <small> <strong> Изображение: </strong> NPR.org не имеет значка дисплея Retina, поэтому он выглядит пиксельным </small> </p> <h4><span class="ez-toc-section" id="i-37"> Конкретные интересы? Вот что мы рассмотрим в этой статье: </span></h4> <ul> <li> Краткая история favicon.ico </li> <li> (в основном) полный список всех известных любимых размеров иконок </li> <li> Почему не SVG? </li> <li> Проверка работоспособности: утилиты Photoshop / Automator </li> <li> Чего не будут делать эти утилиты </li> <li> Загрузка шаблона Photoshop / macOS Automator / Sketch </li> <li> Как установить Favicon Photoshop Action </li> <li> Использование экшена Photoshop </li> <li> Использование автомата Action </li> <li> Использование шаблона эскиза </li> <li> Оптимизация </li> <li> Поддержка IE6 — IE10 (и проблема Safari) </li> <li> Использование IconSlate для создания значка Retina Favicon </li> <li> Онлайн-генератор HTML + XML </li> </ul> <h4><span class="ez-toc-section" id="_Faviconico"> Краткая история Favicon.ico </span></h4> <p> </p> <p> Favicon был первоначально представлен в марте 1999 года Microsoft вместе с новой вкладкой «Избранное» в Internet Explorer 5. В номенклатуре Microsoft закладки в Internet Explorer называются «Избранное». Закладки на вкладке избранного имеют возможность включать значок избранного рядом с каждым URL-адресом. Если веб-сайт имеет файл favicon.ico, размещенный в корневом каталоге его домена, запись избранной закладки будет включать настраиваемый значок. Вскоре после этого, в 2000 году, Консорциум World Wide Web (W3C) принял значок для HTML 4.0 (с намеренно нечеткими характеристиками). </p> <p> Еще в 2001 году веб-браузеры начали использовать значок рядом с URL-адресом и вскоре стали повсеместными в Интернете, перейдя на уже знакомые вкладки браузера. Позже и Firefox, и Safari добавили поддержку PNG для Favicons, что стало первым серьезным изменением в формате Favicon. В 2008 году, после запуска первого iPhone, значок значка сделал еще один важный поворот после того, как Apple представила «apple-touch-icon.png», версию значка с более высоким разрешением, используемую для закрепления на док-станции iOS.Это создало прецедент для нескольких размеров значков и помогло закрепить PNG в качестве предпочтительного формата по сравнению с форматом файлов ICO Microsoft Windows. </p> <p> W3C, признавая необходимость универсальности, в HTML5 включил стандарт для нескольких размеров значка, который получил распространение благодаря дисплеям высокой плотности, новым пользовательским интерфейсам операционной системы, изменениям в браузерах и мобильным устройствам. Сегодня у нас есть персонализированные значки для всего, от телевизоров Google до плиток Microsoft Windows Metro. </p> <h4><span class="ez-toc-section" id="i-38"> Полный список (в основном) всех известных любимых размеров иконок </span></h4> <p> Ниже приведен список известных на данный момент размеров любимых иконок. Этот список основан на Шпаргалке по избранным иконкам.Серый цвет — это когда-то устаревшие значки, которые все еще можно использовать, но больше не поддерживаются. Из-за возраста они были исключены из проекта значков. </p> <table> <tbody> <tr> <td> <strong> Размер </strong> </td> <td> <strong> Имя </strong> </td> <td> <strong> Назначение </strong> </td> </tr> <tr> <td> 32 × 32 </td> <td> favicon-32.png </td> <td> Стандарт для большинства настольных браузеров </td> </tr> <tr> <td> 128 × 128 </td> <td> favicon-128.png </td> <td> Значок Интернет-магазина Chrome и маленький значок на экране Windows 8 Star * </td> </tr> <tr> <td> 152 × 152 </td> <td> фавикон-152.png </td> <td> Значок сенсорного экрана iPad (изменение для iOS 7: вместо 144 × 144) </td> </tr> <tr> <td> 167 × 167 </td> <td> favicon-167.png </td> <td> Значок сенсорного экрана Retina для iPad <br/> (изменение для iOS 10: вместо 152 × 152, не работает. IOS 10 будет использовать 152 × 152) </td> </tr> <tr> <td> 180 × 180 </td> <td> favicon-180.png </td> <td> iPhone Retina </td> </tr> <tr> <td> 192 × 192 </td> <td> favicon-192.png </td> <td> Рекомендация манифеста веб-приложений для разработчиков Google </td> </tr> <tr> <td> 196 × 196 </td> <td> фавикон-196.png </td> <td> Значок главного экрана Chrome для Android </td> </tr> </tbody> </table> <p> Устаревшие значки Favicons </p> <table> <tbody> <tr> <td> <strong> Размер </strong> </td> <td> <strong> Имя </strong> </td> <td> <strong> Назначение </strong> </td> </tr> <tr> <td> 57 × 57 </td> <td> favicon-57.png </td> <td> Стандартный домашний экран iOS (iPod Touch, iPhone от первого поколения до 3G) </td> </tr> <tr> <td> 76 × 76 </td> <td> favicon-76.png </td> <td> Значок главного экрана iPad </td> </tr> <tr> <td> 96 × 96 </td> <td> фавикон-96.png </td> <td> Значок GoogleTV * </td> </tr> <tr> <td> 120 × 120 </td> <td> favicon-120.png </td> <td> Значок сенсорного экрана Retina для iPhone (изменение для iOS 7: увеличено с 114 × 114) </td> </tr> <tr> <td> 144 × 144 </td> <td> favicon-144.png </td> <td> IE10 Плитка Metro для закрепленного сайта * </td> </tr> <tr> <td> 195 × 195 </td> <td> favicon-195.png </td> <td> Значок быстрого набора Opera <br/> (Не работает в Opera 15 и более поздних версиях) </td> </tr> <tr> <td> 228 × 228 </td> <td> favicon-228.png </td> <td> Значок Opera Coast </td> </tr> </tbody> </table> <p> На момент написания этой статьи это был полный список из 14 значков, считая изменения iOS.Теперь, когда мы приближаемся к 2020 году, мы можем с уверенностью предположить, что на стороне iOS резко упала статистика, поскольку статистика Apple колеблется только на 9% устройств, использующих более раннюю, чем iOS 12. При использовании показателей приложения Аудиокнига Дэвида Смита, менее 2%. пользователей используют iOS 10 ниже на момент написания этой статьи. </p> <p> Итак, основываясь на более разумных принципах, мы можем удалить много шума. Google TV последний раз обновлялся в 2010 году. Apple перешла на Retina в 2010 году с iPhone 4 и с Touch и iPad в 2012 году. Opera Speed ​​Dial исчезла в 2013 году, Opera Coast была удалена из магазина приложений Android в 2017 году.Итак, с пересмотренным списком у нас осталось семь основных значков (если у вас нет проекта с очень конкретными устаревшими требованиями). Microsoft потребовала метатеги msapplication-TileColor и msapplication-TileImage, чтобы IE10 в Windows 8 мог распознавать значки Favicons, которые также можно удалить из исходного списка. </p> <p> Наконец, в манифесте веб-приложений Google отмечается, что Chrome принимает значки с шагом 48 пикселей и по умолчанию 192 или 512. Ради здравого смысла мы будем придерживаться только 192.</p> <ul> <li> 7 значков </li> <li> ссылок в теге <head> вашего сайта для каждого размера </li> <li> Специальный XML-файл для плиток меню «Пуск» Windows (8.1 и выше) (IE11 + и Windows 10 требует browserconfig.xml.) </li> </ul> <h4><span class="ez-toc-section" id="_SVG-2"> Почему не SVG? </span></h4> <p> Некоторые читатели, просматривающие этот список, могут задаться вопросом о масштабируемой векторной графике (SVG) как о более разумном решении вместо создания значков во всех возможных разрешениях, поскольку значки — один из лучших вариантов использования векторных изображений.На момент написания этой статьи только Firefox и Safari поддерживают значки SVG (с некоторыми оговорками). Более подробную информацию см. На CanIuse.com. </p> <p> (Примечание автора: во время написания этой статьи, после проверки примерно 50 основных веб-сайтов, Instagram был единственным сайтом, на котором была опция SVG-значков на своем веб-сайте) </p> <h4><span class="ez-toc-section" id="_Photoshop_Automator"> Проверка работоспособности: Photoshop / Действия Automator / Шаблон эскиза </span></h4> <p> Я создал три разных способа создания 14 размеров значков. Три варианта следующие: </p> <ol> <li> <strong> Экшен Photoshop </strong> — Если у вас есть Adobe Photoshop, это позволит вам использовать экшен Photoshop для быстрого создания 14 значков из исходного файла.Действия Photoshop позволяют Photoshop выполнять автоматические задачи, такие как изменение размера и экспорт файлов. </li> <li> <strong> Automator </strong> — macOS / OS X предоставляет утилиту создания сценариев на уровне ОС, которая позволяет автоматизировать такие задачи, как перемещение / переименование файлов или доступ к различным функциям приложения, таким как предварительный просмотр. Я создал сценарий автомата, который будет выполнять те же функции, что и экшен Photoshop. Преимущество в том, что для этого не требуется Photoshop, но требуется Mac. </li> <li> <strong> Шаблон эскиза </strong> — Это наименее автоматизированная функция.Это пустой шаблон со всеми экспортными настройками 14 отдельных размеров. Просто вставьте значок в направляющие и нажмите «Экспорт», и все 14 размеров значков будут экспортированы как PNG. </li> </ol> <p> Что вам абсолютно необходимо: </p> <ul> <li> Квадратное изображение PNG размером 228 x 228 или больше. </li> <li> Photoshop (Win / Mac) или macOS / OS X или Sketch </li> </ul> <p> Приятно иметь: </p> <ul> <li> Изображение с альфа-слоем (прозрачный фон) </li> </ul> <p> Поддерживаемые браузеры: </p> <p> IE11, Edge, Chrome 4+, Firefox 2+, Opera 10.1+, Safari 3.1+, iOS Safari 6+, Google TV, Android Browser 2.1+, Chrome для Android, Firefox для Android, UC Browser для Android, Samsung Internet, QQ Browser, Chrome Store, закрепленные сайты для Windows 8+. </p> <h4><span class="ez-toc-section" id="i-39"> Чего не будут делать эти утилиты: </span></h4> <p> К сожалению, эта утилита не создает классический файл favicon.ico. В Photoshop до сих пор нет возможности создать ICO-файл, как и в Automator или Sketch. См .: Поддержка IE6 — IE10 (и проблема Safari) в этом сообщении для получения более подробной информации. </p> <p> Кроме того, это не «лечит» значки.Для значков 32 x 32 пикселей и 16 x 16 пикселей может потребоваться ручная корректировка в графической программе. Помните, что создавать отдельные версии значков в зависимости от разрешения более чем возможно. Эта утилита представляет собой дробовик, который позволит вам улучшить базовый минимум после того, как будут созданы все значки. Для получения наиболее красивых значков с низким разрешением я настоятельно рекомендую рассмотреть возможность ручной подкраски значка 16 x 16 пикселей и значка 32 x 32 пикселей. </p> <h4><span class="ez-toc-section" id="_Photoshop_macOS_Automator_Sketch"> Загрузка шаблона Photoshop / macOS Automator / Sketch </span></h4> <p> Вы можете либо перейти к проекту github, найденному здесь, либо щелкнуть прямую ссылку для скачивания.</p> <h4><span class="ez-toc-section" id="_Favicon_Photoshop_Action"> Как установить Favicon Photoshop Action </span></h4> <ol> <li> Загрузите Photoshop Action и дважды щелкните, чтобы распаковать </li> <li> В Photoshop в меню действий щелкните гамбургер-меню и выберите действия загрузки <br/> </li> <li> Найдите создателя Favicon </li> </ol> <h4><span class="ez-toc-section" id="_Photoshop"> Использование экшена Photoshop </span></h4> <p> Изображение по умолчанию должно быть квадратным и иметь размер более 228 x 228 пикселей (я рекомендую использовать исходное изображение с более высоким разрешением). Откройте изображение, которое хотите использовать для своего значка.Нажмите кнопку воспроизведения, и действие создаст 14 размеров значков в формате PNG. </p> <p> </p> <h4><span class="ez-toc-section" id="_Automator"> Использование скрипта Automator </span></h4> <p> </p> <p> Перетащите файл в скрипт Automator. Изображение по умолчанию должно быть квадратным и иметь размер более 228 x 228 пикселей (я рекомендую использовать исходное изображение с более высоким разрешением). Нажмите «Играть», и Automator создаст 14 размеров иконок в PNG. </p> <h4><span class="ez-toc-section" id="i-40"> Использование шаблона эскиза </span></h4> <p> </p> <p> Откройте файл эскиза. Вставьте графику в направляющие, нажмите «Экспорт» и выберите экспорт «favicon».</p> <h4><span class="ez-toc-section" id="i-41"> Оптимизация </span></h4> <p> Неоптимизированные PNG из Photoshop, как правило, довольно большие. Я настоятельно рекомендую пользователям macOS использовать бесплатное приложение ImageOptim для сжатия PNG без потерь, а пользователи Linux используют Trimage. Оба варианта просты в использовании. Перетащите все недавно созданные PNG, чтобы сэкономить ценные килобайты изображений без какого-либо снижения качества. Пользователи macOS / Linux также могут использовать PNGOUT, утилиту интерфейса командной строки для оптимизации PNG. </p> <p> Для более технически подкованных пользователей macOS утилита оптимизации PNG ImageAlpha (работает в тандеме с ImageOptim) позволяет пользователям еще больше использовать проиндексированные цветовые профили для уменьшения размеров файлов.</p> <p> Наконец, PNGquant изначально работает в Photoshop для Windows / OS X, а TinyPNG предоставляет бесплатный сервис, который можно использовать из вашего веб-браузера на любой платформе. </p> <h4><span class="ez-toc-section" id="_IE6_IE10_Safari"> Поддержка IE6 — IE10 (и проблема Safari) </span></h4> <p> Для действительно одержимых, IE10 и ниже не поддерживают значки PNG, только ICO. В зависимости от источника, IE10 и ниже по-прежнему составляют примерно 0,2–1,4% пользователей Интернета в Северной Америке в апреле 2017 года. К счастью, месяц за месяцем эта цифра продолжает уменьшаться, но различается в зависимости от регионов земного шара и даже от страны. / языковая основа.IE10 был выпущен 4 сентября 2012 года в качестве браузера по умолчанию в Windows 8 и включен в Windows 7 SP1, но поскольку Windows 10 постепенно заменяет Windows 8, пользователи Internet Explorer все чаще переходят на замену Microsoft IE, Edge. </p> <p> Если вы решите включить favicon.ico для старых пользователей IE, существует серьезное предупреждение Safari. На момент написания этого документа, если в HTML-код включены и ICO, и PNG, настольная версия Safari будет использовать файл ICO вместо PNG. Это проблема, поскольку большинство генераторов значков создают только значки размером 16 x 16 пикселей.На дисплеях Retina будет отображаться менее привлекательный значок 16 x 16 вместо красивого PNG 32 x 32. Однако, без каких-либо затрат для пользователей IE, формат файла MS .ico может поддерживать как значок размером 16 x 16 пикселей, так и значок 32 x 32 пикселя в одном файле. Пользователи IE10 и ниже будут видеть значок 16 x 16, тогда как пользователи Retina Safari могут наслаждаться значком с гораздо более высоким разрешением 32 x 32 пикселя. </p> <p> Для создания значков, совместимых с сетчаткой, требуется несколько дополнительных шагов. Ниже представлена ​​адаптированная версия книги Джона Грубера «DaringFireball.com: Создание значков Retina Calibre Favicons ». Этот метод требует покупки IconSlate (5 долларов США). </p> <h4><span class="ez-toc-section" id="_IconSlate_DaringFireball"> Использование IconSlate для создания значка сетчатки (метод DaringFireball) </span></h4> <ol> <li> Откройте IconSlate и создайте новый проект. Выберите только формат .ico, щелкните стрелку рядом с ico и установите только флажки 32 и 16. </li> <li> Назовите значок «favicon» (без кавычек) </li> <li> Выделите квадрат 32 и вставьте свой значок 32 x 32 пикселя </li> <li> Выделите квадрат 16 и вставьте в него значок размером 32 x 32 пикселя или, если у вас есть собственный размер 16 x 16 пикселей, вставьте в него этот файл.</li> <li> Щелкните значок Build (если по какой-либо причине значок Build неактивен, перейдите в File -> Build </li>. </ol> <h4><span class="ez-toc-section" id="-_HTML_XML"> Онлайн-генератор HTML + XML </span></h4> <p> Ниже я написал быстрый онлайн-генератор кода. Он сгенерирует необходимый HTML и XML для использования ваших значков. </p> <ol> <li> Введите путь к вашим любимым значкам. (если вы решили создать favicon.ico, поместите его в корень своего домена независимо от других ваших значков). </li> <li> Выберите цвет фона для значка для плиток Windows.</li> <li> Прокрутите вниз до кода и скопируйте и вставьте его или загрузите файлы. </li> <li> Поместите XML-файл в тот же каталог, что и ваши любимые значки. </li> </ol> <p data-default-tab="result" data-height="589" data-pen-title="Favicon HTML/Browser XML Generator" data-slug-hash="BWWMjJ" data-theme-id="7806" data-user="fuzzywalrus"> См. Pen Favicon HTML / Browser XML Generator от Грега Ганта (@fuzzywalrus) на CodePen. </p> <h4><span class="ez-toc-section" id="i-42"> Манифест веб-приложения </span></h4> <p> Манифест веб-приложения — это простой файл JSON, в котором подробно описывается, как веб-приложение должно работать, когда оно «установлено» (ссылка на него находится на панели приложений Chrome). Этот файл JSON включает объявления для значков Favicons.Для получения дополнительной информации см. Манифест веб-приложения </p>. <h3><span class="ez-toc-section" id="i-43"> Поздравляю! Готово! </span></h3> <p> Хороший способ проверить свои новые любимые значки — использовать мобильное устройство или мобильный симулятор и закрепить свой веб-сайт на док-станции / главном экране.<div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="cat-links">Категория: <a href="https://forjobathome.ru/category/raznoe" rel="category tag">Разное</a></span> </footer><!-- .entry-footer --> </div> </article><!-- #post-13640 --> <nav class="navigation post-navigation" role="navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://forjobathome.ru/raznoe/fejk-straniczy-vk-kak-sozdat-vtoruyu-ili-fejkovuyu-straniczu-vk-besplatno-i-bez-nomera-telefona.html" rel="prev">Фейк страницы вк: Как создать вторую или фейковую страницу ВК: бесплатно и без номера телефона</a></div><div class="nav-next"><a href="https://forjobathome.ru/raznoe/kak-poluchit-emajl-registracziya-pochtovogo-yashhika-help-mail-ru-mobilnaya-pochta.html" rel="next">Как получить емайл: Регистрация почтового ящика — Help Mail.ru. Мобильная Почта</a></div></div> </nav> <div id="comments" class="comments-area"> <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/favicon-kak-ustanovit-kak-ustanovit-favikon-favicon-na-sajt.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://forjobathome.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">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='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='13640' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> </div> </section> <footer class="wrapper wrap-footer"> <section class="wrapper footer-widget"> <div class="container"> <div class="row"> </div> </div> </section> <!-- footer site info --> <section id="colophon" class="wrapper site-footer" > <div class="container"> <div class="row"> <div class="xs-12 col-sm-6 col-md-6"> <div class="site-info"> <p class="endtext"><strong>© 2007-2019 forjobathome.ru<br></strong> Использование материалов сайта разрешено и <br>всячески приветствуется при одном условии:<br> <a href="./copyright.htm" title="" class="stext7">наличие гиперссылки</a> на данный ресурс! </p> </div><!-- .site-info --> </div> <div class="xs-12 col-sm-6 col-md-6"> <div class="footer-menu"> <nav id="footer-site-navigation" class="footer-main-navigation" role="navigation" aria-label="footer-menu"> <div class="menu-footer-menu-container"> </div> </nav><!-- #site-navigation --> </div> </div> </div> </div> </section><!-- #colophon --> </footer><!-- #colophon --> <!-- ***************************************** Footer section ends ****************************************** --> <a id="gotop" class="greenturtle-back-to-top" href="#page"><i class="fa fa-angle-up"></i></a> </div><!-- #page --> <div style="display:none"> </div> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .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://forjobathome.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.8' type='text/css' media='all' /> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://forjobathome.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.8' type='text/css' media='all' /> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/modernizr.js?ver=2.8.3' id='greenturtle-mag-jquery-modernizr-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.easing.js?ver=0.3.6' id='greenturtle-mag-jquery-easing-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.waypoints.js?ver=4.0.0' id='greenturtle-mag-jquery-waypoints-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.cycle.js?ver=2.1.6' id='greenturtle-mag-jquery-cycle-script-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/greenturtle-mag-custom.js?ver=5.8' id='greenturtle-mag-custom-js-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/navigation.js?ver=20151215' id='greenturtle-mag-navigation-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/skip-link-focus-fix.js?ver=20151215' id='greenturtle-mag-skip-link-focus-fix-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-includes/js/comment-reply.min.js?ver=5.8' id='comment-reply-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-includes/js/wp-embed.min.js?ver=5.8' id='wp-embed-js'></script> <script type='text/javascript' src='https://forjobathome.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://forjobathome.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://forjobathome.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://forjobathome.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://forjobathome.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> </body> </html>