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

Что такое favicon и для чего он нужен?

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

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

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

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

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

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

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

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

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

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

Chrome на Android

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

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

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

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

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

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

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

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

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

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

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

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

macOS

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

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

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

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

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

Windows

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

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

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

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

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

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

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

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

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

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

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

Подготовка favicons

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

Заключение

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

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

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

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">

<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

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

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

форматы, поддержка, автоматизация / Хабр

В каком формате должен быть фавикон?

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

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

<link rel="icon">
<link rel="icon" any">

Пора ли отправлять ICO на свалку?

Windows

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в <head>:

<meta name="msapplication-TileImage" content="images\tileimage.jpg">

<meta name="msapplication-square70x70logo" content="images/smalltile.png">
<meta name="msapplication-square150x150logo" content="images/mediumtile.png">
<meta name="msapplication-wide310x150logo" content="images/widetile.png">
<meta name="msapplication-square310x310logo" content="images/largetile.png">

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

<meta name="application-name" content="Rick and Morty">

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

<meta name="msapplication-tooltip" content="Title">

<meta name="msapplication-starturl" content="./">

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

Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.

Вызов файла в <head>:

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

<?xml version=”1.0" encoding=”utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/img/favicons/mstile-70x70.png"/>
      <square150x150logo src="/img/favicons/mstile-150x150.png"/>
      <square310x310logo src="/img/favicons/mstile-310x310.png"/>
      <wide310x150logo src="/img/favicons/mstile-310x150.png"/>
      <TileColor>#000000</TileColor>
    </tile>
    <notification>
       <polling-uri src="notifications/contoso1.xml"/>
       <polling-uri2 src="notifications/contoso2.xml"/>
       <polling-uri3 src="notifications/contoso3.xml"/>
       <frequency>30</frequency>
       <cycle>1</cycle>
   </notification>
  </msapplication>
</browserconfig>

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.

Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

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

<tile>
  <visual lang="en-US" version="2">
    <binding template="TileWide310x150ImageAndText01"
      <image src="images/image1.png" alt="alt text"/>
      <text>Text Field 1</text>
    </binding>
  </visual>
</tile>

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">

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

iOS

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

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

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

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

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

<meta name = "apple-mobile-web-app-title" content = "AppTitle">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Android

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

{
  "name": "Rick and Morty",
  "short_name": "Rick",
  "icons": [
  {
    "src": "/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/android-chrome-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
 }
],
  "theme_color": "#b3adad",
  "background_color": "#b3adad",
  "display": "standalone"
}

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через <head>, добавив следующий мета-тег:

<meta name="theme-color" content="#9CC2CE">

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

Вызов в <head>:

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

Автоматизация

Есть пакеты для сборки и для Gulp, и для Grunt.

Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.

Сделать 🖼 Favicon для сайта

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

1. Нажмите «Выбрать изображение с компьютера» и загрузите картинку в форматах jpg, jpeg, png или gif. Подберите квадратное изображение без мелких деталей.
2. Нажмите «Создать Favicon»;
3. Сервис покажет пример того, как будет выглядеть ваш favicon. Если результат вас устраивает, скачайте готовый файл. Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.

Как установить отдельные фавиконы для мобильных устройств

Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, «apple-touch-icon», и атрибут sizes с размером.

Будет достаточно одного файла favicon.ico с размерами 48×48.

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

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

1. Сохраните картинку в корневой каталог сайта с именем favicon.ico, чтобы получился адрес вида https://sitename.ru/favicon.ico. Это путь к изображению. Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
2. Добавьте ссылку на размещенный файл в HTML-код главной:

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

Зачем делать favicon?

Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR.

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

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

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

Все что нужно знать для работы с сайтом

Быстрая навигация по этой странице:

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

Зачем нужен favicon?

Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).

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

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

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

Про то, как сделать иконку ico, у нас есть отдельная статья (ссылка), потому перейдем сразу к рассмотрению вопроса о том, каким должен быть фавикон.

