Как создать фавикон: самый подробный гайд — Сервисы на vc.ru

29.05.2023 Facebook Twitter LinkedIn Google+ Разное

Содержание

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

32290 2

How-to – Читать 9 минут

Прочитать позже

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ИСПРАВЛЕНИЕ

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

Содержание

  1. Что такое favicon для сайта
  2. Зачем нужен favicon
    — Технические требования к фавиконам
  3. Как создать favicon онлайн
  4. Как добавить фавикон на сайт
  5. Распространенные ошибки
  6. FAQ

Заключение

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

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

Пример фавикона на сайте

А также в истории просмотров:

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

В некоторых версиях браузера фавикон также появляется в адресной строке перед URL сайта. В выдаче Яндекса также отображаются фавиконы:

Фавиконы сайтов в Яндексе

Кроме логотипа, в фавикон для сайта иногда вставляют значок, символизирующий тематику ресурса, связанный с названием сайта, первую букву названия компании и т.п. Размер фавикона обычно составляет 32х32 или 16х16 пикселей.

Зачем нужен favicon

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

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

Пример сайта без фавикона

Следует установить фавикон и по другим причинам, обеспечивающим ряд других преимуществ:

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

Узнаваемость. Favicon — это удобный поиск. Когда пользователь ищет нужную ему вкладку в браузере, страницу из закладок браузера или истории, первое, что бросается в глаза, — это иконка. Никто не обращает внимания на текст. Представим, что вы что-то ищите, когда в браузере открыто 20 вкладок: кроме иконки не будет видно практически ничего.

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

Продвижение. Это преимущество применимо только к поисковику Яндекс. Страница без фавикона в поисковой выдаче просто сливается с белым фоном и никак не выделяется среди остальных. В топе выдачи редко можно встретить страницу без иконки.

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

Проверка фавикона в аудите Serpstat

Хотите узнать, как найти и обезвредить ошибки на сайте с помощью Serpstat?

Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! 😉

Оставить заявку!

Технические требования к фавиконам

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

Формат фавикона различается в зависимости от того, для чего он предназначен:

  • для устаревших браузеров: favicon.ico такого размера:16х16, 32×32;
  • для современных браузеров: один фавикон SVG формата для светлой и темной версии. Большинство браузеров поддерживают SVG формат, который более эффективен для больших изображений;
  • для устройств Apple: фавикон размера 180×180 в формате PNG;
  • для устройств Android: фавикон 192×192 в формате PNG, используемый на главной странице сайта и 512×512 — для загрузки прогрессивных WEB-приложений.

Узнать, какие именно браузеры поддерживают современные форматы фавиконов можно с помощью сервиса Caniuse:

Сервис Can I Use для проверки поддержки различных фавиконов браузерами

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

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

Все подобные сервисы предельно просты в использовании. Мы собрали несколько инструментов, с помощью которых вы быстро и бесплатно сделаете фавикон.

Pr-Cy.ru

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

Be1.ru

Есть возможность задать разрешение картинки (16х16 или 32х32 пикселя). Просто выберите картинку и нажмите «Конвертировать».

Favicon.by

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

Logaster.ru

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

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

Генератор фавикона Pr-Cy.ru

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

Чтобы картинка была видна на вкладке, ее нужно добавить с помощью файлового менеджера в корневой каталог сайта. Браузер сам найдет фавикон и выведет иконку на сайт. Для этого картинку нужно загрузить в формате 16х16. С автоматическим выводом формата 32х32 могут возникнуть трудности.

Однако для надежности при любом разрешении картинки рекомендуется вручную прописать вывод фавикона в HTML-коде страницы. Для этого:

Добавьте файл favicon.ico в корневую папку — каталог сайта.

Пропишите в коде HTML favicon в формате ico. Он выводится строкой shortcut icon:

<link href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

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

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />

Здесь значение v = 2 обозначает версию иконки. Увеличивайте его на единицу каждый раз, когда меняете картинку (v = 3, v = 4 и т.д.). Тогда браузер будет сразу отображать последнюю версию. После того, как вы определились с окончательным вариантом иконки, этот параметр можно смело удалять из кода.

Распространенные ошибки

