Favicon для сайта (фавиконка)

Как подключить Favicon к сайту?

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

АТРИБУТ	ЗНАЧЕНИЕ
rel	icon указывает на тип используемого ресурса.
href	Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.
type	Тут указывается тип изображения. Например, image/png для картинок в формате .png, image/svg для .svg. или image/x-icon для .ico

Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.

Например, я скачал себе .ico с сайта. Затем делаю следующее:

1. Кидаю картинку в корневой каталог ресурса (туда же, где лежит index.html).
2. Потом открываю index.html и прописываю в head строчку <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>.

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

Теперь вы знаете, как сделать иконку сайта на вкладке HTML. Рисуем картинку в .ico или .svg, кидаем ее в любое удобное место, а затем прописываем адрес с форматом в head.

Что такое favicon

Favicon (или фавиконка) — это специальный значок, который используется для отображения в некоторых элементах браузера. Каждый отдельный веб-ресурс имеет (или должен иметь) свою отдельную фавиконку, которую, к примеру, можно увидеть рядом с адресом сайта в названии вкладки браузера, в поисковой выдаче и в списке избранных сайтов. Именно из-за подобного использования в качестве символа для закладки и родилось название этого значка — FAVourite ICON, то есть иконка для избранного, так как изначально фавиконка использовалась только для этого.
В настоящее время фавиконка — это, во-первых, мини-символ сайта, который повышает узнаваемость ресурса; во-вторых, ее наличие положительно влияет на положение сайта в поисковой выдаче.

Преимущества использования фавикона

Вот основные преимущества использования значка на вашем сайте:

Достоверность

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

Отзыв бренда

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

Повторные посещения

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

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

Как проверить фавикон и исправить основные ошибки

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

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

Есть еще один вариант для проверки фавикона на разных устройствах — с помощью специальных сервисов, например, Realfavicongenerator. 

Если ваш фавикон не отображается в Яндексе или Google, начните с проверки таких моментов:

1. Графическое изображение в формате ico, png или gif находится в корне ресурса?
2. Код, ведущий к изображению, на страницах ресурса прописан правильно?
3. Иконка не размытая и уникальная?
4. Доступен ли файл с фавиконом для сканирования поисковых роботов?

Обратите внимание, что от пути к изображению напрямую зависит его отображение. Если хотите удалить или изменить фавикон, необходимо просто удалить или изменить файл favicon.ico (jpeg, gif, png). . С отображением фавиконов в Яндексе могут быть нюансы

Например, Яндекс отображает иконки не на всех страницах в поисковой выдаче. Если сайт находится ниже 10-15 позиции, то и изображения рядом со ссылкой не будет

С отображением фавиконов в Яндексе могут быть нюансы. Например, Яндекс отображает иконки не на всех страницах в поисковой выдаче. Если сайт находится ниже 10-15 позиции, то и изображения рядом со ссылкой не будет.

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

Для чего нужен фавикон

Основное предназначение фавикона — выделить бренд или его сайт среди браузерных вкладок. При отсутствии иконки на вкладке отображается картинка чёрно-белой планеты, по которой невозможно распознать сайт. Представьте, что в вашем браузере одновременно открыто 10-15-20 вкладок. При таком количестве открытых страниц текст заголовка просто не виден, и распознать нужный сайт можно только по изображению.

Кроме того, фавикон — это возможность сделать бренд более узнаваемым и запоминаемым для аудитории

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

Владельцам сайтов фавикон полезен тем, что:

• обеспечивает узнаваемость сайта и, соответственно, бренда;
• выделяет ресурс среди конкурентов;
• косвенно подтверждает внимательность владельца к деталям;
• дополняет единый стиль оформления сайта.

С чего начать? Первым делом разбираемся с расширениями

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

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

Основные форматы под favicon и их особенности

.ICOЭто расширение своего рода золотой стандарт фавиконов. Его поддерживают все типы браузеров, но по ряду причин он считается морально устаревшим. Основные преимущества ICO — универсальность, простая схема загрузки (можно просто забросить файл в корневой каталог сайта) и адаптивность. Последнее качество объясняется тем, что ICO — это файл-контейнер, который содержит в себе иконки сразу нескольких размеров. Но это обуславливает и недостатки. ICO не любят за  относительно большой вес и то, что некоторые современные браузеры иногда подтягивают неправильный размер иконки, из-за чего последняя отображается в низком разрешении.

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

.SVGПерспективный, но в настоящее время малоподдерживаемый векторный формат изображений. Его основное преимущество — возможность вариативного разрешения под нужды конкретного интерфейса. Настраивается через CSS. Масштабирование SVG-фавиконов происходит без потери качества. Данный тип файлов не поддерживается в старых десктопных браузерах и на некоторых Android-платформах.

Отдельно отметим, что иконки можно загружать и в любых других форматах, например, .jpeg, .bmp или. gif, но на практике этого стараются не делать из-за все той же проблемы — отсутствия широкой поддержки. Узнать, какие именно расширения отображают те или иные браузеры, помогают специальные инструменты, например, сервис caniuse.com.

Благодаря сервису Сan I Use мы видим, что у PNG-фавиконов поддержка в браузерах заметно шире, чем у расширения .SVG

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

Размеры иконок

Вы можете загрузить одну иконку в любом из удобных форматов: .ICO, .PNG, .SVG и т.д. Это самый простой вариант в техническом плане. Но с точки зрения качественного юзабилити лучше заливать несколько вариантов файлов, чтобы гарантированно адаптировать логотип под разные типы платформ. При этом сам фавикон должен быть квадратного размера.

рекомендует использовать размеры иконок, кратные 48 пикселям: 48×48, 96×96, 144×144. Для SVG-файлов кратность не имеет значения, поскольку, как было упомянуто выше, у них вариативное разрешение.

В браузерах загруженный значок будет ужат до размера 16×16 пикселей. Поэтому вы обязательно должны убедиться, насколько читаем ваш мини-логотип в таком масштабе, но загружать столь маленький размер файла не нужно (по крайней мере, на этом сделан акцент в справке Google). Минимальное разрешение — 48×48 пикселей.

Яндекс дает следующие рекомендации: оптимальный размер —  120×120, также допускается использование изображений 32×32 и 16×16 пикселей. Рекомендуемый формат — SVG, как гарантирующий максимальную четкость и заметность. Но это необязательно. По желанию можно использовать любой вышеописанный тип расширения.

При создании фавикона в формате .ico, который, как мы выяснили, является контейнером, содержащим сразу несколько иконок, традиционно в него загружают иконки с разрешением 32×32, 48×48 и 96×96 пикселей. Этого достаточно, чтобы лого везде отображалось в хорошем качестве. При необходимости картинка будет масштабирована до нужных размеров.

Создание ico-контейнера не требует каких-либо специальных навыков. Для этого используют бесплатные онлайн-сервисы. Достаточно загрузить исходное изображение и указать перечень нужных размеров — ico-файл будет готов к скачиванию через несколько секунд. Чем создавать такие контейнеры — рассказываем дальше.

Отрисовка иконки в фотошопе

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

Редактирование скаченной иконки сайта в фотошопе

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

Сервисы для генерации и проверки favicon

Digitalagencyrankings.com

Первый сервис http://digitalagencyrankings.com/iconogen/, очень простой в использовании. Для того чтобы вручную не делать favicon разных размеров, вы загружаете в этот сервис свою иконку в jpg, png или gif. Сервис создает её в разных размерах.
Сразу видно, как они будут выглядеть.
Есть возможность скачать все иконки в одном архиве.
Сервис сразу генерирует код для вставки на сайт:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />

Realfavicongenerator.net

Второй сервис https://realfavicongenerator.net, имеет более расширенные настройки и проверку иконок на валидность.

Загружаем на сайт свое изображение в размере не менее 260*260, чтобы получить более лучшие результаты.
В сервисе мы можем настроить иконку для разных устройств: размер изображения, цвет подложки и т.д. Здесь сразу отображается, как будет выглядеть favicon на устройстве.
При генерации сервис также предоставляет код для вставки на сайт и запакованные иконки в архиве.

Проверка иконок

После установки иконок на сайт, вы можете их проверить валидатором https://realfavicongenerator.net/favicon_checker

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

Способы создания Фавикон для сайта

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

Готовые коллекции Фавикон

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

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

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

Ресурсы с иконками:

1. //www.thefavicongallery.com/ — небольшая коллекция изображений разных тематик. Всего в коллекции около 300 иконок. Каждую будущую фавиконку можно просмотреть в увеличенном виде, а затем сохранить на свой компьютер
2. //www.iconj.com/ — содержит более 3 тысяч изображений для фавикон. Сервис позволяет сохранять изображения в разных графических форматах.
3. //www.favicon.cc/ — огромнейший банк favicons, количество которых на момент написания статьи 228 839 штук. Единственный минус, что на одной странице находится 20 иконок, и чтобы выбрать понравившуюся придется долго листать.
4. //www.favicon.by/ — не знаю количество, но очень много готовых иконок, при нажатии на понравившуюся, фавиконка сразу скачивается на компьютер.
5. //www.flaticon.com — ресурс с огромным количеством готовых иконок, на все случаи жизни, которых на момент написания статьи более 384 тыс. сгруппированных по 7 тыс. группам. Иконки можно скачать в разных форматах с необходимым разрешением.

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

Графические редакторы

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

Будущий фавикон для своего сайта я создавал в любимом всеми редакторе Adobe Photoshop. Сделал нужную мне картинку размером 800×800 пикселей, с последующей конвертацией в необходимый формат — 16×16 pix.

Картинки в поисковых системах

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

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

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

Иконки в Яндекс.Картинках

Онлайн сервисы создания Favicon

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

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

Вот список наиболее популярных сервисов для онлайн создания фавикон:

