Как сделать и установить иконку сайта?

Что такое фавикон и почему он важен для СЕО

Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

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

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

Подведем небольшие итоги:

• Favicon влияет на поведенческие факторы и кликабельность в выдаче.
• Поисковые роботы также могут учитывать наличие или отсутствие фавикона.
• Такой технический недочет может привести к падению трафика.

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

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

Где скачать готовый вариант

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

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

Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.

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

Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.

Method 2 (Discouraged): Putting the favicon at a predefined URI

A second method for specifying a favicon relies on using a
predefined URI to identify the image: «/favicon», which is relative to
the server root. This method works because some browsers have been
programmed to look for favicons using that URI. This approach is
inconsistent with some principles of Web architecture and is being
discussed by W3C’s Technical Architecture Group
(TAG) as their issue .
To summarize the issue: The Web architecture authorizes site managers
to manage their URI space (for a given domain name) as they see
fit. Conventions that do not represent community agreement and that
reduce the options available to a site manager do not scale and may
lead to conflict (since there is no well-known list of these
predefined URIs). One practical consideration illustrates the problem:
many users have Web sites even though they do not have their own
domain name. These users cannot specify favicons using the second
method if they cannot write to the server root. However, they can use
method one to specify a favicon since it is more flexible and does not
constrain the site manager to use a single favicon at a single place
on the site.

There are a few other well-known encroachments on URI space,
including the «robots.txt» file and the location of a P3P privacy
policy. The Technical Architecture Group is exploring alternatives
that do not impinge on URI space without license.

Фавикон: что следует запомнить

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

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

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

Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!

Генератор favicon

Большую часть можно сделать при помощи всего одного онлайн-генератора иконок — https://realfavicongenerator.net

После, вы сможете посмотреть, как будет выглядеть ваш favicon в iOS, Android и плиточном Windows 8, а заодно изменить настройки для каждого случая: задать индивидуальное изображение, изменить цвет фона, масштабировать иконку.

В опциях оставьте всё, как есть: по умолчанию генератор создаст картинки, которые нужно будет поместить именно в корень сайта (обычно на хостингах корнем сайта называются директории /home/, /www/, /public_html/).

Во вкладке «Compression» можно уменьшить вес иконок (сжатие происходит в районе 20-80%, в зависимости от качества).

Нажимаем Generate и получаем на выходе архив, содержимое которого загружаем в уже названное выше место, и код, который вставляем в <head></head> сайта.

После добавления их на сайт, можно проверить работоспособность тем же сервисом.

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

WordPress и Facebook (использование превью к записям)

Если используете плагин WordPressSEObyYoast, то достаточно зайти в раздел «Социальные сети» → «Facebook» и активировать пункт «Добавить Open Graph».

Во всех остальных случаях делаем следующее:

1. Открываем файл header.php вашей темы.
2. Самый первый тег <html> меняем на <html xmlns:og=»https://ogp.me/ns#»>
3. В секции head вставляем код:

В functions.phpдобавьте функцию:

Общее изображение для всех материалов

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

Чтобы социалки «подцепили» картинку, добавьте в head-секцию следующий код:

Принимаются форматы .jpg и .png.

Заключение

Нужен ли вам только стандартный favicon или же вы намерены использовать его преимущества по максимуму, если у вас уже есть готовый логотип, то его превращение в пиктограмму для сайта – дело пары минут. За это спасибо онлайн-генераторам. В итоге, добавление нескольких строчек кода, и заливка пары файлов – вот и всё, что потребуется.

Favicon для Android

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

• 36×36 – для экранов с коэффициентом плотности 0.75
• 48×48 – для экранов с коэффициентом плотности 1
• 72×72 – для экранов с коэффициентом плотности 1.5
• 96×96 – для экранов с коэффициентом плотности 2
• 144×144 – для экранов с коэффициентом плотности 3
• 192×192 – для экранов с коэффициентом плотности 4