Проверить, корректно ли работает фавикон в разных браузерах, можно используя онлайн-проверку для Яндекса и Google, доступную по указанным ниже ссылкам. Предварительно поменяйте «site. com» на название своего ресурса:

  • Яндекс – https://favicon.yandex.net/favicon/site.com;
  • Google – https://www.google.com/s2/favicons?domain=site.com

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

    1. Отсутствует изображение фавикона в правильном формате в корневой папке сайта.
    2. Неправильно прописан код фавикона на страницах ресурса.
    3. Фавикон размыт или неуникален.
    4. Файл с иконкой закрыт для сканирования поисковиками.
    5. Сайт находится ниже 15 позиции в Яндекске — в этом случае фавикон не отображается.
    6. Фавикон был загружен недавно — иногда на его отображение в выдаче может потребоваться несколько недель.

    В каком формате сохранять favicon?

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

    Какого размера делать фавикон?

    Стандартный размер фавикона 16×16 и 32×32. Для современных браузеров и мобильных устройств используются более крупные изображения:180×180, 192×192, 512X512.

    Заключение

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

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

    «Список задач» — готовый to-do лист, который поможет вести учет
    о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.

    Начать работу со «Списком задач»

    Serpstat — набор инструментов для поискового маркетинга!

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

    Набор инструментов для экономии времени на выполнение SEO-задач.

    7 дней бесплатно

    Оцените статью по 5-бальной шкале

    4.78 из 5 на основе 16 оценок

    Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

    Рекомендуемые статьи

    How-to

    Анастасия Сотула

    Что нужно знать об оптимизации сайта под голосовой поиск

    How-to

    Анастасия Сотула

    Как обновить версию протокола TLS на сайте

    How-to

    Анастасия Сотула

    Что такое крауд-ссылки и крауд-маркетинг

    Кейсы, лайфхаки, исследования и полезные статьи

    Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

    Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

    Поделитесь статьей с вашими друзьями

    Вы уверены?

    Спасибо, мы сохранили ваши новые настройки рассылок.

    Сообщить об ошибке

    Отменить

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

    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. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.

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

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

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

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

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

    Так что же такое , , фавикон, и зачем он нужен вашему бизнесу? Более того, как вы можете его создать и где?

    Давайте узнаем.

    Что на этой странице

    • 1 Что такое фавикон? Перейти к разделу
    • 2 Почему фавикон важен для моего онлайн-бизнеса? Перейти к разделу
    • 3 Как создать значок Favicon Перейти к разделу
    • 4 Онлайн-генератор Favicon: лучшие 5 Перейти к разделу

    1

    Следующий шаг

    Что такое Favicon?

      Фавикон (также известный как значок ярлыка, значок вкладки, значок веб-сайта, значок URL-адреса или значок закладки) — это небольшое изображение, обычно размером 16 x 16 пикселей, представляющее веб-сайт в браузере. Это может быть на вкладке, в списке закладок, в результатах интернет-истории или в строке поиска.

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

      Для быстрой демонстрации взгляните на верхнюю часть экрана и на открытые в данный момент вкладки. Какие образы вы там видите?


      Вот мой. В крайнем левом углу сразу узнаваемый логотип Gmail, затем синяя страница Документов Google. Далее вы видите наш логотип WBE (тада!), а также голову льва Премьер-лиги (потому что мне нужно следить за футбольными счетами, пока я пишу!).

      Фавиконы также полезны при пролистывании панели закладок:


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

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

      2

      Следующий шаг

      Почему фавикон важен для моего онлайн-бизнеса?

        Фавиконы — это не просто «хорошо иметь», их следует учитывать только тогда, когда остальная часть вашего веб-сайта запущена и работает. Нет, они обязательны для  – .

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

        Хорошая иконка:

        • Повышает узнаваемость вашего бренда и повышает уровень узнаваемости бренда
        • Помогает стимулировать повторные посещения и повышает лояльность к бренду оптимизация) выгоды за счет повышения удобства использования и удобства сайта

        3

        Следующий шаг

        Как создать значок Favicon

        • №1. Используйте существующий логотип или создайте новое изображение Перейти к разделу
        • #2. Преобразуйте Image Jump в раздел
        • #3. Загрузите свой новый фавикон на свой веб-сайт Перейти к разделу

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

        №1. Используйте свой существующий логотип или создайте новое изображение

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

        Когда у вас есть это изображение — вы можете использовать фоторедактор, такой как Photoshop или Canva, — вам нужно сохранить его (форматы .png или .jpg лучше всего подходят) в идеальном размере 64 x 64 пикселей. Это облегчит редактирование, и вы сможете уменьшить его до идеального размера значка (16 x 16 пикселей) позже.

        Тсс… ты уже создал логотип своей компании? Если нет, не расстраивайтесь — наше руководство по созданию логотипа поможет!

        #2. Преобразование изображения

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

        №3. Загрузите свой новый значок на свой веб-сайт

        Затем вам нужно будет загрузить свой значок (в формате .ico) в корневой каталог вашего сайта, чтобы браузеры могли найти файл вашего значка и отобразить соответствующее изображение.

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

        com/favicon.ico» />

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

        4

        Следующий шаг

        Онлайн-генератор фавиконок: Топ 5

        • #1. Favicon.io Перейти к разделу
        • #2. RealFaviconGenerator.net Перейти к разделу
        • #3. Favicon-generator.org Перейти к разделу
        • #4. Favic-o-Matic Перейти к разделу
        • #5. Favicon.cc Перейти к разделу

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

        Вот наша пятерка лучших.

        №1. Favicon.io

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

        #2. RealFaviconGenerator.net

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

        #3. Favicon-generator.org

        С базовым стилем и рекламой, загромождающей его интерфейс, Favicon-generator.org выглядит немного более «грубым и готовым», чем первые два инструмента, которые мы уже упоминали. Но это не делает его менее эффективным – вы можете создавать значки избранного для Интернета, Android, Microsoft и iOS и даже сохранять исходные размеры изображения.

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

        #4. Favic-o-Matic

        Выбор хипстеров, Favic-o-Matic отличается причудливым продуманным дизайном, броским текстом и лозунгами, добавляющими нотку веселья. Он прост в использовании, но не лишен функциональности: его «расширенные настройки» позволяют изменять размер изображения, цвет фона и URL-адрес RSS-канала. Он также делает свою работу быстро, хотя непрерывная медийная реклама может немного раздражать!

        #5. Favicon.cc

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

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

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

        Фавиконы должны иметь размер 16 x 16 пикселей, когда они загружаются на ваш сайт. Тем не менее, мы рекомендуем сначала создать их немного большего размера (64 x 64 пикселя подойдет), чтобы упростить процесс редактирования. Вы можете уменьшить их позже!

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

        • Favicon.io
        • RealFaviconGenerator.net
        • Favicon-generator.org
        • Favic-o-Matic
        • Favicon.cc

        Эти инструменты просты и, как правило, бесплатны. использовать тоже. Иди проверь их!

        Автор:

        Я писал для брендов и компаний по всему миру, предоставляя возможности всем, от индивидуальных предпринимателей и микробизнесов до предприятий и некоторых из самых известных брендов индустрии электронной коммерции, включая Yahoo!, Ecwid и Entrepreneur. Мое обязательство на будущее состоит в том, чтобы дать моей аудитории возможность принимать лучшие и более эффективные решения: поможет ли это вам выбрать правильную платформу для создания вашего веб-сайта, лучшего хостинг-провайдера для ваших нужд или дать рекомендации относительно того, что и как — продавать.

        Как создать значок Favicon (.ICO) в Photoshop

        Автор Алекс Шенкер /24 января 2023 г./ 6 комментариев / 4 минуты чтения

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

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

        Как должен выглядеть фавикон?

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

        Характеристики значка Favicon (файл .ICO)

        Фавикон:

        • Квадратный рисунок
        • 16 x 16 пикселей (хотя вы можете начать с 64 x 64, чтобы дать вашему дизайну больше свободы)
        • Заканчивается расширением .ico .

        Фавикон изначально был представлен в более ранней версии Internet Explorer и поддерживал только формат .ico. Сегодня большинство современных браузеров поддерживают другие графические форматы фавикона, помимо . ico (PNG, GIF (включая анимированные GIF)), но .ico чаще всего используется во всех браузерах и, таким образом, является стандартом, который следует использовать для Веб-сайт.

        Создайте свой файл Favicon (.ICO) в Photoshop

        У вас нет Photoshop или вы хотите обновить его? Вот наши скидки для читателей:

        • Photoshop Elements ( $69,99 )
        • Бесплатная пробная версия Photoshop
        • Пакет Creative Cloud

        Создайте новый файл в Photoshop. Хотя вы хотите получить квадрат 16×16 пикселей, вы можете начать с 32×32 или 64×64, чтобы у вас было больше места для работы. Импортируйте квадратную версию вашего логотипа или значка для представления вашего бренда в Photoshop. Затем скопируйте и вставьте его в новый файл. Используйте инструмент преобразования (удерживая клавишу Shift, чтобы сохранить пропорции), чтобы изменить размер и убедиться, что измененный размер 16 × 16 по-прежнему выглядит хорошо. Когда вы закончите, перейдите к «Сохранить для Интернета» и сохраните в формате . png с разрешением 72 DPI (точек на дюйм).

        Скрытый файл в .ICO с помощью Converter Tool

        Перейдите на ICO Converter – бесплатный веб-сайт, который преобразует ваш файл .png в .ico. Нажмите «Обзор» и импортируйте созданный файл .png. Выберите размер и разрядность и сохраните на свой компьютер.

        Добавьте значок Favicon на свою веб-страницу

        После того, как вы сохранили и готовы к работе favicon.ico, вы можете добавить его на свой веб-сайт следующим образом. В заголовок каждой веб-страницы вам нужно добавить следующий код (замените example.com/favicon.ico на каталог, в который вы загрузили свой значок):

        Мы не рекомендуем вам использовать относительный путь (href=»favicon.ico»), потому что это может привести к потере путей при перемещении вашего веб-сайта, а также более подвержено краже ссылок. Вместо этого используйте абсолютный путь (включая доменное имя), как в примере выше.

Comments
Leave Comment