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


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

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

Что такое favicon?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

{

    "name": "mobiForge",

    "short_name": "mobiForge",

    "icons": [

        {

            "src": "/icon-144x144.png",

            "sizes": "144x144",

            "type": "image/png"

        },

        {

            "src": "/icon-192x192.png",

            "sizes": "192x192",

            "type": "image/png"

        }    

    ],

    "theme_color": "#ffffff",

    "background_color": "#ffffff",

    "display": "standalone"

}

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

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

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

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

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

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

<?xml version="1.0" encoding="utf-8"?>

<browserconfig>

    <msapplication>

        <tile>

            <square150x150logo src="/mstile-150x150.png"/>

            <square310x310logo src="/mstile-310x310.png"/>

            <TileColor>#da532c</TileColor>

        </tile>

    </msapplication>

</browserconfig>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

48×48

96×96

144×144

192×192

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

256×256

384×384

512×512

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

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

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

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

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

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

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

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

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

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

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

120×120: iPhone

152×152: iPad

167×167: iPad Retina

180×180: iPhone Retina

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

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

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

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

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

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

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

57×57

60×60

72×72

76×76

114×114

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

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

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

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

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

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

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

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

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

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

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

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

Плитки Microsoft Windows

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

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

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

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

Плитки Microsoft Windows

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<?xml version="1.0" encoding="utf-8"?>

<browserconfig>

  <msapplication>

    <tile>

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

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

      <wide310x150logo   src="/ms-tile-558x270.png"/>

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

      <TileColor>#009900</TileColor>

    </tile>

  </msapplication>

</browserconfig>

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

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

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

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

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

favicon.ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

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

manifest.json

browserconfig.xml

Разметка favicon

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

favicon-32×32.png: Safari

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

icon-192.png: Chrome/Android

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

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

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

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

{

    "name": "",

    "short_name": "",

    "icons": [

        {

            "src": "/icon-192.png",

            "sizes": "192x192",

            "type": "image/png"

        }

    ],

    "theme_color": "#ffffff",

    "background_color": "#ffffff",

    "display": "standalone"

}

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

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

<?xml version="1.0" encoding="utf-8"?>

<browserconfig>

  <msapplication>

    <tile>

      <square150x150logo src="/mstile-150x150.png"/>

      <TileColor>#da532c</TileColor>

    </tile>

  </msapplication>

</browserconfig>

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

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

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

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

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

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

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

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

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

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

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

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

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

Будущее favicon

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

SVG favicon

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html - Добавление значка Apple на веб-сайт

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант
.

Как добавить значок внешней ссылки на ваш сайт WordPress

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

Первым делом вам необходимо установить и активировать плагин External Links.После активации вам необходимо посетить страницу Настройки »Внешние ссылки , чтобы настроить параметры плагина.

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

Вы также можете открывать внешние ссылки в новом окне и даже можете добавлять исключения.

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

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

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

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

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

Вам нужно будет создать маленькую иконку в формате png с помощью Photoshop или GIMP.Размер значка по умолчанию составляет 10 × 10 пикселей, и вам нужно использовать точные размеры. Вам также необходимо сохранить файл значка как «external.png».

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

/ wp-content / plugins / sem-external-links /

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

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

html - Как изменить / найти значок вашего сайта?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Как создать значок на главном экране, открывающий веб-сайт Facebook на Android «Android :: Гаджеты для взлома»

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

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

Добавление сайта Facebook на главный экран

Во-первых, я упомяну, что для этого требуется Google Chrome. Итак, чтобы начать, войдите в Facebook из приложения Chrome. Когда вы окажетесь на главной странице, нажмите кнопку меню с тремя точками в правом верхнем углу, затем выберите «Добавить на главный экран».«

Здесь вы увидите всплывающее окно, которое позволяет вам изменить название нового ярлыка. По умолчанию он установлен на« Facebook », который вы можете изменить, но вы не можете изменить значок. Нажмите кнопку« Добавить ", чтобы добавить закладку на главный экран. После этого веб-приложение Facebook появится на главном экране.

Закладка Facebook Chrome будет иметь значок Facebook и выглядеть как приложение, но вы не найдете его в панели приложений - он будет доступен только на главном экране.Каждый раз, когда вы запускаете закладку Facebook, Google Chrome открывает ту же вкладку Facebook, но не запускает новую вкладку.

При использовании веб-сайта Facebook время от времени вас могут попросить войти в систему снова. Меня все еще не просили войти в систему через три недели. В зависимости от настроек Google Chrome вы можете получать или не получать уведомления от Facebook. Если вы хотите изменить настройки уведомлений Google Chrome, загляните сюда.

Защитите свое соединение без ежемесячного счета .Получите пожизненную подписку на VPN Unlimited для всех своих устройств при единовременной покупке в новом магазине Gadget Hacks Shop и смотрите Hulu или Netflix без региональных ограничений.

Купить сейчас (80% скидка)>

Обложка и скриншоты Спенсера Депаса / Gadget Hacks .

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий