Фавиконы готовые: Иконки Favicon — скачивайте бесплатно в PNG и SVG

что это, зачем нужен и как создать

Пример полноценного логотипа и фавикона на его основе от дизайнера Mehedi Islam. Источник

Зачем нужен favicon

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

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

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

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

Фавикон не влияет на оптимизацию сайта для поисковых систем, однако Яндекс обращает внимание на наличие этой иконки. Если ее нет, то владелец сайта получит сообщение об ошибке в сервисе Яндекс.Вебмастер.

Примеры favicon в результатах поисковой выдачи Яндекса

Правила создания favicon

• Чаще всего для фавиконки берут логотип бренда, адаптируя его под маленький размер. Если логотипа нет, можно взять основные (в идеале контрастные) цвета, используемые для оформления веб-ресурса. В этих цветах создают знак, который будет вызывать у потребителя ассоциации с деятельностью компании. Часто это первая буква названия компании.
• Мелкие детали на фавиконке не будут видны, поэтому текст и другие маленькие элементы лучше не использовать.
• Фавиконка в идеале должна отличаться от конкурентных. Например, яркий цвет или запоминающийся символ, связанный с тематикой бренда, поможет выделить сайт.
• Чтобы favicon в разных местах размещения отображался корректно и в хорошем качестве, его лучше создавать в двух вариантах. Для вкладок в браузере и для поисковой выдачи следует сделать фон прозрачным. Во второй версии лучше использовать сплошную заливку фона.
• Не менее важно соблюсти и технические требования. Причем для разных браузеров и поисковых систем они свои. Подробнее с условиями вы сможете ознакомиться в справках конкретного браузера, Яндекса или Google. Всю важную информацию о разрешении и форматах значков мы приводим ниже.

Варианты иконок приложения в разных цветах от дизайнера Rohanur Rahman Reon. Источник

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

Фавикон измеряется в пикселях. Требования к размерам определяют, исходя из вида устройства и браузера. 

У поисковых систем допустимые размеры и рекомендуемые форматы фавиконок отличаются:

• Яндекс рекомендует формат SVG. Он векторный, для него неактуальны конкретные размеры (так как в векторе нет пикселей), и в нем фавикон будет лучшего качества. Можно применять и другие распространенные форматы: ICO, PNG, JPEG и др. Размеры иконок в них — 120×120, 32×32 или 16×16 px.
• В Google есть возможность добавлять фавикон только в мобильную версию. Здесь другие требования. Разрешен размер, кратный 48 пикселям, например 48×48 или 144×144 px. При изменении масштаба качество картинки такого размера не пострадает.

Android-гаджеты с браузером Chrome допускают фавиконки формата png и размером 192×192 px. Операционная система Safari для Apple предусматривает множество вариантов png-иконки в зависимости от размера ссылки на сайт: от 57×57 до 152×152 и даже 180×180 px. На размер фавиконки также влияет и формат. Например, для SVG-формата точных размеров для картинки нет, она просто должна быть квадратной.

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

Фавиконки в разных цветах вместе с пакетом вспомогательных иконок для сайта от bisma shaukat. Источник

Форматы фавикона

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

Однако совсем отказываться от ICO не стоит. Некоторые старые браузеры, например Internet Explorer версии 10 и ниже, работают только с этим форматом. А если пользователю понадобится сохранить ссылку на сайт на рабочем столе Windows, ICO-файл тоже придет на помощь. Если вы знаете, что юзеры заходят через старые браузеры или сохраняют ссылки на компьютере, — лучше запастись ICO.

Другие разрешенные форматы иконок — SVG, GIF и JPEG — совместимы не со всеми браузерами. Например, формат JPEG в некоторых системах может отображаться некорректно (совсем без картинки или как «битый» файл).

Отдельно стоит сказать про анимированные картинки. Они поддерживаются браузерами Opera и Firefox, но не стоит использовать их слишком часто. Мелькающее изображение может отвлекать или даже раздражать юзера, что явно не пойдет на пользу сайту. Кроме того, создать качественную анимацию иконки технически сложно.

