– Читать 7 минут

Как создать favicon

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ИСПРАВЛЕНИЕ

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

Содержание

Что такое favicon
Зачем нужен favicon
Как создать favicon
Как отобразить favicon на сайте

Заключение

Что такое favicon

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

А также в истории просмотров:

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

Кроме логотипа, в фавикон для сайта иногда вставляют значок, символизирующий тематику ресурса, первую букву названия компании и т.п. Размер иконки обычно составляет 32х32 или 16х16 пикселей.

Зачем нужен favicon

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

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

Использование фавикона обеспечивает и ряд других преимуществ:

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

Узнаваемость. Favicon — это удобный поиск. Когда пользователь ищет нужную ему вкладку в браузере, страницу в закладках или истории, первое, что бросается в глаза, — это иконка. Никто не обращает внимания на текст. Представим, что вы что-то ищите, когда в браузере открыто 20 вкладок: кроме иконки не будет видно практически ничего.

Продвижение. Это преимущество применимо только к поисковику Яндекс. Страница без фавикона в списке выдачи просто сливается с белым фоном и никак не выделяется среди остальных. В топе выдачи редко можно встретить страницу без иконки.

Кстати, найти на сайте страницы, на которых отсутствует фавикон, можно с помощью инструмента «Аудит сайта» Serpstat.

SEO-аудит сайта с помощью Serpstat: обзор инструмента

Читать

Хотите узнать, как найти и обезвредить ошибки на сайте с помощью Serpstat?

Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! ;)

Оставить заявку!

Как создать favicon

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

Все подобные сервисы предельно просты в использовании. Мы собрали несколько инструментов, с помощью которых вы быстро и бесплатно сделаете фавикон.

Pr-Cy.ru

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

Be1.ru

Есть возможность задать разрешение картинки (16х16 или 32х32 пикселя). Просто выберите картинку и нажмите «Конвертировать».

Favicon.by

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

Logaster.ru

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

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

Как отобразить favicon на сайте

Чтобы картинка была видна на вкладке, ее нужно добавить в корневую папку сайта. Браузер сам найдет фавикон и выведет иконку на сайт. Для этого картинку нужно загрузить в формате 16х16. С автоматическим выводом формата 32х32 могут возникнуть трудности.

Однако для надежности при любом разрешении картинки рекомендуется вручную прописать вывод фавикона в HTML-коде страницы. Для этого:

Добавьте файл favicon.ico в корневую папку — каталог сайта.

Пропишите в коде HTML favicon. Он выводится строкой shortcut icon:

<link href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

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

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />

Здесь значение v = 2 обозначает версию иконки. Увеличивайте его на единицу каждый раз, когда меняете картинку (v = 3, v = 4 и т.д.). Тогда браузер будет сразу отображать последнюю версию. После того, как вы определились с окончательным вариантом иконки, этот параметр можно смело удалять из кода.

Заключение

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

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

Эта статья — часть модуля «Список задач» в Serpstat

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

Начать работу со «Списком задач»