Каким должен быть файл с иконкой и где он должен находиться?

Исторически сложилось, что для сайтов используется формат .ico. Особенность этого формата состоит в том, что внутри одного .ico-файла может храниться несколько картинок размером от 16х16 до 64х64 (размер должен быть кратным восьми). Правда, для веб-сайтов в действительности используется только формат 16х16 — ни Яндекс, ни браузер не будут показывать другой размер иконки.

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

Теоретически, сохранить файл можно в любой папке с файлами сайта, но крайне рекомендуется сохранять его именно в корневой директории вашего ресурса — чтобы он всегда был доступен по адресу vash-site.ru/favicon.ico, так как по умолчанию именно там его ищут поисковики и браузеры.

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

Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами <head></head< вашего сайта.

Для добавления favicon html код является следующим:

<link rel="icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />

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

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

Как поменять фавикон на сайте и что это такое?

От автора: приветствую вас на webformyself и сегодня я вам расскажу, как поменять фавикон на сайте и что это вообще такое.

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

Эта иконка, хотя она и совсем крошечная (16х16), имеет большое значение в общем восприятии сайта. Но ее самая главная роль – привлечь пользователей в поисковой выдаче. Я вам гарантирую, если у вас нет такой картинки, вы теряете 10-30% кликов из поиска, потому что люди кликают на те сайты, у которых есть favicon!

И кому теперь дело, какую вы написали статью, насколько хорошо она отвечает на вопрос человека и т.д. Ее просто могут не заметить, а все по одной причине – нет favicon.

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

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

Итак, казалось бы такая мелочь, но значение ее огромно. Таким образом, нужно разобраться, как такую иконку добавлять, а также как из менять в случае необходимости. Сегодня я расскажу вам о двух вариантах: как это сделать через админку WordPress и как через html-код.

Задаем иконку через админку WordPress

Я не помню с какой версии движка появилась возможность задавать иконку для сайта. По крайней мере, желательно иметь 4.0 или выше. Итак, вам необходимо выбрать пункт Внешний вид, а в нем нажать на “Настроить”. Здесь в первой вкладке “Свойства сайта” есть соответствующая настойка, которая позволит вам загрузить изображение. Я рекомендую загружать в формате png.

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

Как поменять favicon через html код

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

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

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

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

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

Типичное подключение иконки выглядит именно таким образом. Давайте рассмотрим каждый атрибут тега подробнее:
Rel – всегда этот атрибут использовался для того, чтобы указать роль подключаемого файла. Например, stylesheet – таблица стилей, shortcut icon – иконка и т.д. Просто запомните этот параметр, его нужно обязательно прописывать.

Href – самый важный параметр, он определяет путь к файлу. Если путь задан неверно, вы просто не увидите на странице никаких изменений. Путь в этом примере кода задан так, как будто файл icon.png лежит в той же папке, что и файл с кодом страницы.

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

Формат

Формат картинки может быть любым – jpeg, png, gif, ico. Последний формат создан специально для отображения таких иконок. В некоторых программах для рисования иконок, изображение сохраняется именно в этом формате. Чтобы подключить такую картинку, нужно всего лишь изменить атрибут type:

Однако сегодня намного проще и разумнее будет использовать png формат.

А где же взять иконку?

Ну допустим, с установкой все понятно, но вас интересует, где найти красивую иконку для сайта. Это можно сделать следующими способами:

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

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

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

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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

как его сделать и установить

Всем привет! Сегодня расскажу, что такое фавикон для сайта, каких форматов и размеров он бывает. Какой размер иконки лучше выбрать и почему. Научу создавать фавиконы с помощью онлайн сервисов. Покажу где можно бесплатно скачать уже готовые фавиконки различных размеров и форматов. И конечно разберем варианты установки фавикона на сайт. А в конце вы узнаете, как проверить правильно ли установлен favicon на сайте.

