Will the PNG-based favicon.ico work everywhere?

The .ico file embeds PNG images, which all modern browsers and Windows Vista or later support. Very old Windows XP-era tools may not read PNG-compressed ICO frames.

Why are the Apple touch and maskable icons not transparent?

iOS fills transparent areas with black and rounds the corners itself, and Android crops maskable icons into shapes, so both get an opaque background. The maskable icon also keeps your artwork inside a safe zone with at least 10% padding.

Favicon Generator

Generate favicon.ico, Apple touch, Android, and maskable icons with a manifest

Источник

Перетащите логотип PNG, JPEG, WebP или SVG

Лучше всего подходят квадратные изображения от 512 × 512 px. SVG очищаются перед отрисовкой.

Также можно вставить из буфера обмена.

Стиль иконки

Прозрачный фон

Действует для иконок браузера и Android. Иконки Apple touch и maskable всегда используют цвет фона.

Цвет фона

Форма

Отступ0%

Манифест веб-приложения

Название приложения

Короткое название

Цвет темы

Цвет фона заставки

Путь к иконкам

Где файлы будут лежать на сайте, например / или /icons/.

Пакет favicon

Добавьте изображение или переключитесь на текст, чтобы создать favicon

Все размеры, favicon.ico и site.webmanifest создаются вместе.

Фрагмент HTML для <head>

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

site.webmanifest

{
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Генератор аватаровСоздавайте аватары по сиду: инициалы, геометрия, животные, персонажи, профессии и идентиконы. Экспорт SVG или PNG локально.SVG в изображениеКонвертируйте SVG в чёткие PNG, JPEG, WebP или AVIF любого размера Изменение размера изображенийПакетно меняйте размер изображений в процентах, точно или по максимуму

Что создаёт генератор favicon?

Полный набор favicon из одного логотипа или нескольких букв: favicon.ico (16, 32 и 48 px), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png и site.webmanifest, а также HTML-теги для их подключения.

Как пользоваться

1.Перетащите логотип PNG, JPEG, WebP или SVG либо переключитесь на текст и введите до трёх символов.
2.Выберите фон (прозрачный или цвет), отступ и форму.
3.Укажите название приложения, короткое название, цвет темы и путь к иконкам для манифеста.
4.Проверьте предпросмотр на светлом и тёмном фоне и макет вкладки браузера.
5.Скачайте ZIP или отдельные файлы и вставьте фрагмент HTML в <head>.

Как строится каждая иконка

Иконки браузера и Android учитывают форму, отступ и прозрачность. Иконка Apple touch всегда непрозрачный квадрат, потому что iOS сама скругляет углы. Иконка maskable непрозрачна и держит изображение в безопасной зоне (отступ не меньше 10%), чтобы Android мог обрезать её в круг или сквиркл. Малые размеры уменьшаются поэтапно, поэтому иконка 16 px остаётся чёткой.

Форматы, безопасность и ограничения

favicon.ico содержит PNG-изображения, которые поддерживают все современные браузеры и Windows Vista и новее; очень старые инструменты Windows XP могут его не прочитать. Загруженные SVG очищаются: скрипты, обработчики событий и внешние ссылки удаляются перед отрисовкой. Текстовые иконки используют системный шрифт интерфейса. Всё создаётся локально в браузере.