Варианты иконок приложения в разных цветах от дизайнера Rohanur Rahman Reon. Источник

Онлайн-сервисы для создания фавиконки

Если вы пока не владеете Adobe Photoshop и Adobe Illustrator — главными графическими редакторами для создания логотипов и иконок, можно попробовать себя в роли дизайнера фавиконок с помощью доступных онлайн-сервисов.

Favicon.by. В программе можно самому нарисовать иконку для сайта по пикселям или подкорректировать уже имеющуюся. Здесь можно загрузить картинку с компьютера или с сайта и потом отредактировать. Просмотр результата возможен до скачивания. В итоге вы получаете фавикон в формате ICO и размере 16×16 px.

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

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

Пример работы генератора иконок в сервисе Favicon.io. Стрелкой показан будущий вид фавикона в разных размерах.

Faviconit. В приложение надо загрузить картинку (минимальный размер 310×310 px, вес не более 5 Мб). После обработки изображения можно скачать архивом вместе с кодом для вставки. 

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

Favic-o-matic. Здесь можно генерировать фавиконы сразу в 20 вариантах размера или в стандартных размерах: 16х16, 32х32 px. Принимаются исходники размером от 310×310 px. Готовый пакет скачивается автоматически с генерацией кода для сайта.

Favicon & App Icon Generator. В программе можно делать фавиконки для операционных систем Android и iOS. Картинку можно выбрать из галереи или нарисовать с нуля. Чтобы улучшить результат, конструктор дает возможность настраивать изображения вручную.

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

Интерфейс сервиса xiconeditor.com с полем для рисования и инструментами

Antifavicon.com. От перечисленных выше программ отличается тем, что фавиконка генерируется из текста, а не из изображений. Чтобы получить картинку, нужно ввести в поле буквы или числа. Можно поменять цвета фона или самого текста. Здесь нет большого выбора инструментов для дизайна, но редактор отлично подойдет, если нужен простой и незатейливый значок.

Дизайнерские favicon от Sanni Joe. Источник

Как добавить фавикон на сайт

Существуют разные способы добавления фавиконки на сайт в зависимости от системы управления сайтом (CMS).

Если сайт без CMS

1. Между тегами <head>…</head> на главной странице нужно вставить часть кода с адресом фавикона и типом передаваемых данных. Укажите путь к месту хранения картинки (url), имя файла и используемый формат.  
2. Если страница редактировалась не на хостинге, нужно загрузить файл этой редактируемой страницы на хостинг, заменив существующий, и затем сохранить. 
3. Поместите изображение в корневой каталог сайта. Он должен быть доступен по прямой ссылке и отдавать ответ сервера «200 OK». Файл может быть загружен через собственную панель управления или через сторонний менеджер файлов. 

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

• http://favicon.yandex.net/favicon/mysite.ru — для Яндекса;
• http://www.google.com/s2/favicons?domain=mysite.ru — для Google.

Если сайт на CMS

В этом случае фрагмент кода также добавляется между <head>-тегами в файл с шаблоном хедера сайта.

В WordPress можно добавить фавиконку через стандартные настройки:

1. Зайти в раздел «Внешний вид» аккаунта администратора CMS и кликнуть по «Настройкам».
2. Затем кликнуть по кнопке с выбором изображения в разделе иконки сайта.
3. Загрузить изображение.
4. Щелкнуть на кнопку публикации, чтобы сохранить изменения.

Если сайт сделан на конструкторе

Здесь все просто. Вам надо найти раздел Favicon в настройках сайта, подгрузить изображение допустимого размера и формата, далее разрешить применение и после этого опубликовать страницу сайта заново.

Дизайн логотипа и иконок на фонах различного цвета от Star Wolfy. Источник

Распространенные ошибки

Если фавикон сайта не отображается, это может говорить об одной или нескольких проблемах:

