Как создать favicon

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

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

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

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

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

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

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

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

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

• Pr-Cy.ru
  
  

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

• Be1.ru
  
  

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

• Favicon.by
  
  

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

• Logaster.ru
  
  

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

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

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

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

1. Добавьте файл favicon.ico в корневую папку — каталог сайта;
   
   
2. Пропишите в коде HTML favicon. Он выводится строкой shortcut icon:
   

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

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

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

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