Содержание

Как сделать favicon-иконку для сайта

Вы здесь

Главная … Полезно для бизнеса … Как сделать favicon-иконку для сайта

Леонид Родинский

Копирайтер

16 December в 11:52

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

Решения для привлечения клиентов

Вам будет интересно

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

История маленькой эмблемы началась в 1999 году, когда Microsoftвнедрил возможность размещения значка на закладках пятой версии обозревателя InternetExplorer. В дальнейшем поле действия расширилось и фавиконы появились рядом со сниппетами на страницах поисковой выдачи и на вкладках браузеров. Но до некоторого времени они так и не стали обязательным элементом брендирования сайтов, оставаясь на обочине пользовательского интереса. Только с приходом развернувшейся в 10-х годах серьёзной интернет-конкуренции и необходимости привлекать все доступные инструменты узнаваемости, начался новый этап, а веб-ресурсы стали запоминаться не только дизайнерской картинкой, но и уникальными графическими миниатюрами.

Как сделать фавикон

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

  • Во-первых, вездесущие онлайн-платформы.

Разница между ними несущественна. Одни предлагают загрузить нужную картинку с локального компьютера и конвертируют её в формат ico (pr-cy. ru/favicon). Другие усиливают потенциал и оперируют простеньким графическим редактором, где можно нарисовать авторский макет, обработать изображение и опять-таки сохранить с необходимым расширением (favicon.by). Наконец дополнительный выбор размера и собственные библиотеки, откуда желающие берут уже готовые проекты для использования на сайтах. Заметим, что все сервисы абсолютно бесплатны.

  • Во-вторых, специализированные программы.

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

Поддерживаемые расширения

Если первые версии обозревателей искали обязательное favicon. icoи воспроизводили его содержание на положенном месте, то теперь ситуация изменилась. В кодированную начинку веб-ресурса вставляются и gif, иpng. При этом внутри элемента headмогут находиться отдельные указания на файл иконки, и таким образом появляется возможность присвоить индивидуальный значок любойвыбранной странице. Вряд ли это можно назвать разумным применением фавиконов, но в некоторых случаях такой подход обоснован.

Наши работы

Наша команда

  • Вадим Скопинцев

    Генеральный директор

    Сделаем лучшее решение для привлечения клиентов из интернета, сделаем продажи!

  • Дмитрий Карпинский

    Директор по пропаганде

    Экспонента, бизнес должен и будет расти по экспоненте! Продавать, будете продавать!

  • org/Person»>

    Евгений Белоусов

    Директор по продажам

    Предложу варианты решения ваших проблем- вам останется лишь выбрать!

  • Павел Шульга

    Старший специалист по контекстной рекламе

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

  • Евгения Лю-Ти-Фу

    Руководитель PR направления

    Ваш имидж в наших руках. Если вас нет в Интернете, то вас нет в бизнесе!

  • Диана Зайцева

    UX/UI дизайнер

    «Протачиваем» Ваш ресурс для получения им продающих свойств. Захватываем клиентов для Вас!

  • Леонид Белкин

    Менеджер проектов

    Сделаем Ваш сайт продающим. Конверсия будет расти!

  • Дмитрий Трацевский

    Руководитель разработки

    Разработанные нами сайты работают как часы!

  • Татьяна Николаева

    Менеджер проектов, переводчик

    Пишем только уникальные и интересные тексты на русском и английском. Вам понравится!

  • Кирилл Миченус

    Разработчик

    Разработаем классный, продающий сайт. Внедрим интересные идеи!!

  • Марина Петренко

    Контент-менеджер

    Раскрываем все положительные стороны Вашего бизнеса для увеличения целевой аудитории!

  • org/Person»>

    Виктор Токмачев

    Менеджер по работе с иностранными клиентами

    Наши идеи подходят всем — иностранные клиенты охвачены!

  • Татьяна Ромакина

    Копирайтер

    Создадим уникальные продающие статьи. Лучший контент для Вашего сайта!

  • Леонид Родинский

    Копирайтер

    Написать уникальные тексты и заголовки – этого мало. Наполняем сайты неповторимым содержанием!

  • Анастасия Бондарева

    Копирайтер

    Правильно написанный рекламный текст способен творить чудеса! Удивительно, но слова могут продавать

    ! И мы Вам это докажем!

  • Вячеслав Киосе

    Копирайтер

    Текст – это не просто слова. Посетители Вашего сайта получат информацию с внятным и понятным смыслом.

  • Стань одним Из нАс

    Трудоустройство

    Хочу работать!

Клиенты

Наши услуги

САМОЕ ИНТЕРЕСНОЕ НА СТРАНИЦЕ
“ЗЕКСЛЕР” В Facebook и ВКОНТАКТЕ

О favicon и не только