Андроид воспринимает иконки в формате .png, а так же опирается на файл manifest.json который может содержать в себе ряд различных косметических параметров. В случае отсутствия возможных вариантов иконки под андроид, система опирается на иконки apple-touch-icon.

Font Awesome 5

Font Awesome 5 IntroIcons AccessibilityIcons AlertIcons AnimalsIcons ArrowsIcons Audio & VideoIcons AutomotiveIcons AutumnIcons BeverageIcons BrandsIcons BuildingsIcons BusinessIcons CampingIcons CharityIcons ChatIcons ChessIcons ChildhoodIcons ClothingIcons CodeIcons CommunicationIcons ComputersIcons ConstructionIcons CurrencyIcons Date & TimeIcons DesignIcons EditorsIcons EducationIcons EmojiIcons EnergyIcons FilesIcons FinanceIcons FitnessIcons FoodIcons Fruits & VegetablesIcons GamesIcons GendersIcons HalloweenIcons HandsIcons HealthIcons HolidayIcons HotelIcons HouseholdIcons ImagesIcons InterfacesIcons LogisticsIcons MapsIcons MaritimeIcons MarketingIcons MathematicsIcons MedicalIcons MovingIcons MusicIcons ObjectsIcons Payment & ShoppingIcons PharmacyIcons PoliticalIcons ReligionIcons ScienceIcons Science FictionIcons SecurityIcons ShapesIcons ShoppingIcons SocialIcons SpinnersIcons SportsIcons SpringIcons StatusIcons SummerIcons Tabletop GamingIcons ToggleIcons TravelIcons Users & PeopleIcons VehiclesIcons WeatherIcons WinterIcons Writing

Какого формата должны быть фавиконы

Раньше браузеры воспринимали фавиконы только в формате «ico». Сейчас они научились понимать и другие форматы, в том числе и «png». В нашем случае, мы убьем 2-х зайцев одним выстрелом. Вначале мы создадим фавикон в формате «png», а затем сконвертируем его в «ico».

Несколько способов создания фавиконов

На сегодня существует два основных способа создания фавиконов:

1. Через специальные онлайн сервисы
2. Создание самостоятельно через специальные программы типа Photoshop и Adobe Illustrator

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

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

Незаметный элемент, который откладывается в подсознании каждого

Фавикон – это маленькая картинка. В Яндексе она появляется рядом с названием портала уже в поиске, а также обязательно отображается в браузере, стоит вам открыть ресурс.

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

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

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

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

Расскажу историю о том, как иконка для сайта сыграла со мной злую шутку. Мне было нужно скачать какую-то книгу. Увидел я знакомый фавикон, дизайн тоже я видел не в первый раз. Отлично, я тут уже был! Нажал на скачивание практически не задумываясь. Не успел сохранить, как антивирусник заверещал диким криком, а комп было уже не спасти, пришлось переустанавливать систему. Только в этот момент я вспомнил откуда я знаю этот сайт и хорошо его помню. Точно такая же ситуация случилась около года назад, на этом же ресурсе.

Форматы favicon

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

Favicon.ico

Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь. Подключение favicon.ico на сайте производится с помощью следующего кода:

<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

В параметре href указывается путь до иконки сайта. В этом примере и далее в этой статье предполагается, что файл favicon размещён в корне сайта. Если файл иконки размещается не в корне сайта, то тогда нужно указать соответствующий путь.

Favicon.png

Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:

<link href="/favicon.png" rel="icon" type="image/png" />

Favicon.svg

Формат SVG — новый открытый формат векторной графики. В силу того, что изображения в SVG масштабируются без потери качества, он идеально подходит для favicon. Этот формат является рекомендацией консорциума W3C, его поддерживают ещё не все браузеры, но за ним будущее. Подключение favicon.svg на сайте производится с помощью следующего кода:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

