Создать favicon ico: Бесплатный онлайн-генератор файлов favicon.ico (фавикон) на Favicon.by

Создать фавикон онлайн | favicon.ico для сайта

X

• Новости Be1.ru
• Новости SEO

Be1 Вконтакте

1251 подписчиков

Be1 Facebook

1567 подписчиков

Новости

Сообщить о проблеме

Favicon — (от англ. FAVorites ICON в переводе «значок для избранного») — значок веб-сайта размером 16x16px или 32x32px, который отображается браузером в адресной строке или рядом с сохраненной закладкой. Традиционно название и расширение иконки используется favicon.ico.

Наш сервис способен конвертировать выбранное Вами изображение (размером до 175 Кб) в иконку значка сайта (размерами 16x16px или 32x32px). После генерации необходимо лишь загрузить favicon.ico в нужный каталог хостинга сайта.

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

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

Куда загрузить фавикон чтобы он был онлайн?

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

Зачем указывать путь к Фавикону?

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

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

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

Отзывы об инструменте

Оценка:

3.6 5 5

23.10.2022  18:16

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

Ответить

20.03.2020  16:00

Не работает, загружаю png 32х32, конвертирую в 32х32. Результат отображается, при скачивании пишет — Ошибка: файлы отсутствуют…

02.05.2017  11:48

Сделал себе отличную фавиконку. Все понятно и удобно. Классно придумали!

Ответить

29.01.2021  10:55

Коллеги, привет!

Инструмент вместо пустого фона вставляет ЧЁРНЫЙ ФОН. Представьте вашу фирменную единичку на черном фоне.

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

Ответить

09.06.2017  00:19

Было бы неплохо, если бы Вы сделали генератор favicon для всех устройств, в т.ч. и ретина-устройств

Ответить

\n’ + ‘

\n’ + ‘

\n’ + ‘ 0\n’ + ‘ \n’ + ‘

\n’ + ‘

\n’ + ‘ 0\n’ + ‘ \n’ + ‘

\n’ + ‘

\n’ + ‘ ‘+item. author+’\n’ + ‘

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

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

Учебники — favicon.io

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

Фавикон — это небольшая иконка или набор иконок, связанных с веб-сайт, веб-страница или веб-приложение. Он отображается внутри вкладки браузера и панель закладок. Примеры ниже показывают значки для Google, Reddit и Squarespace в браузере вкладка

Ниже приведены некоторые фавиконы с нескольких популярных веб-сайтов. отображается на панели закладок Chrome.

Для чего используется фавикон?

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

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

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

Некоторые альтернативные названия для фавикона: значок браузера, избранное значок, значок ярлыка, значок вкладки, значок URL и значок закладки. Слово favicon является сокращением от «любимая иконка» и происходит от Функция «Избранное» Internet Explorer, которая является самой современной браузеры называют «закладками».

Какие распространенные форматы файлов favicon?

ICO — favicon.ico

Наиболее распространенными форматами фавиконки являются ICO, PNG и SVG, но есть являются дополнительными форматами для определенных браузеров или устройств. ICO формат файла был разработан Microsoft и является исходным файлом формат фавикона. Формат уникален тем, что позволяет для нескольких небольших изображений в одном файле. Это выгодно, потому что маленькие значки, необходимые для фавикона в Формат ICO (16×16, 32×32 и 48×48 пикселей) можно масштабировать и оптимизировать самостоятельно. На маленькие габариты нельзя положиться браузер для автоматического изменения размера значка оптимальным образом. Формат ICO поддерживается всеми браузерами, и это единственный формат, поддерживаемый IE5–IE10.

PNG — favicon.png

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

SVG — favicon.svg

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

Каковы общие размеры фавиконки?

Важно отметить, что ваш фавикон должен быть квадратным.

Для формата ICO рекомендуемые размеры: 16 x 16, 32 x 32 и 48 x 48. пикселей.

Для формата PNG рекомендуемые размеры 16×16 и 32×32, но браузеры будут принимать любое квадратное изображение PNG.

Влияют ли фавиконы на поисковую оптимизацию или SEO?

Наличие фавикона может косвенно влиять на SEO. Некоторый поиск движки, такие как DuckDuckGo, отображают фавикон в поиске Результаты. Привлекательный фавикон может увеличить число кликов. показатели (CTR) в этих поисковых системах. Кроме того, фавикон — это необходимо для создания узнаваемости бренда и доверия к бренду. пропавший без вести favicon может привести к тому, что пользователи потеряют доверие к веб-сайту и повысят показатели отказов.

Генератор Favicon — Текст на Favicon

Быстро создавайте свою фавиконку из текста, выбирая текст, шрифты и цвета. Загрузите свой значок в самых современных форматах.

---

Установка

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

• android-chrome-192×192.png
• android-chrome-512×512.png
• apple-touch-icon. png
• favicon-16×16.png
• favicon-32×32.png
• favicon.ico
• site.webmanifest

9004 6 Затем скопируйте следующие теги ссылок и вставьте их в заголовок вашего HTML.

---

---

Почему favicon.io?

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

Начало работы с генератором фавиконок

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

Сделать фон простым

Далее выберите форму фона. Есть три простых доступные формы: квадрат, круг и закругленные. Эти наиболее распространенные формы, используемые для создания фавикона. Ты можешь видеть примеры этих форм с ПродуктХант, индихакеры и ХакерНьюс.

Выбор шрифта для фавиконки

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

Подбор цвета

Последним шагом является выбор цветов. Если у вас есть HEX значения цветов, которые вы хотите, вы можете просто ввести их в поле ввода. В противном случае вы можете использовать некоторые из цветов, которые мы предлагаем использовать палитру цветов под каждым полем ввода. Один крутой особенность в том, что вы можете использовать прозрачные фоны. Просто введите «прозрачный» в поле цвета фона. Вот пример фавикона, сгенерированного с прозрачным фон .