Форматы 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 браузерами можно здесь.

Favicon – устройства, ОС, технологии

С приходом HTML 5 появилась возможность указывать размеры favicon. Теперь различные мобильные устройства или браузеры могут выбрать необходимый размер значка и использовать его, например, как изображение для ярлыка на рабочем столе. За указание размеров отвечает атрибут size.

Делается это так:

<link href="/favicon-32x32.png" rel="icon" type="image/png" />
<link href="/favicon-16x16.png" rel="icon" type="image/png" />

Для favicon.svg можно сделать так:

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

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

Windows

Начиная с версии Windows 8.1, появилась возможность закреплять сайты с помощью т. н. живых плиток. Для изображений на плитках малого размера будет использоваться favicon. Для средних и больших плиток лучше задать изображения подходящих размеров. Сделать это можно двумя способами: разместить в заголовке сайта специальные метатеги или создать файл конфигурации браузера. Второй способ более предпочтителен т. к. размещение лишних тегов метаданных увеличивает заголовок страницы, что не лучшим образом сказывается на скорости загрузки. И так, создаётся файл 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>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Он описывает четыре изображения для различных размеров живых плиток: три квадратные и одно прямоугольное. В теге TileColor указывается фоновый цвет плитки. Сами изображения следует брать большего размера, примерно в 1,8-2 раза. Например, для плитки 70×70 лучше взять изображение размером 128×128. Делается это с целью поддержки экранов с высокой плотностью пикселов. Подключение файла конфигурации браузера на сайте производится с помощью следующего кода: 

<meta name="msapplication-config" content="browserconfig. xml" />

Mac OS и Safari

Версии Safari под Mac OS поддерживают формат SVG. Такое изображение нужно для закладок в этом браузере. Но есть один момент – элементы изображения должны быть или чёрными или белыми. В коде подключения используется атрибут color. Так вот, после подключения все элементы чёрного цвета будут отображаться тем цветом, который указан в этом атрибуте. Подключение для Safari в Mac OS производится с помощью следующего кода:

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

Обратите внимание на то, что имя файла и значение rel должны быть такими, как в примере.

Apple (iOS)

Safari в устройствах Apple, на базе операционной системы iOS тоже использует иконку сайта для закладок. Но favicon может использоваться и как значок на рабочем столе. Для того, чтобы на устройствах Apple значок сайта смотрелся прилично, понадобятся изображения в формате PNG и несколько строк кода. Устройств на базе iOS довольно много и они имеют различные размеры экранов. Для каждого размера нужен свой значок. Размеры этих значков следующие: 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152, и 180×180. В некоторых источниках рекомендуется писать код для каждого размера favicon. Объясняется это тем, что иконки для устройств от Apple, в виду их большой популярности, используются (ищутся) устройствами других производителей. Вот так подключается изображение для одного из размеров:

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

Можно обойтись без девяти строк кода и ограничиться тремя, хотя файлы всех девяти размеров лучше загрузить на сайт. Используется одна хитрость: если иконка не соответствует рекомендуемому размеру устройства, то используется иконка большего размера. Подключаем изображение размером 180×180 следующим образом:

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

Затем добавим строку кода из предыдущего примера:

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

Т. е. по крайней мере, основная иконка должна быть 180×180. Остальные устройства могут уменьшить изображение. Есть ещё одна тонкость, иконки в iOS оформляются в определённом стиле, т. е. используются скругленные уголки, тень, блики. Когда загружается значок сайта, устройство начинает приводить его к этому стилю. Если это не нужно, то добавляем следующий код:

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

А ещё можно указать заголовок:

<meta name="apple-mobile-web-app-title" content="Aitishnik.RU" />

Android

К сожалению, изображения в формате SVG пока не поддерживаются ОС Android. Поэтому используются изображения в формате PNG. Для настроек используется файл manifest.json. Он может быть следующего содержания:

{
    "name": "Aitishnik.RU",
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-256x256.
 
 png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "start_url": "http://www.aitishnik.ru",
    "display": "standalone"
}

Файл – манифест описывает настройки отображения сайта на домашнем экране, как веб-приложения. В примере:

name – подпись к приложению. Если ключ name не указан, то для подписи будет использоваться содержимое тега title из заголовка сайта. Если значение name длинное, то можно добавить ключ short_name для короткой подписи.

icons – этот ключ определяет набор иконок. Внутри него ключи src, sizes и type определяют источник изображения, размер и тип изображения соответственно.

theme_color – передаёт цветовое значение строки состояния.

background_color – фоновый цвет для иконки на домашнем экране.

display – режим отображения веб-приложения.

Файл manifest.json подключается в заголовке сайта следующим кодом:

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

Заключение

У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.

Вот и всё. Удачи в сайтостроении!

Помните, что у нас вы можете не только купить готовый сайт или заказать его разработку, но и подобрать подходящий тариф поддержки сайта, заказать продвижение сайта в поисковых системах, а так же зарегистрировать домен в одной из двухсот доменных зон и выбрать недорогой тариф хостинга! Айтишник РУ

Задать вопрос

Об авторе:

Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.

 

Ещё о сайтостроении

    • Что входит в техподдержку сайта на Joomla?…

      Очень часто посетители нашего сайта интересуются вопросами техподдержки. Многих интересуют вопросы: что такое техническая поддержка, что входит в техподдержку сайта на Joomla. В этом материале мы приводим список работ, которые входят в…

    • CodeLobster IDE – бесплатный PHP, HTML, CSS, JavaScript редактор…

      В этой статье мы рассмотрим бесплатный кросс-платформенный редактор для веб-разработки — CodeLobster IDE. Он уже долгое время присутствует на рынке и завоевал очень большое количество пользователей. CodeLobster IDE предназначен для…

    • Landing page: сам себе режиссер

      Уже невозможно представить жизнь без интернета, он коснулся всех сфер нашей жизнедеятельности, бизнес тому не исключение. И для увеличения своей прибыли в условиях жесткой конкуренции у вас должна быть эффективно работающая landing page….

    • Принцип работы интернет-магазина

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

    • Что лучше хостинг или VPS

      Сказать, то VPS лучше виртуального хостинга (или наоборот) некорректно, поскольку они предназначены для разных аудиторий. ВПС актуален в том случае, когда виртуальный хостинг не в силах поддерживать web-проект, или же пользователю нужно…

    • Основы юзабилити

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

Как создать пользовательский фавикон Squarespace (значок браузера)

Наконечники Squarespace

Автор: Taylor Nguyen

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

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

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

Следуйте инструкциям, описанным в этом посте, чтобы создать и добавить собственный значок значка для вашего веб-сайта Squarespace. Давайте заменим грустный серый куб чем-то уникальным для вашего бренда, не так ли?

СОДЕРЖАНИЕ

  • Создание фавикона + рекомендации

  • Добавление фавикона в Squarespace

  • Устранение неполадок, из-за которых фавикон не отображается

Шаг 1.

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

Прежде чем мы приступим к созданию фавиконки, важно ознакомиться с передовыми методами.

Хотя оптимальные размеры фавикона составляют 16 x 16 пикселей, Squarespace рекомендует использовать размер изображения от 100 x 100 до 300 x 300 пикселей. Кроме того, файл favicon должен иметь формат .ico или .png, а его размер не может превышать 100 КБ.

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

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

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

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

  • Перейдите на favicon.io/favicon-generator

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

  • Просмотрите предварительный просмотр и, когда вы будете довольны дизайном, нажмите «Загрузить».

  • В загруженной папке найдите файл размером больше 100×100 и меньше 300×300. Это будет использоваться для вашего фавикона Squarespace.

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

Шаг 2. Добавьте свой пользовательский значок в Squarespace

Войдите в свою учетную запись Squarespace и выполните следующие действия, чтобы изменить значок сайта:

  • В главном меню нажмите Дизайн , затем нажмите Значок браузера

  • Нажмите кнопку загрузки, чтобы выбрать файл с вашего компьютера

  • Нажмите Сохранить.

Если у вас более старый веб-сайт Squarespace (версия 7.0), шаги немного отличаются. В меню Design выберите Logo & TItle . Затем прокрутите вниз до Значок браузера (Favicon), загрузите изображение и нажмите Сохранить .

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

Устранение неполадок Значок значка Squarespace не отображается

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

  • Размеры между 100PX x 100px и 300px x 300px

  • Тип файла либо, либо .co или .png

  • Размер файла не превышает 100 KB

, если все исправлен, TREERING. кеш.

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

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

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

Это все, что вам нужно знать, чтобы добавить значок браузера Squarespace. Сделайте свой веб-сайт уникальным с помощью уникального фавикона!

Связанные посты

  • Squarespace Google Analytics: Как исключить свои собственные посещения

  • Как добавить таблицы в Squarespace

  • Как использовать Squarespaes

    Как добавить PDF (или любые файлы) в Squarespace

  • 5 простых советов, как сделать ваш сайт, сделанный своими руками, профессиональным

  • 10 умных идей для мгновенного улучшения вашего сайта

Тейлор Нгуен

Что такое фавикон, почему он важен и как его добавить?

26 сен

26 сен

Содержание

  • Определение
  • Где можно увидеть фавиконку?
    • Раскрывающееся меню закладок
    • Вкладки браузера
    • Приложения панели инструментов
    • Раскрывающееся меню истории
    • История браузера
    • Панель поиска
    • Рекомендации панели поиска
  • Почему фавиконки важны?
  • Важны ли фавиконы для SEO?
    • Удобные для пользователя веб-сайты способствуют более широкому использованию
    • Закладки
    • Брендинг и узнаваемость
  • Как создать хороший фавикон
    • Используйте пространство с умом
    • Простота
    • Фирменный стиль
    • Сокращение
    • Согласование цветов
  • Какие размеры нужны для фавиконки в каждом браузере?
  • Какие форматы использовать для фавиконки?
  • Как добавить фавикон на ваш сайт WordPress
  • Как добавить фавиконку на ваш сайт Wix
  • Как добавить фавиконку на ваш сайт Shopify

 

Определение

Фавикон — это небольшой значок размером 16 × 16 пикселей, который служит фирменным знаком вашего веб-сайта. Его основная цель — помочь посетителям легче найти вашу страницу, когда у них открыто несколько вкладок.

 

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

 

Где можно увидеть фавикон?

 

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

 

  • Раскрывающееся меню закладок

 

  • Вкладки браузера

 

  • Приложения панели инструментов

 

  • Раскрывающееся меню История

 

  • История браузера

 

  • Строка поиска

 

  • Рекомендации панели поиска


 

Почему фавиконки важны?

 

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

 

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

 

Важны ли фавиконы для SEO?

 

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

Удобные веб-сайты увеличивают посещаемость

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

 

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

Закладки

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

 

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

Брендинг и видимость

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

 

Как создать хороший фавикон

 

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

Используйте пространство с умом

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

Простота

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

Фирменный стиль

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

 

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

 

                           .

Сокращение

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

Цветовое согласование

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

 

Какие размеры нужны для фавиконки в каждом браузере?

 

Как указано выше, 16px обычно рекомендуется, поскольку его можно использовать во всех браузерах, но если вы хотите создать значок для каждого возможного использования, следуйте приведенному ниже руководству:

 

  • 16px: Для общего использования во всех браузерах, может отображаться в адресной строке, на вкладках или в закладках
  • 24px: Закрепленный сайт в Internet Explorer 9
  • 32px : Новая вкладка в Internet Explorer, кнопка панели задач в Windows 7+ и боковая панель Safari «Читать позже»
  • 57px: Стандартный домашний экран iOS (iPod Touch, iPhone первого поколения для 3G)
  • 72px: Значок главного экрана iPad
  • 96px: Фавикон, используемый платформой Google TV
  • 114px: Значок главного экрана iPhone 4+ (вдвое больше стандартного размера для дисплея Retina)
  • 128px: Интернет-магазин Chrome
  • 195px: Opera Speed ​​Dial

 

Какие форматы использовать для фавиконки?

 

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

 

  • Windows ICO: ICO, безусловно, является наиболее широко поддерживаемым файлом. Преимущество ICO заключается в том, что он может содержать несколько разрешений и битовых глубин, что очень хорошо работает и особенно полезно для Windows. ICO также предлагает 32-пиксельную иконку, удобную для панели задач Internet Explorer Windows 7. Кроме того, это единственный формат, в котором не используется элемент.
  • PNG: Формат PNG полезен по нескольким причинам. Вам не нужны никакие специальные инструменты для создания файла PNG, что делает его очень удобным для пользователя. Это дает нам наименьший возможный размер файла и поддерживает альфа-прозрачность. Однако один большой недостаток этого стиля заключается в том, что Internet Explorer не поддерживает файл PNG; он поддерживает только файлы ICO.
  • SVG: Этот формат может использоваться и поддерживается браузерами Opera.
  • GIF: Этот формат не дает никаких преимуществ, кроме использования в старых браузерах. Хотя они будут привлекать больше внимания пользователей, они также имеют тенденцию раздражать, и по общему мнению, они никоим образом не являются преимуществом.
  • JPG: Хотя этот формат можно использовать, он не является распространенным и не обеспечивает такое же высокое качество разрешения, как PNG. Кроме того, из-за небольшого размера значка JPEG теряет все свои преимущества.
  • APNG: Это анимированная версия PNG, и, хотя она может поддерживаться Firefox и Opera, она имеет те же проблемы, что и анимированный GIF, отвлекая пользователей при взгляде на их интерфейс.

 

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

 

Чтобы добавить фавиконку на сайт WordPress, перейдите на Внешний вид > Настроить :

Далее в меню расположен на левой боковой панели; найдите и нажмите на Идентификатор сайта :

 

В разделе Значок сайта вы можете выбрать свое изображение и добавить фавикон, который вы хотите отображать:

 

Если ваша тема не позволяет вам загружать свой значок в настройках темы, вы можете использовать настоящий генератор значков и загрузить их в плагин «Вставить верхний и нижний колонтитулы».