Отслеживать поддержку SVG браузерами можно здесь.

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

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

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

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

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

Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый 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" />  

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

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

Что такое favicon

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

Там, где размещается адресная строка браузера с адресом сайта, эта картинка, иначе favicon, также отображается.

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

Сайты, которые такие значки не имеют, отображаются белым безликим листочком бумаги

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

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

Launcher Icon Generator

Проект Launcher Icon Generator бесплатный и, как мы думаем, больше подходит для продвинутых пользователей. Данный онлайн редактор иконок позволяет загружать изображения / клипарты и добавлять текст. Вы можете скачать по одной иконке за раз в 5 размерах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).

В качестве базового клипарта используется набор графики в стиле Material Design из GitHub. Сервис содержит такие настройки как: отступы, форма, цвет или прозрачность фона, масштабирование + дополнительные эффекты. Результат:

Android Material Icon Generator — еще один инструмент создания флэт-иконок. Фишкой сервиса определенно является эффект в виде длинной тени. Если вам нужны подобные решения — этот редактор иконок будет идеальным вариантом.

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

После скачивания в файле-архиве найдете 6 PNG разного размера и векторный файл SVG. В Illustrator иконка SVG будет размытой, но, к счастью, она хорошо смотрится в браузере. В итоге получается что-то вроде:

Сайт Simunity – это генератор на базе HTML5, где можно создать иконку и затем скопировать код, чтобы отобразить ее в ваших веб-проектах. В качестве исходных материалов используются иконки из Font Awesome, для которых выбираются разные параметры: цвет, рамка, размер и стиль теней.

Данный сервис пригодится, если вам необходимо быстро создать простые оригинальные иконки для сайта. Результат применения Simunity:

Итого. Рассмотренные выше онлайн редакторы иконок – отличные инструменты для оптимизации работы дизайнеров. Нет смысла скачивать какие-то программы, когда все можно легко и быстро делать в сети. Из этой подборки, пожалуй, можно выделить IconsFlow. В нем собрано максимально большое число функций: галерея иконок, загрузка SVG, код для встраивания, предварительный просмотр, создание собственных шаблонов, экспорт PNG, ICO и SVG, адаптация размера, модные стили и встроенный векторный редактор

К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно

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

Сделать иконку (значок) папки из своей фотографии можно в стандартной программе — Paint

, которая у каждого должна быть в операционной системе windows 7

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

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

Найти программу «Paint

можно через «Пуск » и «Все программы » Запустите её и перетащите рисунок в окно программы. А ещё проще, это вызвать контекстное меню, щёлкнув по изображению, которое хотите поставить в роли значка, правой клавишей мышки. Выбираем пункт «Изменить » Откроется программа «Paint »

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

Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.

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

Подготовка изображения для favicon

Рассмотрим основные действия по подготовке изображения в формате svg для favicon.

Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).

Например, рассмотрим, как с помощью программы Inkscape можно подготовить изображение (иконку двери) в формате svg для фавикон.

1. Используя сервис «Google Картинки» находим подходящие изображение двери и сохраняем его на компьютер.
2. Открываем программу Inkscape и создаём в ней новый файл.
3. Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
4. Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр).
5. Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру.
6. Сохраняем файл (например, под именем ).

Примеры, подготовленных изображений (красная стрелка, лампочка, бабочка, часы, сердце и книга) для фавикон (для скачивания — в контекстном меню картинки выбрать пункт «Сохранить картинку как…»):

Генерация иконки favicon для всех платформ

Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.

Для этого необходимо нажать на кнопку «Select your Favicon picture» и выбрать в диалоговом окне подготовленное изображение (door.svg).

После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).

После этого выбираем опцию «I will place …», которая говорит о том, что полученные файлы фавикон необходимо положить в корень сайта. Это действие обеспечит её поддержку в большинстве браузеров.

Далее нажимаем на кнопку «Generate your Favicons and HTML code».

После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.

Установка фавиконки на сайт

