Как называется иконка на вкладке

Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В случае отсутствия такого указания браузер пытается загрузить favicon.ico из корня сайта. Однако имеется возможность явно указать положение значка в (X)HTML-коде (внутри элемента ), что позволяет при условии отсутствия /favicon.ico использовать для каждой страницы свой значок.

Для явного указания местоположения favicon.ico необходимо вписать следующую строку в код страницы вашего сайта внутрь секции head:

• rel может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам, — на слово «icon»)
• href содержит абсолютный или относительный URI к файлу (в Mozilla Firefox 3.0, например, поддерживаются те же URI, что и с тегом img ).
• Форматом файла может быть png или gif , размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета (в Mozilla Firefox, например, может быть не только этот, но и как у тега img ).

При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG).

В 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в Internet Assigned Numbers Authority (IANA). Для этого формата стандартным MIME-типом стал image/vnd.microsoft.icon .

Если для Internet Explorer используется формат ICO, то его MIME-тип должен быть image/vnd.microsoft.icon . Тип image/x-icon устарел в 2003 году после стандартизации типа для ICO. Правильный тип image/vnd.microsoft.icon поддерживается всеми браузерами [ источник не указан 3195 дней ] . Важно помнить, что иконка не будет показываться в браузере, если её Content-type, возвращаемый веб-сервером, не совпадёт с указанным в html-коде страницы.

Можно указать несколько изображений в разных форматах — например, строку с rel=»shortcut icon» и значком в формате ICO для Internet Explorer, и строку с rel=»icon» и значком в формате GIF или PNG для остальных браузеров.

Мобильный значок сайта [ править | править код ]

Устройства фирмы Apple начиная с iOS 1.1.3 и некоторые устройства на базе ОС Andro >[10] поддерживают специальные большие иконки, которые могут использоваться в качестве значков веб-приложений. [11][12] Сайт может предоставлять такую иконку, указав в заголовке
[13] Рекомендуемый размер иконки 60×60 пикселей для iPhone и 120×120 пикселей для iPhone с Retina дисплеем. [12][14][15] Для iPad рекомендуется иконка размером 76×76 пикселей, а для iPad с Retina дисплеем (начиная с iPad третьего поколения) 152×152 пикселя. [16] Для планшетов на Andro >[17]

На изображение упомянутое как apple-touch-icon накладывается тень, отражение, а также изображение получает скруглённые края. [12] А на изображение apple-touch-icon-precomposed не накладывается никаких эффектов. [12] [13]

С закруглёнными краями, добавляемыми iOS Без отражений

Масса открытых вкладок, но все различаются – как называется иконка сайта, отображающаяся в окне браузера? Как называется небольшой логотип сайта, устанавливаемый во вкладках браузера? Зачем он нужен и можно ли его заменить? Почему многие компании ставят отличный от логотипа значок?

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

Образовано слово от английский «favorite icon» — знак избранного. Ранее использовался только для интернет ресурсов, добавленных в закладки.

Зачем нужна маленькая иконка сайта

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

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

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

Стандартный размер фавикона – 16×16 пикселей. Такой размер оптимально умещается на открытых вкладках, не мешает при просмотре информации в выдаче.

Формы фавикона могут быть самые разные – начиная со стандартных, квадратных. Заканчивая – «вырезанными» фигурами. Всего лишь достаточно создать файл, и первостепенно сохранить его в формате PNG – как называется картинка без фона.

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

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

Почему компании не вставляют логотип в фавикон

Как уже было написано ранее, для правильного отображения иконки необходимо подогнать изображение под определенный размер — 16×16 px. Зачастую, логотип не соответствует подобным размерам – при уменьшении не будет понятен смысл. Более того, чаще всего фирменные логотипы имеют прямоугольную форму, что не совсем удобно при формировании фавикона.

Таким образом, дизайнеры видоизменяют иконку, подгоняя ее под общий смысл сайта или фирменные цвета компании.

Некоторые сайты не заморачиваются с отображением так называемой иконки, и в качестве мини-логотипа ставят первую букву названия сайта, каким-либо образом «обрамляя ее».

Одна из самых запоминающихся букв – это большая W — превью Википедии.

В статье:

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

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в табах и в других элементах интерфейса. Лучше всего смотрится изображение, которое можно вписать в квадрат. Стандартные размеры — 16×16, 32×32, для некоторых браузеров и ОС нужны размеры 60×60, 120×120, 192×192.

Обычно используют формат ICO, но еще доступны PNG, GIF, JPEG, SVG. Файл формата ICO содержит несколько версий фавикона, некоторые браузеры могут выбрать не ту версию и использовать значок более низкого разрешения, поэтому некоторые веб-мастера советуют PNG.

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

В России фавиконы в выдаче поддерживает Яндекс:

Сайты с фавиконами в выдаче Яндекса

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

Выдача Google в Великобритании

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

Сайты с фавиконами на вкладках и на панели закладок

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

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

Разберем, для чего нужен файл favicon.ico и можно ли без него обойтись.

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

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

Сайт без фавикона в выдаче среди прочих

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

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

Логотип компании в фавиконе

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

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

Закладки в Google Chrome

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

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

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

Фавикон из картинки: какую выбрать

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

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

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

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

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

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

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

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

RealFaviconGenerator сделает фавиконы для разных платформ и браузеров. Если вам достаточно одного значка, Генератор от PR-CY отконвертирует изображение в файл ICO 16х16.

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

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

Созданную картинку для фавикона нужно сохранить ее в корне сайта и добавить ссылку на размещенный файл в HTML-код главной:

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

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

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

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

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

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

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

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

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

Популярные десктопные браузеры

Стандартно для фавикона делают файл favicon.ico, он поддерживается всеми браузерами, но можно выбрать и другой формат. Обычно рекомендуют установить несколько размеров фавикона для разных случаев: 16×16, 32×32 и 48×48.

Фавикон в HTML5

В HTML5 с помощью расширенного описания можно указать размеры и формат иконки. Для файла ICO, в котором несколько фавиконов, можно указать размеры в атрибуте sizes через пробел. Для фавикона в векторе укажите размер «any».

Android

Для Android рекомендуют сделать иконку в формате PNG 192×192, можно использовать прозрачность.

Указать фавикон и его расположение для Android можно через спецификацию The Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастера указывают иконки, размеры и форматы для сайта или приложения. Его поддерживают Chrome, Opera, Samsung Internet и Firefox.

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

Apple

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

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

Настраивают с помощью .

Edge и IE 12

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

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

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

«>

• Главная
• Компьютеры

Оценка статьи:

(Пока оценок нет)

Загрузка...

Поделиться с друзьями: