Как добавить изображение в строку заголовка

Многие веб-страницы добавляют логотип иконки или изображения в строку заголовка. Логотип иконки также называется favicon.

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

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

Favicon стандартизирован в HTML 4.01. Стандартная разработка использует элемент link с атрибутом rel в разделе документа <head>, который указывает формат, название и расположение файла. Файл может находится в любом каталоге веб-сайта и иметь любой формат файла изображения (ico, png, jpeg, gif).

Favicons можно добавить двумя способами.

  • Чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (ico, jpg, bmp, gif, png). Возможно также использование не квадратного изображения, но выглядеть оно будет не так профессионально.
  • Вам потребуется конвертация изображения в формат .ico. Для этого можно использовать онлайн инструменты.
  • Откройте онлайн инструмент и загрузите файл изображения, после чего изображение будет автоматически конвертировано.
  • Скачайте изображение и сохраните файл .ico на компьютере.
  • Переименуйте файл в favicon.ico,чтобы браузер смог автоматически распознать это название.
  • Скачайте файл в хост, где расположены файлы вашего веб-сайта.
  • Когда файл favicon.ico будет загружен, браузер автоматически выберет и покажет изображение в браузере.

Второй способ добавления favicons:

  • Чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (ico, jpg, bmp, gif, png). Возможно также использование не квадратного изображения, но выглядеть оно будет не так профессионально.
  • Загрузите изображение в хост, где расположены файлы вашего веб-сайта.
  • Последним шагом необходимо указать изображение, которое хотите использовать как favicon в коде вашего веб-сайта:

Добавьте следующую ссылку в раздел <head>

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

Если новая иконка не отображается, очистите кэш браузера и попробуйте заново.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="shortcut icon" href="href="/favicon1.ico">
  </head>
  <body>
    <h1 style = "color: #1c98c9;"> 
      Иконка W3docs 
    </h1>
    <p> 
      Иконка W3docs добавлена в строку заголовка 
    </p>
  </body>
</html>

Результат


Иконка favicon должна иметь следующие характеристики:

  • Favicon.ico - это название по умолчанию.
  • Размеры иконок должны быть 16×16, 32×32, 48×48, 64×64 или 128×128 пикселей.
  • Иконки должны иметь 8, 24 или 32-битный цвет.

В зависимости от формата favicon, атрибут type должен быть изменен:

  • Для PNG используйте image/png.
  • Для GIF используйте image/gif.
  • Для JPEG используйте image/gif.
  • Для ICO используйте image/x-icon.
  • Для SVG используйте image/svg+xml
<link rel="icon" href="favicon.gif" type="image/gif">

Для разных платформ размер favicon должен быть изменен:

<table class="table table-bordered table-striped table-header small-font">
  <tbody>
    <tr>
      <th>Platform</th>
      <th>Name</th>
      <th>Rel value</th>
      <th>Favicon size</th>
    </tr>
    <tr>
      <td>Google TV</td>
      <td>favicon.png</td>
      <td>icon</td>
      <td>96×96</td>
    </tr>
    <tr>
      <td>Opera Coast</td>
      <td>favicon-coast.png</td>
      <td>icon</td>
      <td>228×228</td>
    </tr>
    <tr>
      <td>Ipad Retina, iOS 7 or later</td>
      <td>apple-touch-icon-152×152-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>152×152</td>
    </tr>
    <tr>
      <td>Ipad Retina, iOS 6 or later</td>
      <td>apple-touch-icon-144×144-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>144×144</td>
    </tr>
    <tr>
      <td>Ipad Min, first generation iOS 7 or later</td>
      <td>apple-touch-icon-76×76-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>76×76</td>
    </tr>
    <tr>
      <td>Ipad Mini,first generation iOS 6 or previous</td>
      <td>apple-touch-icon-72×72-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>72×72</td>
    </tr>
    <tr>
      <td>Iphone Retina, iOS 7 or later</td>
      <td>apple-touch-icon-120×120-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>120×120</td>
    </tr>
    <tr>
      <td>Iphone Retina, iOS 6 or previous</td>
      <td>apple-touch-icon-114×114-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>114×114</td>
    </tr>
  </tbody>
</table>

Для устройств Apple с операционной системой iOS версия 1.1.3 или выше и для устройств Android можете создать дисплей на главном экране, используя в Safari кнопку Добавить на главный экран (Add to Home Screen). Для разных платформ добавьте ссылку в разделе документа head.

Смотрите, как можете добавить ее в ваш код.

<!-- default favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- wideley used favicon -->
<link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">
<!-- for apple mobile devices -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120">
<!-- google tv favicon -->
<link rel="icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">

Считаете ли это полезным?

Похожие статьи