• Индексация фавикона поисковой системой еще не произошла. Обычно этот процесс занимает от двух недель до двух месяцев.
• Недопустимый размер или формат фавикона. В коде иконки должны быть все обязательные атрибуты.
• Код иконки размещен не в том блоке. Корректный блок для размещения фавикона — <head>.
• Индексация иконки в файле robots. txt не разрешена. Если это так, исправьте Disallow («Не разрешать») на Allow («Разрешить»).
• Недопустимое изображение. На картинке не должно быть запрещенных и похожих на них символов.
• Фавикон низкого качества или скопирован. Если вы скопируете иконку с какого-то другого источника или загрузите ее в плохом качестве, поисковая система может проигнорировать ее.
• Браузерное кеширование. Чтобы устранить проблему, почистите кеш браузера и затем обновите страницу. Воспользуйтесь сочетанием клавиш Ctrl + F5, чтобы остаться при этом на странице.

ИСКРА —
неделя знакомства
с дизайн-профессиями

бесплатно

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

разжечь искру

Другие термины на букву «F»

FigmaFramer

← Все термины

Что такое фавикон, зачем он нужен и как его создать

11 мин — время чтения

Янв 17, 2020

Поделиться

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

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

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

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

Что такое фавикон и где он используется

Фавикон (favicon) — это в дословном переводе с англ. «значок для избранного» (FAVoritesICON). Именно так называются закладки в браузере Internet Explorer, где впервые стали использоваться визуальные иконки для быстрого поиска нужного сайта. 

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

Где же можно увидеть фавикон?

1. На открытых вкладках перед названием сайта. Если вы не загрузили фавикон, у вашего сайта будет стандартный значок в виде черно-белой планеты.

2. В истории просмотров браузера.

3. На панели закладок.

4. В избранном, куда вы сохраняете все интересные страницы.

5. В мобильной и десктопной выдаче Google. Фавиконы на мобильных экранах появились еще весной 2019 года, а вот в десктопной выдаче — буквально в первые недели 2020 года.  

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

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

Краткая техинструкция по фавиконам

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

Формат фавикона

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

Раньше Internet Explorer поддерживал только этот формат, сегодня же практически все известные браузеры распознают иконки в PNG, некоторые — в GIF, JPEG, SVG. Исключение — Internet Explorer 10 и более ранние версии браузера, которые принимают только ICO-файлы.

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

У фавиконов в формате SVG, GIF, JPEG проблемы именно в отсутствии такой широкой поддержки. Но пару слов в защиту SVG формата все-таки хочется сказать — иконки в SVG масштабируются без потери качества, что в будущем может стать отличным решением всех проблем с отображением фавиконов. Дело за браузерами, которые уже постепенно начали внедрять поддержку этого формата свободной векторной графики. 

Узнать, какие именно форматы фавиконов поддерживают разные браузеры, можно с помощью онлайн-сервиса Can I Use. Например, вы сможете увидеть, какие браузеры поддерживают или не поддерживают фавиконки в формате PNG и SVG.

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

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

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

Не так давно некоторые веб-мастера получили от Google письмо с рекомендацией увеличить разрешение фавикона до 192×192.  

В письме речь шла о том, что более качественные фавиконы могут принести в 2 раза больше кликов по новым вкладкам в Chrome и на главной странице Android. Согласитесь,  на расплывчатый фавикон вряд ли захотят кликать — значит, низкое разрешение иконки не вариант для хорошего пользовательского опыта.

Несколько общих правил, которых стоит придерживаться:

• Использовать квадратный значок сайта.
• Не использовать фавикон чужой компании или неприемлемого характера (например, свастика) — иначе поисковик будет отображать картинку по умолчанию – бесцветную планетку.
• Фавикон должен быть доступным для сканирования поисковыми роботами.

Пять лет назад с релизом HTML5 появился атрибут sizes, который значительно облегчает работу с фавиконами. Этот атрибут нужно указывать в формате ширина х высота без единиц измерения (если их несколько, используйте пробел). Например:

<link rel="icon">
<link rel="icon">

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

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

Как сделать фавикон онлайн

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

Как этого избежать?

Способов создать фавикон для сайта несколько:

1. Сделать его в графическом редакторе, например, в Photoshop с помощью специального плагина Favicon.ico. 

