Иконка браузера: браузер Иконки — скачать 427 бесплатно Иконки PNG, SVG, ICO или ICNS

15+ наборов иконок браузеров (опера, хром, firefox и др.)

Недавно для работы мне нужны были иконки браузеров, поэтому пришлось немного поискать их в интернете. Как правило, все подобные наборы содержат топовое ПО — Оперу, Firefox, Хром, Safari, Internet Explorer плюс несколько менее популярных — RockMelt, Maxthon, Chromium и т.п. В одном из вариантов есть даже иконка для приложения от Яндекса.

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

Итак, давайте рассмотрим найденные наборы.

Web Browser Icon Pack

Содержит 12 вариаций для 6-ти браузеров (с эффектом блеска и без).

The Browsers By Morcha

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

Free Flat Browser Icons

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

Browsercons

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

Square Browser Icons

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

CS Browser Icons

Стильные иконки с отблеском.

Browser Icons

The Browser Wars — Dock Icons

Beautiful flat style metro browser

iOS 7 Style Browser Icons

Здесь, как видите, есть иконка Яндекс браузера. Да и вообще достаточно много разного софта представлено по сравнению с другими подборками.

Web Browser Icons

Meliae Browsers

Browsers — Navigateurs

Browser Paradise — Windows

Кстати, нужные нам материалы можно найти также и в специальных сервисах поиска иконок. Вводите в строке поиска слово browser и получаете соответствующие результаты.

Findicons

Iconarchive

Iconfinder

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

Эволюция дизайна браузеров — Дизайн на vc.ru