Для начала я перечислю несколько веских причин почему следует обязательно установить эту иконку на ваш сайт:

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

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

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

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

Поэтому я считаю, что и речи быть не может о том, чтобы не устанавливать фавикон на сайт.

И думаю вы со мной согласитесь, прочитав эту статью до конца.

Что такое фавикон для сайта

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

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

Favicon (фавикон) – это картинка размер которой начинается от 16×16 пикселей, и которая в большинстве случаев создается в формате «ico.» и отображается в выдаче поисковых систем в снипете и на вкладке браузеров.

Фавиконы в поисковой выдачи Яндекса

Favikon на вкладке браузера

Но с развитием интернет-технологий стало возможным использование других форматов этих иконок:

• PNG
• GIF
• Анимированный GIF
• JPEG
• APNG
• SVG

Но эти форматы пока поддерживают не все браузеры поэтому я рекомендую именно формат «ico» и размер фавиконки не менее 48×48 пикселей.

Почему именно такой размер? Все очень просто.

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

Требования Google

А в рекомендациях Яндекса указано что иконка может иметь размер от 16×16 пикселей до 120 х120.

Требования Яндекса

Поэтому вариант фавиконки от 48×48 пикселей устроит обе поисковые системы.

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

Для начала подберем квадратную тематическую картинку желательно без мелких деталей. Формат этой картинки может быть любого из следующих форматов jpg, jpeg, png.

Картинку вы можете найти в интернете или заказать на бирже фриланса чтобы ее нарисовали.

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

Фавикон и логотип на сайте webnub.ru

А для сайта, на котором я все показываю я подобрал вот такую тематическую картинку размером 512×512 пикселей в формате png.

Картинка с изображением мозга

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

А дальше с помощью сервиса онлайн-генератора фавиконов такие сервисы еще называют – favicon generator, преобразуем картинку в нужный формат и размер.

Создание фавикона онлайн

Переходим на сервис PR-CY по ссылке https://pr-cy.ru/favicon/ и нажимаем «Выбрать»

Генератор favicon на сервисе PR-CY

Находим на компьютере нашу картинку выбираем ее и нажимаем «Открыть»

Процесс загрузки картинки в сервис генератор favicon

После загрузки картинки жмем «Создать favicon»

Процесс создания фавиконки онлайн

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

Распаковываем архив и видим, что в папке у нас две картинки. Нам нужна будет размером 48×48 в формате «ico»

Готовый фавикон в формате ico

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

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

Вот ссылки на пару таких сервисов:

1. Бесплатный онлайн-конвертер
2. Online-convert

Где скачать фавикон для сайта бесплатно

Для тех, кто хочет получить уже готовую фавиконку есть сервисы в которых собираются целые бесплатные библиотеки этих ик

Руководств — favicon.io

Используйте это руководство, если у вас есть значок в формате PNG. Значок в формате PNG заканчивается расширением файла .png. Если у вас есть значок в формате ICO, используйте вместо этого учебника.

Шаг 1. Назовите свой Favicon

Хотя это не обязательно, мы рекомендуем вам назвать свой значок в формате PNG. favicon.png . Если вы хотите использовать собственное имя, перейдите к этому расширенному руководству.

Шаг 2. Загрузите свой Favicon

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

Шаг 3. Ссылка на ваш Favicon

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

Шаг 4. Тестирование

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

Шаг 5: Отладка

Почему не отображается мой значок?

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

Почему не отображается последняя версия?

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

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

Статус этого документа

Проект в разработке; может кардинально измениться в любой момент.

Значок — это графический изображение (значок), связанное с определенной веб-страницей и / или веб- сайт. Многие недавние пользовательские агенты (например, графические браузеры и программы чтения новостей) отображают их как визуальное напоминание о веб-сайте идентичность в адресной строке или во вкладках.Википедия включает статья о favicons [FAVICON-WIKIPEDIA].