2. Нарисовать фавикон в специальных онлайн-сервисах (например, Katvin или favicon.cc) и потом скачать его оттуда в уже подходящем формате.

3. Воспользоваться имеющимся у вас изображением (например, вашим логотипом) и загрузить его в онлайн-генератор фавиконов — например, Favicon.by, Realfavicongenerator.net и др.

4. Скачать готовые фавиконы для сайта из специальных банков иконок — например, галерея Findicons. Данная сборка насчитывает более 500 тысяч иконок.  

Когда вы скачаете сгенерированный фавикон, остается только добавить его на ваш сайт. 

Как добавить фавикон на сайт

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

После этого нужно просто вставить следующий код в мета-тег <head></head>:

<head>
  ...
  <link rel="icon" href="https://yoursite.ru/favicon.png" type="image/x-icon">
  <link rel="shortcut icon" href="https://yoursite.ru/favicon.png" type="image/x-icon">
  ...
</head>

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

Дизайн фавикона — когда проще не значит хуже

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

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

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

Можете ли вы в размере 16*16 четко сказать, что изображено на фавиконе? Постарайтесь, чтобы ваш фавикон не содержал мелких деталей, был хорошо различим и не пестрил всеми цветами радуги.

Ассоциируется ли ваш фавикон со сферой, в которой вы работаете, и с дизайном вашего сайта? По одному фавикону на панели закладок можно вспомнить, из какой ниши этот сайт, а иногда — и какой конкретно это сайт, если фавикон сохраняет визуальный стиль бренда. 

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

Теперь, когда вы знаете, как создать красивый фавикон и добавить его на сайт, а будет ли он отображаться в поисковиках? Давайте проверим!

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

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

• https://www.google.com/s2/favicons?domain=mysite.ru

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

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

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

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

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

Почему фавикон нужен каждому сайту

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

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

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

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

Хороший фавикон — неотъемлемая часть бренда и технический стандарт каждого сайта, и точно стоит потраченного на него времени.   

4042 views

фавиконов: все, что вам нужно знать в 2022 году

Если вы сейчас посмотрите на открытые вкладки браузера, вы увидите букву «W» Webflow на этой открытой веб-странице. Это небольшое графическое украшение известно как фавикон.

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

Начало фавиконки

Фавиконы восходят к Internet Explorer 5. В то время они жили в корневых каталогах веб-сайтов с довольно простым названием «favicon.ico», которое используется до сих пор. сегодня. Если вы добавили веб-сайт в избранное в Internet Explorer, рядом с ним в адресной строке появится значок значка, а также список закладок.

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

Где найти фавиконы

Фавиконы отображаются в левой части вкладок браузера на рабочем столе. Они могут быть небольшими — как правило, с разрешением 16×16 или 32×32 пикселей на экранах с сетчаткой, — но эти небольшие элементы визуального брендинга нельзя упускать из виду при создании веб-сайта.

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

• Если вы посмотрите на HTML-код веб-сайта с фавиконкой , вы увидите ее в теге и в форме:

‍

• Вы также можете увидеть дополнительные размеры файла favicon.png в файле cod e для разных приложений и устройств, об этом мы поговорим чуть позже в этом посте. Фавиконы не ограничиваются вкладками браузера и могут отображаться в других местах, где перечислены или отображаются веб-сайты.
  
  

• Вы найдете фавиконы в истории вашего браузера. Независимо от того, используете ли вы Chrome, Safari, Firefox или любой другой совместимый браузер, рядом с веб-сайтом, который он представляет, появится значок фавикона. Вот как они выглядят в Google Chrome:
  

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

Как правильно использовать фавиконы

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

Примеры, которые следует учитывать при разработке собственного фавикона, включают кнопку воспроизведения YouTube, синюю птицу Twitter и красочную букву «G» Google. Эти значки уникальны, их можно сразу идентифицировать, и они позволяют легко обнаружить бренд при сканировании вкладок.

При создании столь же запоминающегося фавикона — вот некоторые вещи, которые вы должны учитывать

Сделайте свой значок маленьким, но разборчивым.

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

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

