🌄 Иконка веб-сайта

Выделит среди других избранных

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

Фавиконка сайта

Вы наверняка замечали в журнале истории и в закладках веб-браузера, а также в результатах поиска, у некоторых сайтов есть своя иконка.
Например: ico inoy.org - это файл https://inoy.org/favicon.ico

А теперь представьте себе: чтобы сделать на своём сайте такую иконку, вам не придётся редактировать каждую страницу и править HTML-код. Всё гораздо проще.

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

  1. В корневом каталоге веб-сайта должен находиться файл с иконкой под названием на латинице "favicon.ico"
    * Корневой каталог - это, папка "/" сайта, где файл главной страницы /index.php
  2. Этот файл формата ico (в стандарте Microsoft Windows: image/vnd.microsoft.icon), размеры 16 на 16 пикселей и 8-битная палитра из всего 256 цветов.
  3. Веб-сервер должен быть настроен на обработку файлов с расширением .ico

Если нет, то добавьте в MIME-тип: image/vnd.microsoft.icon для .ico (image/x-icon устарел в 2003 году) например в файл .htaccess строку:
AddType image/vnd.microsoft.icon .ico

Также можно включить в страницу вот такой тэг:

Как минимум на главной странице сайта можете добавить ссылку на иконку.

<link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/vnd.microsoft.icon"/> в элемент <head>

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

Можно указать несколько изображений в разных форматах — например, строку с rel="shortcut icon" и значком в формате ICO для Internet Explorer, и строку с rel="icon" и значком в формате SVG или PNG для остальных браузеров.
<link rel="icon" href="https://example.com/favicon.png" type="image/png"/>

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

  • Google Chrome и Safari: ico; v4.0: png, jpeg, gif - без анимации;
  • Internet Explorer: v5.0: ico; v11.0: png, gif - без анимации;
  • Firefox: v1.0: ico, jpeg, png и gif c анимациями; v3.0: APNG;
  • Opera: v7.0: ico, png, jpeg, gif с анимации; v9.5: APNG; v9.6: SVG;

Важно помнить, что иконка не будет показываться в браузере, если её тип содержимого (Content-type), возвращаемый веб-сервером, не совпадёт с указанным в html-коде страницы.

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

Традиционно использовались изображения размера 16×16 пикселей формата ICO (до 256×256px), помещённые в корневой каталог сайта под именем "favicon.ico" и MIME-тип "image/vnd.microsoft.icon", но в натоящее время PNG, SVG.

Фавиконка необходима размером 120x120 пикселей или в формате SVG, чтобы быть чётким и заметным в результатах поиска Яндекс.

Рекомендуемый размер: 120x120, 32x32 или 16x16 пикселей.

Рекомендуемый формат (и тип): SVG (image/svg+xml), PNG (image/png), GIF (image/gif), JPG (image/jpeg), ICO ("image/x-icon" или "image/vnd.microsoft.icon"), BMP (image/bmp).

Тач-иконка сайта

Вы наверняка замечали, юзая веб-браузеры на платформах iOS 1.1.3 + или Android 2.1 +, при добавлении закладки на "рабочий стол" мобильного телефона у некоторых сайтов стоит своя иконка.

Например: http://inoy.org/apple-touch-icon.png inoy touch icon Иной.орг

А теперь представьте себе: чтобы сделать на своем сайте такую тач-иконку, вам не придётся править HTML-код и редактировать каждую страницу. Всё гораздо проще...

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

  1. В корневом каталоге сайта должен находиться файл с иконкой под названием
    "apple-touch-icon-precomposed.png" - необходимо полностью контролировать отображение иконки
    или
    "apple-touch-icon.png" - в iOS к иконке будут применены свои эффекты наподобие "стеклянности", можно отключить обработку добавив постфикс "-precomposed"
  2. Этот файл должен иметь формат png, размеры 57 на 57 пикселей.
  3. Веб-сервер должен быть настроен на обработку файлов с расширением .png
    Если нет, то добавьте в MIME-type: image/png .png в файл .htaccess строку: AddType image/png .png

Разрешение экранов в "яблочных" девайсах постоянно растет, поэтому следует оптимизировать нашу иконку под все поколения iPhone, iPad, iPod.

Далее приведены размеры в px и описание девайсов, на которых используется:
114 x 114 — iPhone, iPod touch высокого разрешения
144 x 144 — iPad высокого разрешения
57 x 57 — iPhone, iPod touch
72 x 72 — iPad

Также можно включить в страницу вот такие тэги:

<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"/>

<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"/>

<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"/>

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

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

При этом браузер сначало запросит адрес, указанный в этом тэге, а лишь потом файл из корня с префиксом apple-touch-icon- в следующем порядке, для 57x57:

  • apple-touch-icon-57x57-precomposed.png (57x57)
  • apple-touch-icon-57x57.png (57x57)
  • apple-touch-icon-precomposed.png (129x129)
  • apple-touch-icon.png (129x129)

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

0.00191 ...