Чтобы добавить значок на свой веб-сайт, вам понадобится как изображение, так и для указания того, что изображение будет использоваться в качестве значка. Этот документ объясняет метод, предпочитаемый W3C для указания значок. Существует еще один распространенный метод, проиллюстрированный ниже. с объяснением, почему этот метод несовместим с некоторыми принципы веб-архитектуры. Оба метода применимы только к HTML и XHTML, одно из обсуждаемых ограничений ниже.

В этом документе подробно не обсуждается, как создать значок образ. Однако формат изображения, который вы выбрали, должен быть 16×16. пикселей или 32×32 пикселя, используя 8-битные или 24-битные цвета. В формат изображения должен быть одним из PNG ( Стандарт W3C), GIF или ICO.

Метод 1 (предпочтительный): использование значения атрибута rel определяется в профиле

Первый подход к определению значка — использовать rel значение атрибута «icon» и определить, что это значение означает через профиль; профили обсуждаются более подробно ниже.В этом примере HTML 4.01 значок, идентифицированный через URI http://example.com/myicon.png как значок:

  

 profile = "http://www.w3.org/2005/10/profile" >
   
[…]

[…]
  

XHTML 1.0 выглядит очень похоже:

  

 profile = "http://www.w3.org/2005/10/profile" >
   
[…]

[…]
  

Метод 2 (не рекомендуется): размещение значка по заранее определенному URI

Второй метод указания значка основан на использовании предопределенный URI для идентификации изображения: «/ favicon», относящийся к корень сервера.Этот метод работает, потому что некоторые браузеры были запрограммирован на поиск значков с использованием этого URI. Такой подход несовместимы с некоторыми принципами веб-архитектуры и в настоящее время обсуждается группой технической архитектуры W3C (TAG) как их сайт проблемы Data-36. Подведем итог: веб-архитектура разрешает администраторам сайтов управлять своим пространством URI (для данного доменного имени), как они видят поместиться. Соглашения, которые не представляют собой согласия сообщества и которые уменьшить параметры, доступные менеджеру сайта, не масштабируются и могут привести к конфликту (так как нет общеизвестного списка этих предопределенные URI).Одно практическое соображение иллюстрирует проблему: у многих пользователей есть веб-сайты, хотя у них нет собственных доменное имя. Эти пользователи не могут указывать значки, используя второй метод, если они не могут писать в корень сервера. Однако они могут использовать метод один, чтобы указать значок, поскольку он более гибкий и не запретить менеджеру сайта использовать один значок в одном месте на сайте.

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

Использование профилей для определения терминов, таких как «значок»

Грубо говоря, профиль — это определение набора сроки. В идеале профиль включает в себя как машиночитаемую информацию и удобочитаемая информация. В HTML 4.01 и XHTML 1.0 несколько атрибуты, такие как атрибут rel , не имеют предопределенного набора значения.Вместо этого автор может предоставить значения в соответствии с потребностями и затем используйте профиль, чтобы объяснить, что означают значения. В нашем случае мы рекомендуют авторам использовать значение «icon» и профиль, который поясняет, что «когда мы говорим« значок », мы имеем в виду« это значок »».

В методе 1 выше мы используем атрибут rel с ССЫЛКА элемент и выберите профиль с атрибутом profile на элементе HEAD.

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

Ограничения

У описанных выше подходов есть несколько ограничений. включая предпочтительный метод (поэтому TAG продолжает работать по вопросу):

• Подходы работают только в HTML или XHTML
• Предпочтительный подход связывает значок с HTML-документом, не набор документов (то есть сайт)
• Предлагаемый профиль для определения значения «значок» не является признанный стандарт, что означает, что могут возникнуть проблемы с совместимостью на практике.
• Нет стандарта (по крайней мере, определено в HTML 4.01) для машиночитаемых профилей, которые позволить браузеру знать, что «это означает, что изображение является значком». Таким образом, браузер должен быть запрограммирован заранее, чтобы распознавать этот конкретный значение отн.. Для получения дополнительной информации об использовании профилей в HTML и XHTML см. GRDDL [GRDDL].