{«id»:71080,»url»:»https:\/\/vc.ru\/design\/71080-evolyuciya-dizayna-brauzerov»,»title»:»\u042d\u0432\u043e\u043b\u044e\u0446\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432″,»services»:{«facebook»:{«url»:»https:\/\/www.

facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/71080-evolyuciya-dizayna-brauzerov»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/71080-evolyuciya-dizayna-brauzerov&title=\u042d\u0432\u043e\u043b\u044e\u0446\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/71080-evolyuciya-dizayna-brauzerov&text=\u042d\u0432\u043e\u043b\u044e\u0446\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/71080-evolyuciya-dizayna-brauzerov&text=\u042d\u0432\u043e\u043b\u044e\u0446\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect. ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/71080-evolyuciya-dizayna-brauzerov»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u042d\u0432\u043e\u043b\u044e\u0446\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432&body=https:\/\/vc.ru\/design\/71080-evolyuciya-dizayna-brauzerov»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

4911 просмотров

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

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

Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

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

Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

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

• Десктопные браузеры
• 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">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120.

Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

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

Chrome на Android

Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

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

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

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

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

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.

{
 "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"
  }
 ]
}
 

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.

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

android-icon-192×192. png, которая объявлена у вас в коде.

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

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

iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.

Пользователи 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">

В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.

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

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

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

macOS

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

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

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

В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.

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

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

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

Windows

С 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? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл 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>

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

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

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

Например, для картинки 70х70 рекомендуемый размер 128х128. Это означает, что нужно создать картинку с прозрачным фоном размером 128х128, название которой будет mstile-70×70. То же самое нужно проделать с остальными размерами.

Подготовка 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">

С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

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

Favicon (favorite icon) — маленький значок (обычно логотип или часть логотипа), который отображается во вкладке браузера рядом с заголовком (title) страницы. На сегодняшний день у этой иконки существует еще множество предназначений. В этой статье мы рассмотрим основные из них. А также пройдемся по основным форматам и типам favicon.

Для чего нужен Favicon?

1. Иконка на вкладке браузера

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

2. Иконка в закладках браузера

Если сохранить страницу сайта в закладках браузера, то рядом с названием сохраняемой закладки будет также отображаться и иконка favicon. Также этот значок будет отображаться в настройках браузера в разделах «Закладки» и «История».

3. Иконка в поисковой выдаче

Поисковые системы Яндекс и Google выводят favicon слева от ссылки на страницу сайта. Это важный фактор, т.к. на сайты, имеющие favicon, кликают чаще, чем на сайты без favicon.

4. Иконка на рабочем столе компьютера

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

5. Иконка в рейтингах и на стартовых страницах

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

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

Какой должен быть формат файла Favicon?

Изначально, придуманный компанией Майкрасофт формат .ico был стандартом и использовался как в ранних версиях Internet Explorer. Его также поддерживали и считали стандартом и другие браузеры.

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

Формат .ico всё еще поддерживается основными браузерами, но считается устаревшим, поэтому всё же рекомендуется использовать для favicon файлы формата .png.

Какой должен быть размер Favicon?

Исторически сложились три стандартных формата favicon: 16×16, 32×32, 48×48. Однако в последние годы веб-платформы развились очень разносторонне, и на сегодняшний день включают в себя смартфоны, планшеты, телевизоры. На всех этих устройствах используются различные браузеры для доступа в интернет. Исходя из этого начали появляться и другие форматы favicon, такие как 96×96, 128×128, 196×196 и некоторые другие.

Очень сильно повлияло на стандарты размеров favicon появление первых iPhone и знаменитых retina-экранов от Apple с удвоенной плотностью пикселей, диктующих свои размеры изображений для favicon.

Проанализировав все возможные варианты устройств и мест использования favicon мы определили следующий набор иконок, которые обязательно должны присутствовать на сайте (значения указаны в пикселях):

Для устройств Apple

• 57×57 — iPhone (iOS 6 и ниже, экран Classic)
• 60×60 — iPhone (iOS 7, экран Classic)
• 72×72 — iPad (iOS 6 и ниже, экран Classic)
• 76×76 — iPad (iOS 7, экран Classic)
• 114×114 — iPhone (iOS 6 и ниже, экран Retina)
• 120×120 — iPhone (iOS 7, экран Retina)
• 144×144 — iPad (iOS 6 и ниже, экран Retina)
• 152×152 — iPad (iOS 7, экран Retina)
• 180×180 — iPhone (iOS 8 и выше, экран 6 Plus)

Для устройств на Windows

• 70×70 — закладки в Edge и плитка в Пуск (размер: Мелкий)
• 150×150 — плитка в Пуск (размер: Средний)
• 310×150 — плитка в Пуск (размер: Широкий)
• 310×310 — плитка в Пуск (размер: Крупный)

Остальные случаи

• 16×16 — для закладок браузеров
• 32×32 — для закладок на панели задач
• 96×96 — для ярлыков на рабочем столе

Например, на нашем сайте qmedia.by это выглядит следующим образом:

Favicon (иконка сайта) | SEO-портал

Иконка Favicon (фавиконка) — маленький, но очень важный атрибут сайта. Из материала вы узнаете о том, зачем нужна фавиконка, какое значение она имеет в SEO, а также о том, как создать и подключить Favicon в формате ICO и других форматах к своему сайту.

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

Иконка сайта Favicon (от англ. Favorite Icon — иконка для избранного; также: фавиконка, пиктограмма сайта, значок сайта) — небольшая (16×16 px) картинка (как правило в формате ICO), отображаемая во вкладках и закладках браузера, а также имеющая значение в SEO-оптимизации.

Иконка сайта в браузере

Главное назначение иконок Favicon: отображение в элементах интерфейса браузеров, облегчающее их использование.

Иконка сайта во вкладках браузера

Все современные интернет-обозреватели отображают иконку сайта во вкладках:

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

Фавиконки при большом количестве вкладок

Иконка сайта в закладках браузера

Кроме отображения во вкладках, иконка сайта отображается в закладках браузеров (в ссылках на «избранные» страницы), а также в панелях со ссылками:

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

Иконка сайта перед адресной строкой браузера

Некоторые браузеры отображают пиктограмму сайта перед адресной строкой, а также в выпадающем списке URL-адресов выпадающей строки:

Значение иконки сайта в SEO

Favicon является SEO-фактором, т. к. она отображается в сниппетах поисковой выдачи Яндекса и Google (в мобильной поисковой выдаче фавиконки стали отображаться с мая 2019-го, а в десктопной — с начала 2020-го года), в некоторой мере влияя на их кликабельность (вероятность перехода на сайт из поисковой выдачи), которая является положительным поведенческим фактором ранжирования.

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

Из всего вышесказанного следует, что фавиконка:

• отображается в интерфейсе браузеров: вкладках, закладках и перед адресной строкой (Internet Explorer, Safari),
• способствует узнаваемости сайта,
• облегчает работу пользователей в браузере,
• является визитной карточкой сайта в браузере,
• отображается в сниппетах поисковой выдачи,
• может влиять на кликабельность сниппета,
• может косвенно влиять на ранжирование страниц сайта.

Иконка сайта и ПС Яндекс

Favicon отображается в поисковой выдаче Яндекса и может непосредственно влиять на внешние поведенческие факторы.

Favicon в сниппетах Яндекса

Фавиконка сайта отображается напротив заголовков сниппетов:

Favicon в сниппетах выдачи Яндекса

Наличие (отсутствие) и привлекательность фавиконки может отражаться на кликабельности сниппета поисковой выдачи Яндекса, косвенно влияя на ранжирование.

У Яндекса существует отдельный поисковой робот, индексирующий файлы favicon в формате ICO и в других форматах. Обновление фавиконок в выдаче Яндекса – явление достаточно редкое, занимающее около месяца.

Предупреждение об отсутствии файла

Если иконка сайта не отображается в Яндексе, то обратите внимание на наличие предупреждения «Отсутствует файл favicon на сайте» в разделе «Диагностика сайта» сервиса Яндекс.Вебмастер:

Указание на отсутствие фавиконки в сервисе Яндекс.Вебмастер

Проверка наличия Favicon в индексе

Фавиконки добавляются в индексную базу и отображаются в поисковой выдаче в виде изображений в формате PNG. Проверить наличие иконки сайта в индексе Яндекса можно по ссылке:

http://favicon.yandex.net/favicon/[абсолютный URL-адрес]

Например: http://favicon.yandex.net/favicon/https://seoportal.net

Если фавиконка проиндексирована, то она отобразится на странице в формате PNG.

Проверка Favicon на соответствие требованиям

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

Чтобы фавиконка отображалась в результатах поиска, необходимо разместить картинку (файл favicon.ico) размером 16×16 пикселей в корневом каталоге сайта. Предпочтительный формат пиктограммы сайта — ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP.

Яндекс.Помощь

Требования к иконке сайта

Чтобы избежать проблем с отображением иконки сайта Favicon в интерфейсе браузеров и сниппетах поисковой выдачи Яндекса, необходимо, чтобы файл иконки соответствовал определённым требованиям.

Для фавиконок существуют требования:

• к названию файла,
• к геометрическому размеру,
• к формату файла,
• к размещению,
• к HTML-разметке.

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

Название файла

Традиционно файл иконки сайта принято называть favicon, но фактически он может называться как угодно, если в HTML-коде указан явный путь к иконке сайта. Иначе говоря: если в корне сайта размещена иконка favicon.ico (именно в формате ICO), а в HTML-коде нет ссылки на неё, то браузер всё равно обнаружит иконку по её названию и будет отображать по назначению. Если же фавиконка сайта будет называться иначе, чем favicon.ico, или иметь расширение, отличное от ICO, при этом в HTML-коде не будет явной ссылки на неё, то браузер не сможет её обнаружить.

Во избежание проблем с отображением иконки сайта в браузере и сниппетах поисковой выдачи Яндекса, файл иконки следует называть «favicon.ico».

Геометрический размер

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

Значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например 48 x 48, 96 x 96, 144 x 144. Файлы SVG конкретного размера не имеют. Поддерживаются значки всех допустимых форматов. Убедитесь, что значок сайта хорошо выглядит при разрешении 16 x 16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.

Справка Google

Формат файла

Традиционным форматом Favicon является ICO, однако современные браузеры могут отображать фавиконки и в других форматах:

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

Иконка сайта Favicon в формате ICO поддерживается всеми современными браузерами.

Размещение на сайте

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

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

HTML-код иконки для сайта

Прописывать Favicon в HTML-коде не обязательно, если фавиконка соответствует следующим требованиям:

• имя файла: favicon,
• формат файла: ICO,
• размер значка сайта должен быть кратным 48, т. е. не менее 48×48 px,
• размещение файла: корневой каталог сайта.

В иных случаях (например, если для отдельных страниц применяются отдельные иконки) необходимо указывать тег <link> для Favicon в HTML-коде.

Какой должна быть иконка сайта?

Несмотря на свой скромный размер, Favicon является отличительным символом сайта в глазах как пользователей, так и поисковых систем, а её наличие и привлекательность играют не последнюю роль в кликабельности сниппетов поисковой выдачи Яндекса.

Привлекательность

Иконка сайта должна быть уникальной, привлекательной и запоминающейся, поэтому к её созданию необходимо подойти серьезно, с учётом всех возможностей:

Используйте уникальную фавиконку

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

Фавиконка должна быть контрастной

Иконка сайта, несмотря на свой скромный размер, должна быть четкой: пользователь должен ясно видеть, что изображено на картинке, иначе он её не запомнит и не оценит.

Подумайте об использовании анимации

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

Учитывайте возможность применения прозрачности

Все форматы для файлов Favicon, кроме JPG, позволяют использовать эффекты прозрачности и полупрозрачности. При необходимости следует этим пользоваться.

Уникальность

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

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

Контрастность

Иконка сайта должна быть четкой и контрастной, но не слишком резкой. Не используйте Favicon с размытым нечетким изображением или со слишком резким выделением пикселей:

---

Исходное изображение

Анимация в Favicon

Некоторые браузеры могут отображать анимацию фавиконок с расширениями ico и gif:

---

Статичная иконка

---

Анимированная иконка

Создать анимированный Favicon можно с помощью графических редакторов или специализированных онлайн-сервисов.

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

При создании анимированного Favicon руководствуйтесь следующими правилами:

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

Эффект прозрачности

Прозрачный и полупрозрачный фон фавиконок становится заметен в неактивных вкладках браузера, а в остальных случаях (в активных вкладках, закладках и даже в сниппетах Яндекса) фавиконка отображается на белом или светло-сером фоне:

Можно заметить, что все крупные популярные сайты (в том числе Яндекс и Google) используют фавиконки с прозрачным фоном вместо белого. Непрозрачный белый фон практически не применяется, т. к. слишком выделяется на сером фоне неактивных вкладок браузера.

При определении прозрачности фона для иконки сайта руководствуйтесь следующими принципами:

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

Как сделать Favicon для сайта?

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

Онлайн-генератор favicon.cc

В сервисе favicon.cc можно создавать фавиконки только в размере 16×16 px, поэтому рекомендуем использовать другой способ для создания значка 48×48 px (согласно информации в Справке Google).

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

Перейти к генератору favicon.cc

Возможности сервиса

Favicon.cc позволяет:

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

К условным недостаткам генератора можно отнести:

• отсутствие русской версии,
• экспорт файлов только в формате ICO.

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

Чтобы сделать пиктограмму сайта в режиме онлайн, перейдите в сервис favicon.cc и следуйте инструкциям:

1. кликните Create New Favicon,
2. в области «Color Picker» в правой части окна размещены инструменты для рисования:
   • палитра цветов — для определения цвета карандаша,
   • Transparency — ползунок определения степени прозрачности,
   • Last Used Colors — панель быстрого выбора из последних применяемых цветов,
   • transparent — устанавливает прозрачный цвет («стирка»),
   • move — позволяет переместить все пиксели в редакторе.
3. разобравшись с инструментами, приступайте к рисованию иконки для сайта в редакторе,
4. все изменения будут сразу отображаться в натуральную величину (16×16 px) в области «Preview»,
5. скачать готовую фавиконку можно по клику на Download Favicon.

Создание Favicon в онлайн-генераторе

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

Генератор favicon.cc позволяет легко сделать анимированную иконку favicon.ico для сайта в режиме онлайн:

1. кликните Use Animation под окном редактора,
2. раскроются дополнительные инструменты для работы с кадрами:
   • номер кадра указан прямо под редактором Favicon,
   • в выпадающем списке напротив номера можно выбрать частоту смены кадра,
   • Clear Frame — очистка окна редактора (текущего кадра),
   • Append New Frame — добавление нового чистого кадра (откроется в редакторе),
   • Copy Previous Frame — позволяет скопировать пиксели предыдущего кадра в текущий,
   • Delete Frame — удаление текущего кадра,
   • animate preview — активация демонстрации анимации в области «Preview»,
   • в выпадающем списке напротив чекбокса можно выбрать количество циклов анимации.

Онлайн-конвертер Favicon

Функционал favicon.cc позволяет конвертировать изображения из форматов JPG, JPEG, GIF, PNG, BMP, ICO, CUR в формат ICO с преобразованием их размера:

1. кликните Import Image,
2. выберите файл для преобразования размером не более 5 Мб,
3. определите способ преобразования размера изображения до квадратных пропорций:
   • Keep Dimensions — с сохранением пропорций исходного изображения,
   • Shrink to square icon — сжимая или растягивая изображение.
4. кликните Upload для конвертации.

Онлайн-конвертер favicon.cc

Готовые бесплатные фавиконки

Сервис favicon.cc позволяет бесплатно просматривать, редактировать и скачивать созданные с помощью данного генератора фавиконки:

1. чтобы перейти к списку готовых фавиконок кликните:
   • Latest Favicons — последние созданные иконки,
   • Top Rated Favicons — самые популярные иконки,
2. кликните по названию понравившейся фавиконки,
3. кликните:
   • Download Favicon чтобы скачать копию фавиконки,
   • Edit Copy of Icon чтобы приступить к редактированию копии фавиконки.

Создание Favicon в Photoshop

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

Особенности программы

Графический редактор Adobe Photoshop не нуждается в представлении. Но как сделать иконку для сайта в «фотошопе»? Достаточно просто, если вы уже знакомы с интерфейсом программы, и достаточно сложно, если вы не имеете практики работы в Photoshop.

Не будем перечислять возможности фотошопа при работе с изображениями (это другая тематика и слишком большой объём информации), но разберём условные недостатки программы, с которыми можно столкнуться при создании Favicon:

• Сложный многофункциональный интерфейс

  Программа Photoshop предназначена для качественной обработки изображений (в частности фотографий). Для быстрого освоения подойдут другие узконаправленные программы по созданию фавиконок.

• Нет возможности сохранять файлы в формате ICO

  Но можно сохранять иконку в формате BMP и заменять расширение на ICO.

• Нет возможности создавать анимационные Favicon в формате ICO

  Но можно создавать анимационные фавиконки в формате GIF.

Для изображений и инструкций данного материала применялась русифицированная версия Adobe Photoshop CC 2015.

Рисование Favicon

Нарисуем иконку для сайта в программе Adobe Photoshop CC:

1. открываем программу,
2. кликаем Файл → Создать,
3. в появившемся окне устанавливаем высоту и ширину 16 px и жмем ОК,
4. для удобства рисования:
   • масштабируем изображение (клавиши CTRL + + и CTRL + -),
   • включаем сетку: (клавиши CTRL + '),
   • настраиваем сетку: (Редактирование → Настройки → Направляющие, сетка и фрагменты…),
   • используем инструменты для рисования в зависимости от необходимости (карандаш, кисть и др.).

Рисование Favicon в Photoshop

Сохранение фавиконки

Стандартный функционал Photoshop не позволяет сохранять файлы в формате ICO. Для этого можно воспользоваться простым трюком смены формата BMP на ICO:

1. кликаем Файл → Сохранить как,
2. в окне сохранения в соответствующем текстовом поле указываем имя файла favicon, а в поле «Тип файла» из выпадающего списка выбираем BMP и сохраняем,
3. открываем Total Commander и меняем расширение файла на ICO.

Смена формата Favicon с BMP на ICO

Создание Favicon из изображения

Если у вас есть готовое изображение (например, полноразмерный логотип), вы можете сделать из него фавиконку с помощью Photoshop:

Создание иконки для сайта из изображения в Photoshop

1. откройте исходное изображение в Photoshop,
2. измените пропорции изображения в соотношении 1×1 (форма квадрата) с помощью:
   • кадрирования (клавиша C),
   • изменения размера изображения (клавиши ALT + CTRL + I),
   • изменения размера холста (клавиши ALT + CTRL + C),
3. перейдите в режим изменения размера изображения (клавиши ALT + CTRL + I):
   • уменьшите изображение до 16×16 px,
   • в выпадающем списке «Ресамплинг» для оптимальной четкости выберите «Бикубическая (с уменьшением)»,
   • вы можете поэкспериментировать с другими вариантами ресамплинга, оценивая результат в том же окне,
4. сохраните файл как указано выше (клавиши ALT + S), или в другом веб-формате (клавиши ALT + CTRL + SHIFT + S).

Изменение размера и настройка четкости фавиконки

Создание анимированной Favicon

Для создания анимированной пиктограммы сайта в формате GIF:

1. открываем статичную фавиконку в программе,
2. кликаем Окно → Шкала времени,
3. кликаем Создать анимацию кадра,
4. выбираем кадры и:
   • дублируем слои для новых кадров,
   • редактируем слои для новых кадров,
   • настраиваем отображение слоёв в кадрах,
   • устанавливаем частоту смены кадров.
5. переходим в «Сохранить для Web» (клавиши ALT + CTRL + SHIFT + S):
   • выбираем тип файла GIF,
   • в разеле «Анимация» выбираем число повторов «Постоянно»,
   • сохраняем картинку.

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

Перед подключением фавиконки в HTML-коде необходимо правильно создать и установить файл Favicon на сайте: по умолчанию браузеры ищут фавиконку по названию favicon.ico в корневой папке сайта. Если иконка не соответствует какому-то из требований (название, расширение и размещение файла), то следует указывать на неё в HTML-коде.

HTML-код для Favicon

Чтобы прописать иконку сайта в HTML-коде применяется тег link с атрибутами rel, type и href, размещаемый в разделе head:

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

Возможные значения атрибутов тега <link> для Favicon

Атрибут	Значение	Пояснение
rel	icon	Указывает, что тег link определяет Favicon для страницы. Указанные значения равнозначны.
	shortcut icon
type	image/x-icon	Атрибут должен содержать MIME-тип файла Favicon. Данные значение применяются для иконок формата ICO.
	image/vnd.microsoft.icon
	image/gif	Для фавиконок в формате GIF.
	image/jpeg	Для фавиконок в формате JPEG.
	image/png	Для фавиконок в формате PNG.
	image/bmp	Для фавиконок в формате BMP.
	image/svg	Для фавиконок в формате SVG.
	image/apng	Для Favicon формата APNG.
href	[относительный URL]	Например: /favicon.ico
	[абсолютный URL]	Например: http://site.net/favicon.ico
	[Код base64]	Например: data:image/x-icon;base64,AAABAA…

Примеры подключения

Рассмотрим примеры указания на иконку сайта в HTML-коде.

HTML-тег для favicon.ico

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

<!-- равносильный HTML-код тега link для favicon.ico, размещенного в корне сайта: -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- данным указаниям браузеры следуют по умолчанию даже при их отсутствии в HTML-коде -->

В остальных случаях необходимо включать тег link для Favicon c соответствующими значениями атрибутов.

HTML-тег для Favicon других форматов

Для подключения фавиконки в формате, отличном от ICO, указывайте соответствующий MIME-тип фавиконки в атрибуте type. Например:

<!-- HTML-код для иконки в PNG-формате: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/favicon.png">

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

HTML-тег для Favicon вне корневого каталога

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

<!-- HTML-код для фавиконки, расположенной не в корневой папке: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/template/favicon.png">

Такой код HTML-тега link целесообразно применять на отдельных страницах сайта со своими уникальными (отличными от главной иконки сайта) фавиконками.

Отдельные страницы сайта могут иметь свою фавиконку, доступную по указанным в HTML-коде URL-адресам.

HTML-тег для фавиконок с нестандартным названием

Для подключения иконки сайта, имеющей название, отличное от favicon, не забудьте указать это в атрибуте href. Например:

<!-- HTML-код для иконки с нестандартным названием файла: -->
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/ikonka.ico">

Во избежание возможных проблем с отображением используйте фавиконки с именем favicon.

HTML-тег для фавиконок в base64

Чтобы не подключать файл фавиконки к веб-странице, можно вставить в атрибут href тега link код Base64:

<!-- HTML-код для иконки в base64 -->
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAI1nsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAABERERERAAAAEREREBEAAAARARAAEQAAABEBEAARAAAAEQEQABEAAAARARAAEQAAABEBERERAAAAEQEREREAAAARAREQAAAAABEBERAAAAAAEQEREAAAAAARAREQAAAAABEBERARAAAAEQEREREAAAAREREREQAAABEREEIAAABCAAACTkAADk5AAA5OQAAOTkAADk5AAABCQAAAQkAAA85AAAPOQAADzkAAA85AAAJOQAAAQgAAAEIAAA">

Такой способ HTML-подключения Favicon работает во всех браузерах, кроме Internet Explorer. Чтобы получить код изображения, воспользуйтесь любым декодером Base64.

Фавикон. Как добавить логотип (иконку) сайта на вкладку браузера

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

Не совсем люблю принудительные обновления. По-моему, они не становились лучше и удобнее, зато хлопот доставляли порой немало. На данный момент самым пугающим выскакивает предупреждение на айфоне о доступности обновления. Старательно и аккуратно жму: «напомнить позже». Однажды щелчок был сделан не в том месте и не в то время. И проклятая 10ка начала загружаться на моих глазах. Выключение телефона ни к чему, естественно не привело, и к моему горю, 10-ка нагло установилась. Многие пользователи и не заметили бы обновления ios, как и я раньше. Но тут была другая ситуация — мне не понравились все изменения, вплоть до звука клавиш. Целый вечер убился на поиск, скачивание и установление старой девятки. Некоторые личные файлы были, конечно, утеряны окончательно, как например и старая иконка для этого сайта в формате .png или хотя бы .psd. Создавать новую — очень лень, поэтому воспользуюсь остатками роскоши — изображением в .jpg. А айфон теперь трогаю бережно, зная, что в любой момент может соскочить палец не на тот пункт в предупреждении о готовности обновления к установке.

ФАВИКОН (favicon) — ИКОНКА, ЛОГОТИП, КАРТИНКА САЙТА, ЭМБЛЕМА, то есть небольшое изображение, которое видят пользователи интернета на своих вкладках, окнах, закладках перед названием страницы сайта. 

Рекомендовалось загружать иконки оптимальным размером 16 на 16, 32 на 32, 120 на 120 пикселей в формате .png. Конечно, лучше изготовить картинку большего размера, а затем сжимать ее для дальнейшего использования, как вздумается, или как потребуется. Нужно учитывать, что уже сейчас есть устройства, которые воспроизводят фавикон и в размере 32, 64 (retina-дисплей, safari, новые платформы windows и проч). Различные темы WordPress могут предлагать в настройках темы задать иконку, там же и стоит рекомендованный для нее размер. Если в теме этого нет, то иконку можно вставить через файловый менеджер или через код. 

Код вставки иконки сайта, фавикона выглядит так:

 <head>

   <link rel=»тип ресурса» href=​»адрес изображения» type=»тип передаваемых данных»>

</head>

Где тип ресурса задается атрибутом rel. Допустимо использовать icon и shortcut icon (для браузера IE), тип данных указывается форматом изображения:

image/x-icon — для формата ICO; image/gif — для формата GIF; image/jpeg — для формата JPEG; image/png — для формата PNG; image/bmp — для формата BMP.

   <link rel=»icon» href=​»ваш сайт.com/favicon.gif» type=»image/gif»>

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

В Консоли выбираем Внешний вид, подпункт Редактор. Слева выбираем шаблон заголовка header.php

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

Вставляем код — строка 19 на снимке

<link rel=»shortcut icon» href=»ЗДЕСЬ АДРЕС (URL) картинки, ссылка на изображение» type=»image/jpg«>

Обратите внимание, что формат иконки в type=»image/jpg» нужно изменить на png, если ваше изображение в .png

Внизу сохраняем, обновляем. Готово.

p.s. как только сменили тему WordPress, поскольку прежняя надоела, то иконка исчезла, но в новой теме в настройках было предложено вставить логотип сайта. Поэтому проблем вообще не возникло. Сделав пару букв в png, размером 150*150 пикселей с разрешением 300 в цветовой гамме сайта, мы получаем готовую иконку. 

 

 

иконок браузера — 49901 бесплатные векторные иконки

• Авторы
• Пакеты
• Дополнительные инструменты

  Прочие товары

  Freepik Бесплатные векторы, фото и PSD Онлайн-редактор Freepik Редактируйте свои шаблоны Freepik Slidesgo Бесплатные шаблоны для презентаций Сюжет Бесплатные редактируемые иллюстрации

  Инструменты

  Образец значка Создавайте шаблоны значков для своих обоев или социальных сетей

  Google Workspace

  Иконки для слайдов и документов +2.5 миллионов бесплатных настраиваемых значков для ваших слайдов, документов и таблиц
• английский
  • Español
  • английский
  • Deutsch
  • Português
  • Français
  • 한국어
• Стать автором
• Стоимость
• Бесплатная регистрация
• Войти

Авторизоваться регистр Фильтры

Тип

Икона

Упаковка

---

Лицензия

Все

Свободный

Премиум

---

Кураторское содержание

Иконок браузера

Бесплатные иконки SVG со сверхбыстрым поиском и бесплатной колой.Создан для развлечения с помощью Icons8.

Бесплатные иконки / Браузер Иконки веб-браузера Значки вкладок браузера Иконки Интернет-браузера Значки браузера Safari Значки браузера Chrome Иконки браузера Opera Значки URL-адресов браузера Значки обозревателя файлов Значки окна браузера Иконки мобильного браузера Значки браузера Firefox Иконки сайта браузера Добавить значки браузера Значки обозревателя веб-страниц

• Открыть в браузере
• Значок клиента Mac
• Открыть в браузере
• Открыть в браузере
• Значок клиента Mac
• Открыть в браузере
• Значок клиента Mac
• Значок Safari
• Значок клиента Mac
• Открыть в браузере

Иконки веб-браузера

• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox

Значки вкладок браузера

• Значок закрытия всех вкладок
• Значок закрытия всех вкладок
• Значок закрытия всех вкладок
• Значок закрытия всех вкладок
• Значок закрытия всех вкладок
• Значок вкладки
• Значок вкладки
• Значок вкладки
• Значок эмулятора дельфина
• Значок эмулятора дельфина

Иконки Интернет-браузера

• Значок Интернет-браузера
• Значок Интернет-браузера
• Значок Internet Explorer
• Значок Internet Explorer
• Значок Internet Explorer
• Значок Internet Explorer
• Значок Internet Explorer
• Значок Internet Explorer
• Значок Internet Explorer
• Значок Internet Explorer

Значки браузера Safari

• Значок Safari
• Значок Safari
• Значок Safari
• Значок Safari
• Значок Safari
• Значок Safari
• Значок Safari
• Значок Safari
• Значок Safari
• Значок Safari

Иконки браузера Chrome

• Значок Chrome
• Значок Chrome
• Значок Chrome
• Значок Chrome
• Значок Chrome
• Значок Chrome
• Значок Chrome
• Значок Chrome
• Значок Chrome
• Значок Chrome

Иконки браузера Opera

• Значок Opera
• Значок Opera
• Значок Opera
• Значок Opera
• Значок Opera
• Значок Opera
• Значок Opera
• Значок Opera
• Значок Opera
• Значок Opera

Значки URL-адресов браузера

• Открыть в браузере
• Открыть в браузере
• Открыть в браузере
• Открыть в браузере
• Открыть в браузере
• Открыть в браузере
• Открыть в браузере
• Открыть в браузере
• Открыть в браузере
• Открыть в браузере

Значки обозревателя файлов

• Значок файла
• Значок файла
• Значок файла
• Значок файла
• Значок файла
• Значок файла
• Значок файла
• Значок файла
• Значок файла
• Значок файла

Иконки окна браузера

• Значок свернуть окно
• Значок свернуть окно
• Значок свернуть окно
• Значок свернуть окно
• Значок свернуть окно
• Значок свернуть окно
• Значок свернуть окно
• Значок свертывания окна
• Значок свернуть окно
• Значок свертывания окна

Иконки мобильного браузера

• Значок «Нет мобильных устройств»
• Значок «Нет мобильных устройств»
• Значок «Нет мобильных устройств»
• Значок «Нет мобильных устройств»
• Значок «Нет мобильных устройств»
• Значок «Нет мобильных устройств»
• Значок «Нет мобильных устройств»
• Значок «Нет мобильных устройств»
• Значок «Нет мобильных устройств»
• Значок «Нет мобильных устройств»

Значки браузера Firefox

• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox
• Значок Firefox

Иконки сайта браузера

• Значок Google Сайтов
• Значок Google Сайтов
• Значок Google Сайтов
• Значок Google Сайтов
• Значок Google Сайтов
• Значок Google Сайтов
• Значок Google Сайтов
• Значок Google Сайтов
• Значок окна браузера
• Значок окна браузера

Добавить значки браузера

• Добавить мужской значок пользователя
• Добавить мужской значок пользователя
• Добавить мужской значок пользователя
• Добавить мужской значок пользователя
• Добавить мужской значок пользователя
• Добавить мужской значок пользователя
• Добавить мужской значок пользователя
• Добавить мужской значок пользователя
• Добавить мужской значок пользователя
• Добавить мужской значок пользователя

Значки обозревателя веб-страниц

• Значок Microsoft Word
• Значок Microsoft Word
• Значок Microsoft Word
• Значок Microsoft Word
• Значок Microsoft Word
• Значок Microsoft Word
• Значок Microsoft Word
• Значок Microsoft Word
• Значок Microsoft Word
• Значок Microsoft Word

иконок браузера PNG изображений | 1900+ векторных пакетов значков

значок браузера с иконкой в ​​стиле глифов векторная иллюстрация

4000 * 4000

вектор значок браузера

1007 * 1007

загрузка страницы браузера в плоском стиле векторной иллюстрации

1200 * 1200

векторный значок браузера

1024 * 1024

значок веб-браузера в стиле линии векторные иллюстрации

4000 * 4000

значок вектора браузера

1007 * 1007

значок браузера в неоновом стиле

1007 * 1007

вектор значок блокировки браузера

1024 * 1024

панель поиска в плоском стиле векторной иллюстрации

1200 * 1200

значок браузера

1200 * 1200

вектор значок настроек браузера

1099 * 1099

вектор значок браузера

1024 * 10 24

черный значок браузера с глифом

1024 * 1024

значок настройки векторного браузера

1024 * 1024

значок блокировки векторного браузера

1024 * 1024

значок скорости векторного браузера

1024 * 1024

векторный значок браузера

1024 * 1024

векторный значок браузера

1007 * 1007

векторный значок браузера

1007 * 1007

векторный значок браузера

1024 * 1024

Страница ошибки 404 в значке экрана браузера на компьютере с плоским стилем c

4000 * 4000

Значок браузера вектор

1024 * 1024

Значок браузера

5000 * 5000

браузер дизайн иконок

5120 * 5120

вектор значок браузера

1007 * 1007

9001 1 значок браузера в векторе

800 * 800

значок браузера в векторе

1007 * 1007

дизайн значка браузера

5120 * 5120

значок скорости векторного браузера

1024 * 1024

вектор значок браузера

1024 * 1024

значок настроек браузера

5120 * 5120

значок векторных настроек браузера

1024 * 1024

значок загрузки векторного браузера

1024 * 1024

векторный значок браузера

800 * 800

векторный значок блокировки браузера

1024 * 1024

векторный значок браузера

1007 * 1007

вектор значок браузера

1007 * 1007

значок вектора браузера

1024 * 1024

значок вектора скорости браузера

1024 * 1024

векторный значок браузера

1199 * 1199

красивый значок векторной линии браузера

5120 * 5120

векторный значок браузера

5120 * 5120

векторный значок браузера

1024 * 1024

Значок браузера

• Фильтровать по:
• Категория
  • • Интерфейс 773
    • Мультимедиа 438
    • Интернет 365
    • Социальные сети 90
    • Компьютеры и оборудование 75
    • Настольные приложения 59
    • Смешанный 54
    • UI 47
    • Логотип 38
    • Файлы и папки 37
    • Бизнес 35
    • Компьютер 33
    • технология 25
    • SEO и Интернет 20
    • SEO и Интернет 20
    • Знаки и символы 19
    • Стрелки 16
    • Бизнес и финансы 13
    • Сеть и связь 9
    • Музыка и мультимедиа 8
    • Оптимизировано для iOS7 8
    • Образование 7
    • Мобильные приложения 7
    • Безопасность 7
    • Покупки и электронная коммерция 7
    • форм 7
    • прочие 6
    • Торговля 5
    • Электроника 5
    • Карты и флаги 5
    • Фотография и графический дизайн 4
    • Инструменты редактирования 3
    • Медицинский 3
    • социальные 3
    • Здания 2
    • Бизнес и финансы 2
    • Образование и наука 2
    • Сеть 2
    • Знаков 2
    • контролирует 2
    • Арт 1
    • Торговля и покупки 1
    • Семья и дом 1
    • Игры и азартные игры 1
    • Природа и отдых на природе 1
    • человек 1
    • Недвижимость 1
    • Спорт и награды 1
    • Инструменты и посуда 1

.