После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице «Install your favicon».

Основные шаги:

1. Скачивание сгенерированного пакета (favicons.zip).
2. Распаковка его в корень сайта
3. Вставка HTML-кода представленного на странице в секцию head ваших страниц:

   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
   <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
   <link rel="manifest" href="/manifest.json">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
   <meta name="theme-color" content="#ffffff">

Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.

Каких размеров бывают значки сайтов

Как Вы знаете, сейчас существует огромное множество браузеров, мониторов и устройств. И их требования к размерам фавиконов отличаются. Существуют следующие варианты размеров, которые следует учесть:

• 16*16px — стандартные размеры фавиконов, подходящие для большинства браузеров и устройств
• 32*32px — используются в некоторых случаях в Internet Explorer и Safari
• 57*57px — используются при отображении на iPhone
• 72*72px — используются при отображении на iPad
• 114*114px — используются при отображении на ретина дисплеях (57*2=114)
• 144*144px — используются при отображении на ретина дисплеях iPad (72*2=144)

Google Icons

To use the Google icons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

<!DOCTYPE html><html><head>
<link rel=»stylesheet» href=»https://fonts.googleapis.com/icon?family=Material+Icons»></head><body><i class=»material-icons»>cloud</i><i class=»material-icons»>favorite</i><i class=»material-icons»>attachment</i><i class=»material-icons»>computer</i><i class=»material-icons»>traffic</i></body></html>

For a complete list of ALL icons (font awesome, bootstrap and google), visit the
Icon Reference.

❮ Previous
Next ❯

Creating

To create favicon you can use almost any graphic editor, but the format of the image you choose should be 16×16, 32×32 or 64×64 pixel, using 8-bit or 24-bit color. The image must have a PNG extension (W3C standard), GIF or ICO.

When creating an image, pay attention to the following nuances:

• Favicon should be made in the same style as the site, as it is a kind of business card of your project.
• The image you want to use as a favicon should be very easy to understand, and you should use just a few elements.
• Watch for what would favicon, the most transferred the essence of your site, business, project.
• Create a picture better so that it would cause the visitors of your site association. For example, phone icon, for mobile phone salon.

Где отображается фавикон и при чем тут SEO

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

Пока в браузере открыто мало вкладок, фавикон — просто составляющая брендирования. Но когда пользователь работает с большим количеством загруженных сайтов, мини-логотип превращается в функциональный UX-элемент. Он становится удобным идентификатором, который помогает распознать сайт и при необходимости вернуться на него для продолжения сессии. Таким образом, в этом случае уже можно говорить о прямой связи с поведенческими.

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

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

В папках с закладками

В истории браузера

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

Также фавиконы служат идентификатором для сайтов, сохраненных на главном экране мобильного поиска (слева). А если пользователь сохранит страницу на своем мобильном устройстве, фавикон будет отображаться как иконка приложения (справа).

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

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

Результаты в мобильном поиске Google и Яндекса

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

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

Сейчас нужно установить favicon на сайт. Открываем файловый менеджер, выбираем папку с темами и вставляем туда нашу картинку, лучше в действующую тему.

Но favicon в адресной строке сайта может пока не появиться. Чтобы картинка подгружалась, нужно внести изменения в заголовок сайта – в файл header.php. То есть нужно дать команду, чтобы сайт подгружал favicon.

Для этого входим в консоль – Внешний вид – Редактор. Выбираем header.php и перед закрывающим тегом </head> вставляем код следующего содержания:

<link rel=”shortcut icon” type=”image/png” href=”адрес вашего сайта/wp-content/themes/название картинки.png”/>

Жмем Обновить файл, обновляем также сайт и можно наблюдать, что favicon подгружается. Таким образом, favicon на сайт удалось установить и он работает.

Поисковики со временем, в свою очередь, проиндексируют ваш сайт и в дальнейшем, в поиске будут отображать его уже с favicon.