Список литературы

FAVICON-WIKIPEDIA

Favicon , Википедия, доступно на http: // ru.wikipedia.org/wiki/Favicon.

ГРДДЛ

Собирать Описание ресурсов из диалектов языков , D. Хазаэль-Массиё, Д. Коннолли, редакторы, материалы, представленные командой W3C, 16 мая 2005 г., http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/. Последняя версия доступно по адресу http://www.w3.org/TeamSubmission/grddl/.

HTML401

HTML 4.01 Спецификация , Д. Рэггетт, А. Ле Хорс, И. Якобс, Редакторы, Рекомендация W3C, 24 декабря 1999 г., http: // www.w3.org/TR/1999/REC-html401-19991224. Последняя версия доступно по адресу http://www.w3.org/TR/html401.

SITEDATA-36

Улучшение метаданных веб-сайта в robots.txt, w3c / p3p и favicon и т. д. , TAG, доступно по адресу http://www.w3.org/2001/tag/issues.html#siteData-36.

XHTML1

XHTML ™ 1.0 The Расширяемый язык разметки гипертекста (второе издание) , S. Пембертон, редактор, Рекомендация W3C, 1 августа 2002 г., http: // www.w3.org/TR/2002/REC-xhtml1-20020801. Самый последний версия доступна по адресу http://www.w3.org/TR/xhtml1.

Благодарности

Следующие участники группы QA Interest Group и сотрудники W3C имеют внесли значительный вклад в содержание этого документа: Доминик Хазаэль-Массье (W3C), Крис Лилли (W3C) и Оливье Теро (W3C).

Как создать фавикон для вашего сайта. Пошаговое руководство от А до Я

1. Что такое значок?
2. Почему фавикон важен?
3. Как создать фавикон?
4. Где я могу использовать значок?
5. Как установить фавикон на свой сайт?

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

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

Фавикон — это маленький значок размером 16 × 16 или 32 × 32 пикселя, обычно содержащий логотип, первую букву бренда или типичное изображение, которое отражает тип бизнеса или тему веб-сайта.

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

Фавикон имеет следующие функции:
— Брендинг.
— Идентификация сайта пользователем (юзабилити).
— Придает веб-сайту профессиональный вид.
Давайте подробнее расскажем об основных преимуществах значка.

Узнаваемость бренда
Фавикон — это что-то вроде фирменного стиля веб-сайта. Как упоминалось во введении, значок помогает пользователям запомнить ваш веб-сайт среди других просматриваемых. Значок помогает пользователю легко найти ваш сайт и перейти к истории просмотров, результатам поиска Google или списку закладок сайтов в вашем браузере.
Будь то история просмотров, результаты поиска в Google или список закладок сайтов в вашем браузере, фавикон помогает пользователю найти ваш сайт и легко перейти на него.

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

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

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

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

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

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

Шаг 1.Введите название вашей компании и нажмите «Создать логотип»

Шаг 2. Выберите логотип, который вам нравится
Logaster сгенерирует вам десятки вариантов логотипа. Если у вас уже есть какое-то видение своего будущего бренда, например, вы хотите видеть его в определенном цвете, у вас есть возможность установить отрасль своего бизнеса, цветовую палитру, чтобы сузить варианты выбора. Если вам понравились несколько логотипов, сохраните их в «Избранное», вернитесь позже и выберите лучший.

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

Шаг 4. Выберите изображение для дизайна фавикона
Теперь ваш логотип готов. И вам нужно выбрать логотип для вашего будущего дизайна фавикона. Для этого на странице вашего логотипа нажмите кнопку «Набор социальных сетей», расположенную в левой строке меню. Затем прокрутите вниз до LinkedIn Social Assets и выберите значок своего логотипа (LinkedIn — квадратный логотип размером 60 * 60) для загрузки.

