Как выбрать фавикон для сайта

Если у вас есть компания, бренд или просто блог, для которого был разработан или разрабатывается прямо сейчас сайт, то вы точно знаете, что вам нужен фавикон. А что такое фавиконка сайта? Начнём, с определения термина. Если вы знаете, что такое фавикон (favicon, фавиконка, favicon-ка (да, и такое написание встречается), смело пропускайте этот раздел.

Что такое фавиконка сайта

Немного истории

В марте 2021 года фавикону исполнилось 22 года. Впервые он появился в 1999-м году вместе с выпуском пятой версии известного (и на тот момент самого популярного) браузера InternetExplorer. Само слово фавикон — это сокращение от “favoriteicon”, что значит “иконка избранного”. Исторически такое название вполне оправдано, так как изначально фавикон сайта показывался только при добавлении этого сайта в “избранное” пользователя. Сейчас же фавикон отображается на вкладке любого сайта (при его наличии) почти во всех современных браузерах, и даже в поисковой выдаче, например, в Гугле или Яндексе. Это хоть и основные, но далеко не единственные места обитания современных фавиконов!

Как сделать страницу сайта релевантной запросу

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

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

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

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

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

Значок отображается:

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

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

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

Еще можно увидеть на панели закладок.

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

Преимущества фавикона

Повышает узнаваемость сайта или бренда

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

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

Увеличивает кликабельность

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

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

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

Избавляет от ошибки в лог-файлах

Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.

Как грамотно устранить или оформить ошибку 404

К примеру, такую:

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at

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

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

Формат

ICO-формат

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

PNG-формат

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

SVG-формат

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

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

В современных реалиях качественный фавикон — это отдельные файлы:

• разных размеров (от 16х16 до 512х512 px),
• разных форматов (png, svg, ico),

Последние подходят под все браузеры (Chrome, Firefox, Safari, InternetExplorer и др.) и операционные системы (Android, iOS, Windows, MacOS). Некоторые системы, например, браузер Safari, не поддерживает формат ico, и для отображения фавиконов ему нужен векторный формат svg.

Но и ico пока что не стоит списывать со счетов — есть работа специально для него. Устаревшие браузеры, например, InternetExplorer версии 10 и ниже (а ими всё ещё пользуется большая часть населения) поддерживает только этот формат. Также ico-файл пригодится для того, чтобы у сайта была персональная иконка в Windows при сохранении его на рабочий стол или в панель задач.

Чтобы не писать полотно текста, состоящее из повторяющихся слов и цифр, покажу наглядно набор favicon-иконок, необходимый вам для сайта, подходящий для 99,9% случаев (вдруг уже есть какие-то новые стартапы, использующие что-то совсем другое):

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

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

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

Правила по использованию фавикона

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

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

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

Например:

<linkrel=”icon” sizes=”<ширина>X<высота>”>

<linkrel=”icon” sizes=”<ширина1>X<высота1>,<ширина2>X<высота2>”>

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

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

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

Для того, чтобы избежать этого, вот несколько способов.

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

• Воспользоваться имеющимся у вас изображением (например, вашим логотипом) и загрузить его в онлайн-генератор фавиконов — например, Favicon.by, Realfavicongenerator.net и др.
• Скачать готовые фавиконы для сайта из специальных банков иконок — например, галерея Findicons. Данная сборка насчитывает более 500 тысяч иконок. Когда вы скачаете сгенерированный фавикон, остается только добавить его на ваш сайт. 

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

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

Загружаете готовый фавикон в корневой каталог сайта с помощью файлового менеджера, например, 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>

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

Дизайн фавиконки

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

1. Будет ли ваш фавикон выделяться среди конкурентов? Возможно, если у ваших конкурентов цветные иконки, вы можете использовать черно-белый вариант или подумать над изображением, которое будет концептуально отличаться от других.
2. Если вы хотите использовать двигающийся фавикон в формате gif, будет ли он отличать вас от других иконок? Или же он будет просто отвлекать и даже раздражать пользователей, создавая эффект не до конца подгруженного сайта (что более вероятно).
3. Можете ли вы в размере 16*16 четко сказать, что изображено на фавиконе? Постарайтесь, чтобы ваш фавикон не содержал мелких деталей, был хорошо различим и не пестрил всеми цветами радуги.
4. Ассоциируется ли ваш фавикон со сферой, в которой вы работаете, и с дизайном вашего сайта? По одному фавикону на панели закладок можно вспомнить, из какой ниши этот сайт, а иногда — и какой конкретно это сайт, если фавикон сохраняет визуальный стиль бренда. 

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

Как проверить фавикон

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

Как создать качественный контент: рекомендации от Гугл

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

• Яндекс – https://favicon.yandex.net/favicon/mysite.ru 

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

Почему фавиконка может не отображаться

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

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

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

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

Что такое фавиконка сайта и зачем она нужна

Итак, что такое фавиконка сайта? И все-таки зачем она нужна? Все очень просто: фавиконка нужна, чтобы не потеряться в большом количестве всевозможных сайтов. Они делают их привлекательнее и профессиональнее в глазах посетителей. Существует инструмент «Анализ сайта», который проводит полный техосмотр вашего ресурса, в том числе проверяет и наличие фавикона. Вы можете проанализировать свой сайт, просто зарегистрировав аккаунт в SE Ranking.

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

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

Какую картинку выбрать для фавикона

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

• Оригинальная: фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать для сайта.
• Контрастная: в былые времена любая иконка бросалась в глаза, потому что не все сайты их ставили. Сейчас выделиться сложнее, по запросу «как варить кофе» сайт без фавикона нашелся только на восьмой странице. Привлечь внимание лучше яркой контрастной иконкой, иногда для этого ставят стрелку, указывающую на сайт.
• Упрощенная: фавикон в выдаче, на вкладках браузера и в закладках очень маленького размера. Детализированное изображение никто не разглядит. Подберите картинку, где будет минимум деталей, два-три цвета, однозначное прочтение смысла.
• Тематическая: когда сайт представляет компанию, в фавикон лучше поставить логотип бренда или его фрагмент, если логотип сложный, детализированный или вытянутый. Если логотипа нет, подберите изображение и цветовую гамму по ассоциации с тематикой сайта.