1. //www.favicon.cc/ — англоязычный сервис создания Favicon
2. //favicon.ru/ — русскоязычный аналог, есть один минус, при сохранении конечной картинки изначальный прозрачный фон получается черным, хотя может я не до конца разобрался с настройками.
3. //www.favicon.by/ — имеет два интерфейса, русский и английский. Очень мне понравился этот сервис, рекомендую и Вам.

Как сохранить или конвертировать в ICO

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

• Online-convert.com
• Convertio.co

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

10 советов, как задизайнить крутой фавикон

Маленький логотип — еще не значит простой. Работа с малоформатными изображениями предполагает много неочевидных сложностей. Избежать ошибок и разработать правильный дизайн фавикона помогут эти десять универсальных советов.

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

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

3. Тематичность изображения. Используйте пиктограммы, отражающие тематику сайта.

4. Визуальный минимализм. Чаще всего фавикон будут видеть в формате 16×16 пикселей. Это крошечное пространство, поэтому, если вы попытаетесь передать много визуальной информации, есть риск получить смазанный объект, неудобный для восприятия. Подбирайте картинки с минимумом детализации и однозначным прочтение смысла.

5. Цветовая сдержанность. Создавайте фавиконы, в которых присутствует не более двух-трех цветов.

6. Литерный логотип. Используйте в качестве иконки первую букву из названия сайта — это простое и эффективное решение брендирования

Но здесь следует помнить важное правило: или буква или пиктограмма. Попытка вместить и то и другое приведет к чрезмерной перегруженности и нечитаемости

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

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

9. Правильный фон. Цветное изображение на белом фоне читается лучше, чем белая иконка на цветном фоне.

Размер иконки

Для растровых форматов, размер нужен. Раньше, когда фавикон только появился, компьютеры были не такими мощными, а разрешения мониторов маленькими, по современным меркам. А соответственно и стандартный размер иконки был 16х16 пикселей. И это продолжалось достаточно продолжительное время. Сегодня, современные сайты этот размер уже не используют. По рекомендации того же Яндекса, 120х120 пикселей наиболее оптимальный.

Рекомендация Яндекса по размеру и формату favicon

В свою очередь Google рекомендует иконки кратные 48 пикселям – 48х48, 96х96, 144х144. Однако это касается десктопных браузеров. У телефонов плотность пикселей гораздо выше, да и количество иконок там помещается меньше, даже при аналогичном разрешении с монитором. Поэтому слишком маленькая иконка может выглядеть размытой, при масштабировании. Для современных смартфонов на Android рекомендуют 192х192, для iPhone – 180×180.

Favicon для Android

• 36×36 – для экранов с коэффициентом плотности 0.75
• 48×48 – для экранов с коэффициентом плотности 1
• 72×72 – для экранов с коэффициентом плотности 1.5
• 96×96 – для экранов с коэффициентом плотности 2
• 144×144 – для экранов с коэффициентом плотности 3
• 192×192 – для экранов с коэффициентом плотности 4

Favicon для Apple

• 57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
• 60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
• 72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
• 76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
• 114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
• 120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
• 144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
• 152×152 – для iPad с ретина дисплеем и iOS версии 7.0
• 180×180 – для iPhone 6 Plus c iOS версии 8.0

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

Для того чтобы создать сам favicon, есть два основных способа. Первый – ручная отрисовка иконки на специализированных онлайн-сервисах или при помощи графических редакторов типа Photoshop. Второй – скачать и использовать уже готовые иконки. Рассмотрим оба варианта по порядку.

Как создать фавикон для сайта. Коротко о способах и сервисах

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

1. Сделать в Photoshop

Способ для тех, кто любит делать все основательно и знает Photoshop хотя бы на самом поверхностном уровне. В этом случае нужно будет самому создать файлы нужных размеров и сохранить их в предпочитаемом формате: svg, png, bmp и т.д. Чтобы сохранить документ в виде ico-контейнера, необходимо установить специальный плагин Favicon.ico. Хотя, говорят, Photoshop 2020 умеет делать это по умолчанию.

2. Конвертировать в онлайн-сервисе

Наверное, самый быстрый и надежный способ создать файл в формате ico. Берем картинку (сразу квадратную), заливаем ее в онлайн генератор и скачиваем готовую фавиконку в виде ico-контейнера. Примеры сервисов:

• realfavicongenerator.net
• pr-cy.ru/favicon
• be1.ru/generator-favicon/

3. Нарисовать фавикон самому

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

Обратите внимание, результат вашего творчества сразу отображается на вкладке браузера

Примеры сервисов:

• katvin.com
• favicon.cc
• favicon.by

4. Скачать готовую иконку

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

Размеры фавиконов для браузеров и устройств

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

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

Фавиконы сайтов на экране смартфона

Если это возможно, ориентируйтесь на каждую платформу, с которой пользователи могут открыть сайт.

Достаточный пакет фавиконок для популярных браузеров

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

Дополнительно можно добавить файлы для мобильных устройств.

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

Пример кода:

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

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются
Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. В rel нужно указать “apple-touch-icon.png”.

Пример кода:

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Пример кода:

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

У Microsoft есть
«Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

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