Не переусердствуйте

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

Вот несколько примеров: 

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

• Если ваш логотип является еще и символом, его легко использовать в качестве фавиконки. Логотип Apple s — отличный пример этого.

• ‍ Инстаграм использует логотип камеры как для кнопки приложения, так и для значка, что создает ощущение преемственности бренда на разных платформах.
  

Ограничьтесь несколькими символами

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

Угадаете, чьи это фавиконы?

Наклоняющаяся буква «D» мгновенно узнается как Disney, стилизованная буква P в красном круге — от Pinterest, а синий квадрат с «in» — от LinkedIn.

При разработке фавикона сокращение его до одной-двух основных букв хорошо работает для представления бренда.

Рассмотрите цветовую схему 

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

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

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

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

Лучше всего использовать векторную графику

Хотя может возникнуть соблазн быстро создать что-то в Photoshop, использование векторной графики поможет вам в будущем. Когда вы создаете фавикон в Illustrator, Sketch, Figma или другом приложении для векторного дизайна, гораздо проще изменить его размер и изменить его позже.

Многие дизайнеры начинают с графических фавиконов на основе SVG, а затем конвертируют их в невекторизованные файлы, такие как png, gif, jpg или ico.

Рассмотрите возможность создания фавиконов с помощью генератора фавиконов

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

Используйте правильный формат файла

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

Как правильно подобрать размер фавиконки

Стандартный размер фавиконки — 16×16 пикселей, но большинство дизайнеров начинают с 32×32 пикселей для размещения на экранах Retina. Таким образом, большие фавиконы хорошо отображаются на экранах Retina, а также могут быть уменьшены.

Конечно, существуют и другие размеры фавиконов, и стоит упомянуть, что значки Apple-touch, такие как для OS Safari, требуют размеров 180 x 180, для Android Chrome требуется значок 192 x 192, а Opera Coast работает. лучше всего при разрешении 228 x 228. Дизайнеры обычно создают множество разных размеров для использования как в настольных браузерах, так и в других приложениях.

Не скупитесь на фавиконки

Фавиконы важны. Без них наши открытые вкладки браузера кажутся пустыми. У нас остается куча серого пространства с текстом, который далеко не заслуживает внимания.

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

Что такое фавикон, зачем он нужен вашему веб-сайту и как его создать

12 минут чтения

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

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

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

Из Internet Explorer в поисковую выдачу Google

Еще в 1999 году значок значка был введен в Internet Explorer, чтобы помочь пользователям отличать веб-страницы, добавленные в закладки, от других. А так как страницы с закладками назывались (и, вероятно, до сих пор) «Избранными» в Internet Explorer, слова «избранное» и «значок» были смешаны вместе, чтобы создать новый термин.

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

2. Помимо адресной строки, фавиконки можно найти и в истории браузера.

3. Страницы с закладками также будут отмечены фавиконом на панели закладок.

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

5. В октябре 2022 года Google выпустил «имена сайтов» для мобильной поисковой выдачи. Благодаря новому дизайну Google может отображать названия веб-сайтов более заметно.

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

Фавиконы Facebook и Twitter выглядят точно так же, как их соответствующие логотипы. Значит ли это, что все, что вам нужно для фавикона, — это свернуть изображение вашего логотипа и загрузить его на свой веб-сайт? Давайте углубимся во все технические детали и поговорим о том, что нужно для создания фавикона.

Технические требования для создания фавиконки

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

Но с чего начать? Начните с выбора правильного формата и размера фавикона.

Формат фавиконки

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

В прошлом Internet Explorer поддерживал только этот формат файла, но современные веб-браузеры позволяют использовать значки PNG, а некоторые браузеры даже поддерживают значки GIF, JPEG и SVG.

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

Фавиконы в форматах файлов SVG, GIF и JPEG не так хороши с точки зрения совместимости с браузерами. Однако это может измениться в будущем. Формат SVG (масштабируемые векторные изображения) может стать новой нормой, поскольку его использование решит проблему создания нескольких фавиконов разного размера для всех популярных устройств. Таким образом, хотя в настоящее время только несколько браузеров поддерживают значки SVG, другие вполне могут скоро их догнать.