Шаг 7. Конвертируйте файл PNG в ICO
Следующим шагом будет преобразование вашего файла в ICO. Введите в поиске Google «конвертировать .PNG в .ICO онлайн» и выберите одну из предложенных услуг.Большинство сервисов предлагают установить нестандартные размеры. Но обратите внимание, что значок может быть 32 × 32, 64 × 64 или 16 × 16 .

Чтобы найти вдохновение для фавикона, посетите один из следующих веб-сайтов:
Галерея фавиконов

Свежие фавиконы

Где я могу использовать фавикон?

Вы можете использовать значок:
— Онлайн;
— На мобильных устройствах. Пользователь может добавить значок на главный экран своего устройства (например, закладку) — Android, IOS, Windows Phone и т. Д .;
— Приложения для ПК / Mac.

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

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

Шаг 1.
Необходимо загрузить на сервер файл favicon.ico. Для этого вам необходимо скачать и установить ftp-клиент, например FileZilla.
Затем введите свой логин и пароль и скачайте файл.Прочтите более подробные инструкции о том, как скачать файл значка здесь.

Шаг 2.
Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам найти ваше изображение фавикона. Пока окно FTP открыто, найдите и загрузите с сервера файл index.html или header.php.
Перед тем, как редактировать код, обязательно сделайте копии файлов, чтобы восстановить их в случае ошибок.
Откройте файл index.html в текстовом редакторе — Блокнот, Блокнот ++, Sublime Text.

Если ваш веб-сайт содержит чистый HTML, вставьте специальный код в индекс файла HEAD.html.

Если вы используете WordPress, вставьте следующий код в файл HEAD header.php.
Как только это будет сделано, загрузите файл обратно туда, где вы его получили. Готово! Пожалуйста, перезагрузите страницу вашего сайта, чтобы увидеть значок.

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

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

Как добавить фавикон WordPress на свой сайт — WordPress.com

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

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

Что такое значок?

Фавикон (также известный как значок ярлыка, значок веб-сайта или блаватар) — это маленький значок, который отображается в верхней части вкладки браузера, рядом с сайтом, отмеченным закладкой в ​​любом браузере, или как значок приложения на главном экране, когда вы сохранить сайт на свой смартфон.Когда вы загружаете значок на свой веб-сайт, он отображается на платформе WordPress.com и в виджетах (например, в блогах, которые я отслеживаю).

Чем полезны значки избранных?

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

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

Выполните следующие действия, чтобы создать и добавить свой собственный значок:

• Шаг 1 : Решите, хотите ли вы использовать свой логотип, значок или букву в качестве значка.
• Шаг 2 : Используйте программу редактирования изображений, например Photoshop или Canva, чтобы создать дизайн размером 512 пикселей в высоту и 512 пикселей в ширину.В приведенном ниже примере Canva использовалась для создания квадратной формы вместе с текстовым элементом, который будет служить значком.

• Шаг 3 : Закончив создание значка, нажмите кнопку Загрузить в Canva или сохраните его как файл PNG в Photoshop.
• Шаг 4 : Перейдите на свой веб-сайт WordPress.com и перейдите к Мой сайт > Настройки > Общие и нажмите кнопку Изменить под значком сайта .

• Шаг 5 : Вы увидите свою медиа-библиотеку, где вы можете выбрать существующее изображение или загрузить новое. Поскольку мы только что создали значок, загрузите его в свою медиатеку, выберите его и нажмите Продолжить .

• Шаг 6: Вам будет предложено изменить размер значка на следующем экране. Учитывая, что мы создали наш значок с точными необходимыми размерами, оставьте изображение как есть и нажмите Обрезать изображение .

• Шаг 7: После загрузки изображения щелкните Сохранить настройки . Имейте в виду, что на распространение изменений в Интернете может потребоваться пара часов. Ваш значок должен появиться в закладках и на вкладках браузера.

Маленькая иконка, большой инструмент для брендинга

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

Генератор Favicon для идеальных иконок во всех браузерах