> ## Content Index > Fetch the complete content index at: https://www.tool-cloud.com/blog/ru/llms.txt > Use this file to discover other available public pages before exploring further. # Как создать фавикон из логотипа (разбираем все размеры) - URL: https://www.tool-cloud.com/blog/ru/how-to-create-a-favicon-from-a-logo/ - Published: 2026-10-04T23:09:46.000Z - Updated: 2026-10-04T23:25:07.000Z - Description: Преврати свой логотип в чёткий фавикон. Разберись, какие размеры актуальны, как подготовить PNG, JPG или SVG-логотип и куда именно добавлять каждый файл в HTML. - Author: Tool Cloud Team - Tags: Руководства, Изображения, Форматы файлов Чтобы создать фавикон из логотипа, начни с квадратного логотипа (SVG или PNG размером 512x512 или больше). Экспортируй favicon.ico, желательно с версиями 16, 32 и 48 пикселей внутри, затем добавь иконку Apple 180x180 и PNG 192/512 для манифеста и добавь ссылки на них в HTML. Это пять файлов (ICO, SVG, иконка Apple и два PNG для манифеста), а не дюжина. Вот как сделать каждый из них и куда их поместить. ## Короткий ответ: какие файлы фавикона тебе нужны Современный минимальный набор — это один ICO, один SVG, одна иконка Apple Touch и два PNG для манифеста. Отдельные PNG 16/32/48 и изображения плиток Microsoft [не нужны](https://seotest.app/blog/how-to-make-a-favicon-png-ico-svg-apple-touch), если у тебя есть многоформатный ICO. | Файл | Размер | Назначение | Используется в | | -------------------- | ------------------------ | ----------------------------------------------- | -------------------------------------------------------------- | | favicon.ico | 16, 32, 48 в одном файле | Классический фавикон, резервный вариант в корне | Вкладки браузера, читатели RSS-лент, боты предпросмотра ссылок | | favicon.svg | Масштабируемый | Чёткая иконка любого размера | Современные десктопные браузеры | | apple-touch-icon.png | 180x180 | Иконка на домашнем экране | iPhone и iPad | | icon-192.png | 192x192 | Иконка запуска | Android Chrome, манифест PWA | | icon-512.png | 512x512 | Иконка установки и заставки | Android Chrome, манифест PWA | ![Глянцевая синяя эмблема с закруглёнными углами и звёздчатым вырезом находится над веером плоских закруглённых форм карточек файлов в…](https://www.tool-cloud.com/blog/ru/content/images/2026/10/how-to-create-a-favicon-from-a-logo-img-1.webp) Один мастер-логотип, уменьшенный до компактного набора файлов фавикона. Многие генераторы выдают ZIP-архив с дюжиной файлов, большинство из которых ни один браузер не запрашивает. Мастер-файла 512x512 вполне достаточно, поэтому увеличивать его не нужно. ## Объяснение размеров фавикона: для чего нужен каждый ### favicon.ico (16, 32, 48) ICO — это контейнер, хранящий несколько битмапов в одном файле. Стандартный набор качества включает 16, 32 и 48 пикселей; добавляй 256 только если тебе важны крупные иконки Windows. Его всё же стоит иметь. Краулеры, читатели лент и боты предпросмотра ссылок обычно по умолчанию запрашивают /favicon.ico из корня сайта. Chromium ведёт себя иначе: в опубликованном тесте запросов он загружал /favicon.ico только тогда, когда на странице не была объявлена другая иконка. При объявлении SVG он запрашивал только SVG и предпочитал ICO отдельным ссылкам PNG. **Пропусти отдельный PNG 32x32.** Некоторые руководства перечисляют его, но этот тест показал, что он не используется при наличии ICO. Тест охватывал только Chromium, поэтому поведение Firefox и Safari не проверялось. ### favicon.svg SVG-фавиконы работают в Chrome 80+, Firefox 41+ и Edge. Поддержка в Safari появилась недавно и работает нестабильно, а на iOS Safari SVG-фавиконы вообще не работают. Считай SVG дополнением, никогда не заменяй им ICO. ### apple-touch-icon (180x180) 180x180 — это размер для Retina iPhone (60pt при 3x). Одного файла 180px достаточно: iOS масштабирует его для других устройств, включая iPad. ### Иконки манифеста (192 и 512) Android Chrome и установленные веб-приложения считывают иконки из манифеста веб-приложения. Файл 192px — это иконка запуска, а файл 512px — иконка установки/заставки. ### Что нужно Google Search Google считывает иконку с твоей главной страницы. Подходит любой формат фавикона, включая ICO, PNG и SVG. Он должен быть квадратным и размером не менее 8x8 пикселей. Google рекомендует размер больше 48x48, кратный 48, и даёт одну иконку на хостнейм. Если иконка неподходящая, Google подставляет стандартную иконку глобуса. ## Подготовь логотип перед экспортом ### Квадратный, крупный и прозрачный Лучший источник — SVG. В противном случае используй квадратный PNG размером 512x512 или больше. Только уменьшай масштаб: переход от 1024px к 16px сохраняет детали краёв, а от 32px к 16px — нет, увеличение же просто создаёт размытие. Если твой логотип не квадратный, сначала обрежь или добавь ему поля с помощью инструментов обрезки и изменения размера изображений Tool Cloud. Сохраняй PNG прозрачным и в цветовом пространстве sRGB. Не объединяй слои и не добавляй фон «на всякий случай». Может ли фавикон быть JPG? Да, но PNG или SVG чище. У JPG нет прозрачности, поэтому конвертация JPG в ICO даст тебе залитый квадрат, а артефакты сжатия будут видны в крошечных размерах. ### Упрости для 16 пикселей Полный логотип с девизом превратится в кашу во вкладке браузера. Работают следующие принципы: - Один выразительный графический знак с высоким контрастом - Два или три плоских цвета - Максимум один или два жирных символа, без текстового знака Тестируй в реальном размере. Если ты не узнаёшь его за полсекунды, упрости ещё сильнее. ### Совет: используй два изображения для лучшего ICO Для максимального качества используй упрощённую графику для размеров 16 и 32 и более детализированную для 48 и 256\. Создай два ICO, затем используй упрощённый как favicon.ico, а детализированный — для ярлыков Windows. Это опционально, и одного хорошо упрощённого логотипа достаточно для большинства сайтов. ## Конвертируй свой логотип в ICO и остальной пакет ### Вариант 1: сгенерируй пакет фавиконов Открой [Генератор фавиконов Tool Cloud](https://www.tool-cloud.com/ru/image/generate%5Ffavicon/), загрузи свой квадратный логотип и скачай ZIP-архив со стандартными размерами фавиконов. Используй файлы, соответствующие таблице выше, и создай недостающие отдельно (например, SVG или PNG 192/512). Игнорируй любые файлы, на которые не ссылается твой HTML. ### Вариант 2: конвертируй логотип в один ICO Если тебе нужен только favicon.ico, используй [Конвертер изображений в ICO](https://www.tool-cloud.com/ru/image/convert%5Fto%5Fico/). Загрузи логотип и выполни конвертацию, затем переименуй результат в `favicon.ico`. Проверь, какие размеры содержит ICO; если в нём нет версии 16 или 32 пикселей, используй генератор выше. ### Создание PNG 180, 192 и 512 Измени размер своего квадратного мастера до 180x180, 192x192 и 512x512 и назови их `apple-touch-icon.png`, `icon-192.png` и `icon-512.png`. Для иконки Apple используй непрозрачный фон, а логотип размести по центру с отступами вокруг него. iOS игнорирует прозрачность и сама закругляет углы, поэтому не закругляй их заранее. Всегда подставляй свой собственный сплошной фон, а не полагайся на то, чем его заполнит iOS. ## Куда поместить каждый файл в HTML ### HTML-сниппет Загрузи все файлы в корень сайта, затем добавь это в ``. Атрибуты `sizes` следуют [описанию того, как Chrome выбирает иконки](https://dev.to/vannsl/the-surprisingly-weird-world-of-favicons-and-how-to-survive-it-5a2l): ```html ``` Несколько примечаний: - Используй `rel="icon"`. `rel="shortcut icon"` — это устаревший атрибут; «shortcut» не зарегистрирован и избыточен. - Браузеры выбирают иконку по типу файла, а не по порядку в коде, поэтому последовательность не так важна. Атрибут `type="image/svg+xml"` позволяет браузерам, которые не поддерживают SVG, пропустить его и использовать ICO-файл. - Укажи конкретный размер для ICO и добавь атрибут `sizes="any"` к SVG. Если ты укажешь `any` для ICO-файла, Chrome может отдать предпочтение ему вместо SVG. ### Манифест веб-приложения ```json { "name": "Your Site", "short_name": "Site", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ] } ``` Для установки Chrome требует наличие иконок 192px и 512px. Избегай использования атрибута `"purpose": "any maskable"` на единственном файле. Для маскируемой иконки создай отдельный файл с изображением внутри центральной безопасной зоны (примерно 409x409 пикселей на холсте 512x512). ## Как добавить фавиконку в WordPress, Squarespace, Shopify и Wix Названия пунктов меню могут отличаться, поэтому сверяйся с тем, что написано в твоей панели управления. - **WordPress:** Внешний вид → Настроить → Идентичность сайта → Значок сайта. Загрузи PNG размером 512x512. - **Squarespace:** Дизайн → Иконка браузера. Подойдёт квадратный PNG 300x300 (также принимается формат ICO). - **Shopify:** Настройки темы → Фавиконка. Загрузи квадратный PNG размером 512x512. - **Wix:** Настройки → Настройки сайта → Фавиконка (для этого может потребоваться платный тариф). ## Почему фавиконка выглядит размытой или не обновляется ### Размытые иконки или заполненные квадраты Размытие обычно возникает при увеличении маленькой растровой картинки или из-за слишком детализированного логотипа при размере 16px. Исправь это, используя SVG и ICO размером от 32px, и никогда не увеличивай изображение 16x16\. Сплошной квадрат за логотипом означает, что исходник не имел прозрачности — скорее всего, это был JPG. ### Всё ещё отображается старая иконка Браузеры кэшируют фавиконки на несколько дней или недель. Попробуй выполнить следующие действия по порядку: 1. Жёстко обнови страницу. 2. Открой файл /favicon.ico напрямую и обнови его там. 3. Добавь строку запроса, например, `/favicon.ico?v=2`. 4. Проверь результат в режиме инкогнито. 5. Убедись, что файл отдаёт статус HTTP 200, и очисть кэш CDN. Иконки на домашнем экране iOS кэшируются для каждого ярлыка отдельно, поэтому существующие ярлыки не изменятся, и пользователям придётся добавить сайт заново. При ребрендинге используй новое имя файла. ### Google Search не показывает её Обновления занимают от нескольких дней до недель, а изменение URL иконки может их замедлить. Убедись, что на главной странице иконка подключена через тег `rel="icon"` и соответствует указанным выше требованиям по размеру. Жёсткого ограничения по объему в КБ нет; правила Google касаются именно размеров. ## На практике Начни с квадратного исходника размером 512px или больше и упрости его для отображения во вкладке. Загрузи файлы, затем вставь HTML-код и манифест на свой сайт и дважды проверь, что ссылка на манифест присутствует. В конце посмотри на результат в размере 16px: если знак не читается, упрости его ещё раз. ## Часто задаваемые вопросы ### Нужен ли мне favicon.ico в 2026 году? Да. Браузеры, читатели RSS-лент и боты предпросмотра ссылок всегда запрашивают /favicon.ico из корня сайта, независимо от твоих HTML-тегов, так что это дешёвая страховка. Упакуй в один файл версии 16, 32 и 48 пикселей. ### Может ли фавикон быть JPG? Технически да, но PNG или SVG дают гораздо более чистый результат. У JPG нет прозрачности и есть артефакты сжатия, а фотографии содержат слишком много деталей для размера 16x16 пикселей. ### Какой размер должен быть у фавикона для Google Search? Google требует квадратное изображение размером не менее 8x8 пикселей и рекомендует больше 48x48 пикселей. SVG там не поддерживается, поэтому оставь ICO или PNG, объявленный через rel=icon на главной странице. ### Нужны ли отдельные файлы PNG 16x16, 32x32 и 48x48? Обычно нет. Многоформатный ICO покрывает эти размеры, а тест запросов в Chromium показал, что отдельные PNG не используются, если присутствует ICO. Firefox и Safari не тестировались. ### Почему не отображается мой новый фавикон? Браузеры агрессивно кэшируют фавиконы на несколько дней или недель. Попробуй жёсткое обновление страницы, открой /favicon.ico напрямую, добавь строку запроса ?v=2 или проверь в режиме инкогнито.