Чтобы узнать, какие форматы favicon поддерживаются разными браузерами, посетите веб-сайт Can I Use. Здесь вы можете увидеть, например, какие версии браузеров совместимы с иконками PNG и SVG.

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

Классический размер фавикона 16х16 пикселей, что соответствует 32х32 пикселя на экранах с высоким разрешением. В то время как Google использует 16x16px в своей мобильной поисковой выдаче, в его правилах говорится, что фавиконы такого размера не предоставляются. Вместо этого Google рекомендует создавать фавиконы с более высоким разрешением, кратным квадрату 48 пикселей. Итак, размер вашего фавикона должен быть 48x48px, 96x96px, 144x144px и так далее. Между тем, файлы SVG не обязательно должны иметь определенный размер.

Теперь, когда атрибут size был представлен в HTML5, вы также можете легко указать несколько размеров одного и того же значка. Атрибут позволяет задать ширину и высоту фавикона, а также можно указать несколько значений через пробел:

png» size=»16×16″ type=”image/png”> (1 размер)

(2 размера)

Дополнительные рекомендации для фавиконки

И вот несколько общих рекомендаций от Google, которых вы должны придерживаться:

• Используйте квадратную иконку.
• Фавикон должен представлять только ваш бренд и не содержать неприемлемых символов (например, свастики) — в противном случае Google не покажет его и вместо этого будет использовать общий символ фавикона.
• Файл Favicon должен быть доступен для поисковых роботов Google (пользовательский агент Google Favicon).

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

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

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

Обращение к Интернету за помощью в создании фавикона

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

Можно ли этого избежать?

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

1) Создать его в графическом редакторе типа Photoshop с помощью специального плагина Favicon.ico.

2) Оформить его в специальных онлайн-сервисах (например, favicon.cc) и потом скачать оттуда в подходящем формате.

3) Использовать существующее изображение, например, вашего логотипа и загрузить его в онлайн-генератор фавиконов, таких как Favicon.io, Realfavicongenerator.net и т. д.

4) Загрузить готовые фавиконы из специальных баз данных, таких как Flaticon или Findicons с тысячами вариантов на выбор.

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

Украсьте свой сайт фавиконкой

Сначала загрузите свою фавиконку в корневой каталог сайта с помощью файлового менеджера, такого как Filezilla. Затем все, что вам нужно сделать, это вставить следующий фрагмент кода в метатег:

   
    . ..  
     
     
    ... 
    

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

Простота не значит хуже в дизайне фавиконки

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

И пока вы будете это делать, задайте себе следующие вопросы:

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

Может ли анимированный GIF-фавикон помочь вам выделиться? Или это будет просто бельмом на глазу для поисковиков, создавая эффект, который (скорее всего) создаст впечатление, что ваш сайт еще не закончил загрузку.

Вы четко понимаете свой фавикон, когда он размером 16×16 пикселей? Старайтесь, чтобы ваш фавикон не содержал мелких деталей, а также не пытайтесь включить в него все мыслимые цвета.

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

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

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

Проверка вашего фавикона на наличие критических ошибок

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

• http://www.google.com/s2/favicons?domain=mysite.com

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

Однако, если ваш значок не отображается корректно или вообще не отображается в Google по какой-либо причине, начните с проверки следующих вещей:

1. Находится ли графическое изображение в корневой папке ресурса в файле ICO, PNG или GIF формат?
2. Правильно ли прописан код, ведущий к изображению на страницах ресурса?
3. Доступен ли файл значка для поисковых роботов?

Хочу отметить, что путь к изображению напрямую влияет на то, насколько хорошо отображается фавикон.

Если вы хотите каким-либо образом удалить или отредактировать свой значок, все, что вам нужно сделать, это удалить или изменить файл favicon.ico (JPEG, GIF, PNG).

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

Почему без фавикона не обойтись

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

Если вам нужна помощь, обратитесь за помощью к нашему веб-сайту аудита.

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

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