Фавикон: сделать favicon.ico из картинки
Загрузите PNG или JPG — получите favicon.ico и PNG всех размеров одним архивом, плюс готовый код для вставки в <head>. По сути конвертер картинки в иконку для сайта.
Найти фавикон чужого сайта
Введите адрес — покажем, какие иконки объявлены в разметке и лежит ли что-то по стандартному пути /favicon.ico.
Что такое фавикон
Фавикон (favicon, от favorite icon) — маленькая иконка сайта. Её видно на вкладке браузера, в закладках, в истории и в подсказках адресной строки. Когда сайт сохраняют на домашний экран телефона, фавикон становится ярлыком приложения.
Технически это обычная картинка, но подключается она особым тегом и должна существовать сразу в нескольких размерах. То, что читается на 512 пикселях, при 16 превращается в кашу.
Как подключить фавикон
Положите файлы в корень сайта и добавьте три строки в <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-32x32.png" type="image/png">
<link rel="apple-touch-icon" href="/favicon-180x180.png">Первая строка закрывает вкладки и старые браузеры. Вторая даёт чёткую иконку на экранах с высокой плотностью, PNG там выглядит лучше, чем растянутый ICO. Третья нужна для айфонов, без неё iOS возьмёт скриншот страницы вместо иконки.
Строго говоря, favicon.ico в корне сайта браузеры находят и сами, даже без тега, они запрашивают этот адрес по умолчанию. Но полагаться на это не стоит. Тег работает надёжнее, а остальные размеры без него всё равно не подключатся.
Чем ICO отличается от PNG
PNG — обычная картинка одного размера. ICO устроен иначе, это контейнер. Внутри одного файла лежит сразу несколько версий иконки, и браузер сам берёт подходящую под ситуацию. Именно поэтому исторически сложилось класть в корень favicon.ico, один файл на все случаи.
Генератор выше собирает настоящий ICO с кадрами 16, 32 и 48 пикселей. Это важная деталь. Многие онлайн-инструменты просто переименовывают PNG в .ico, потому что браузерный канвас формат ICO не умеет. Такой файл обычно работает, браузеры терпимы и определяют формат по содержимому. Но настоящим ICO он не становится, и несколько размеров в него не положишь.
Как сделать ICO из PNG или JPG
Отдельный конвертер PNG в ICO ставить не нужно, генератор выше делает это сам. Загрузите картинку в PNG или JPG, и он соберёт из неё настоящий favicon.ico с кадрами 16, 32 и 48 пикселей, а заодно отдаст PNG остальных размеров. Обратная замена, когда .png просто переименовывают в .ico, обычно работает, но кладёт внутрь один размер вместо нескольких, и для иконки сайта это хуже. Лучший исходник — квадратный PNG от 512×512 с прозрачным фоном.
Какие размеры нужны
| Размер | Где видно | Нужен ли |
|---|---|---|
| 16×16 | Вкладка браузера, закладки | Обязательно |
| 32×32 | Вкладка на экране с высокой плотностью, панель задач Windows | Обязательно |
| 48×48 | Ярлык сайта в Windows | Желательно |
| 180×180 | Домашний экран iPhone (apple-touch-icon) | Желательно |
| 192×192 | Android Chrome, ярлык на домашнем экране | Желательно |
| 512×512 | Заставка при установке сайта как приложения (PWA) | Если есть манифест |
Минимального набора из favicon.ico и PNG на 32 пикселя хватает. Остальное добавляют, когда сайт должен прилично выглядеть ярлыком на телефоне.
Почему фавикон не меняется
Самая частая жалоба — иконку заменили, а в браузере старая. Причина почти всегда в кэше, фавиконы браузеры держат особенно упорно и не обновляют даже при обычной перезагрузке. Что делать по порядку:
- Откройте
/favicon.icoпрямым адресом. Если там старая картинка, файл не перезаписался на сервере и браузер ни при чём. - Если по адресу новая, а на вкладке старая, обновите страницу с очисткой кэша:
Cmd+Shift+RилиCtrl+F5. - Если не помогло, добавьте к адресу версию:
<link rel="icon" href="/favicon.ico?v=2">. Для браузера это новый файл.
Фавикон в Next.js
В App Router теги писать не нужно. Положите favicon.ico в папку app/, и Next сам добавит нужный <link> в <head>. Так же работают icon.png и apple-icon.png: по именам файлов фреймворк понимает, какой тег сгенерировать.
Откуда взялся формат ICO и почему вокруг фавикона столько путаницы, рассказано в статье Фавикон: полное руководство.
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
Положите файлы в корень сайта и добавьте в <head> строку <link rel="icon" href="/favicon.ico" sizes="any">. К ней стоит добавить <link rel="icon" href="/favicon-32x32.png" type="image/png"> — PNG даёт более чёткую иконку на экранах с высокой плотностью, — и <link rel="apple-touch-icon" href="/favicon-180x180.png"> для случая, когда сайт сохраняют на домашний экран айфона. Готовый код лежит в архиве файлом head.html.
ICO — это контейнер: внутри одного файла лежит сразу несколько размеров, и браузер сам берёт подходящий. Наш инструмент кладёт в favicon.ico версии 16, 32 и 48 пикселей. PNG — обычная картинка одного размера. Практика такая: ico в корне сайта закрывает вкладки и старые браузеры, а PNG подключают дополнительно для чёткости.
Квадратную, размером от 512×512. Простую и контрастную: при 16 пикселях мелкие детали и тонкий текст превращаются в кашу, поэтому логотип с подписью лучше обрезать до одного знака или символа.
Десять: 16 и 32 (вкладки браузера), 48 (Windows), 57 и 76 (домашний экран iOS и iPad), 120 и 152 (их Retina-версии), 180 (современные айфоны), 192 и 512 (Android Chrome и установка сайта как приложения). Всё скачивается одним архивом, но любой размер можно забрать и отдельно.
Чаще всего его закэшировал браузер — старую иконку он держит особенно упорно. Откройте адрес /favicon.ico напрямую и обновите страницу с очисткой кэша (Ctrl+F5 или Cmd+Shift+R). Если и там старая — файл не перезаписался на сервере либо лежит не в корне.