Веб студия » Блог » Как сделать фавикон для сайта
Дата публицакии: 15 апреля 2021

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

Содержание :

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

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

Чтобы полностью разобраться в теме начнем с определения. Favicion — небольшой значок, картинка, которую пользователь видит во вкладке браузера рядом с Тайтл и перед названием сайта в меню закладок. Как правило, в качестве этой картинки используют логотип компании, но только в миниатюре. Это может быть заглавная буква отображающая название вашей компании или небольшое, тематическое изображение. У такой миниатюрки есть одна важная задача — быть броским и запоминающимся для того, чтобы сайт выделялся на фоне других. Размер фавикона, как правило, 32*32 или 16*16 пикселей. 

Зачем нужен фавикон

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

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

Как отображается favicon сайта в поиске

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

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

Существует несколько вариантов создания фавикона, рассмотрим подробнее:

  • Заказать уникальный рисунок у дизайнера.
  • Нарисовать изображение самостоятельно используя Photoshop.
  • Скачать готовую картинку, но только подходящую вашей тематике.
  • Воспользоваться простыми онлайн-сервисами для самостоятельного создания. 


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

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

Допустимые форматы и размеры

В данном случае — размер имеет значение. Как и для других растровых картинок, он измеряется в пикселях. Существует стандартный размер, который будет поддерживаться во всех браузерах: 16*16 пикселей. Также используют и такие варианты: 24*24, 32*32 и 64*64 пикселей.

Гугл рекомендует использовать квадратные картинки больше 16*16 пикселей, чтобы они в браузере могли масштабироваться, при этом не теряя качество. Запомните, картинка должна быть квадратной!

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

Фавикон можно использовать на сайте, на мобильных устройствах. Пользователь может использовать его, сохранив на рабочем столе (что-то вроде закладки) на Android, IOS, Windows Phone. Также можно использовать и в программах и приложения для РС/Мас.

Онлайн-инструменты для создания favicon

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

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

Ниже представлен короткий список таких ресурсов.

favicon.by

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

pr-cy.ru

Данный ресурс позволяет не только создать фавикон. В его арсенале имеются СЕО-инструменты для аналитиков, копирайтеров и администраторов. Сайт простой в использовании, но если возникли вопросы, достаточно просто изучить инструкцию. 

Favicon-Generator.org

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

katvin.com

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

Как пользоваться сервисом для создания favicon?

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

  • Зайти на сайт и нажать “Создать” (в случае самостоятельного создания).
  • При помощи имеющихся инструментов нарисовать соответствующий логотип.
  • Если ресурс позволяет использовать готовую картинку, просто скачайте ее с ПК и переконвертируйте в favicon.
  • Когда изображение готово, просто скачайте его на свой компьютер.

Какие типы файлов можно использовать в favicon

С момента изобретения фавикона использовался формат изображения .ico. Он может содержать файлы различного размера. Браузеры распознают его в корневой папке сайта и самостоятельно подтягивают в виде маленькой иконки. Также можно использовать и формат .png, неплохой вариант для Андроид. А вот для Apple (браузер Safari) хорошо подойдет расширение .svg (векторное изображение).

Такие браузеры как Chrome, Firefox, Opera и Safari могут поддерживать GIF- формат, однако не стоит устанавливать в качестве фавикона гифку. Да, такой вариант привлечет внимание, однако со временем будет отвлекать. 

Самые популярные варианта формата:

  • .ico,
  • .png,
  • .svg,
  • .gif (без анимации).

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

Как установить favicon на сайт

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

https://website.com/favicon.ico

где,

website.com — домен вашего сайта, а favicon.ico — имя файла (можно оставить и в таком 

варианте, как в нашем примере).

Мы уже написали о том, что не все браузеры могут распознать фавикон автоматически, поэтому иногда необходимо прописать между тегами <head> и </head> следующее: 

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

либо

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>

Если у вас ресурс создан на WordPress, то здесь все немного иначе. В разделе head файла header.php пишем:

<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

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

AndroidiOS
Для гаджетов на Андроид лучше выбрать изображение 192*192 с форматом png:
<link type=»image/png» sizes=»192×192″ rel=»icon» href=»…/android-icon-192×192.png»>
В случае с Айфоном, то здесь необходимо выбирать формат PNG с размерами 180х180:
<link sizes=»180×180″ rel=»apple-touch-icon» href=»…/apple-touch-icon-180×180.png»>

Особенности отображения favicon на разных устройствах

Логично, что фавикон по-разному будет отображаться на мониторе ПК, планшете и телефоне. Причина тому — разное расширение дисплея. Гаджеты на ОС Android, в зависимости от PPI, используют такие размеры:

  • 36×36,
  • 48×48,
  • 72×72,
  • 96×96,
  • 144×144,
  • 192×192.

А вот планшеты, смартфоны и телефоны на IOS, в зависимости от типа экрана, требуют такой размер фавикона:

  1. Обычный экран —  от 57х57 до 76х76 пикселей.
  2. Retina-дисплей — от 114х114 пикселей и до 180х180.
Колесников Дмитрий
Технический директор, студии BRAINLAB

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Хотите сделать что-то великое?
Позвольте помочь вам.
Готовы? Свяжитесь сегодня.

Свяжитесь с нами!

info@brainlab.com.ua

Наш офис

Украина, Киев

улица Евгения Сверстюка, 19

Номер телефона

38 (095) 307 888 5

Мы в соц.сетях

Калькулятор стоимости сайта Brainlab

Интересует стоимость разработки сайта? Наш калькулятор дает возможность изучить стоимость каждого этапа и подобрать подходящий под бюджет вариант.
1. Тип сайта
Сайт визитка

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

Подробнее о сайте
Landing Page

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

Подробнее о сайте
Корпоративный
сайт

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

Подробнее о сайте
Сайт-каталог

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

Подробнее о сайте
Интернет магазин

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

Подробнее о сайте
2. Дизайн
3. Вёрстка
4. Движок CMS
Тип сайта: Не выбрано
0 $
Дизайн: Не выбрано
0 $
Вёрстка: Не выбрано
0 $
Движок CMS: Не выбрано
0 $
Примерная стоимость: 0 $
Примерные сроки: 0 дней

Хотите сделать что-то великое?
Позвольте нам помочь вам.

Готовы? Свяжитесь сегодня.
Зполните поле
Зполните поле
Зполните поле
Зполните поле
Спасибо за заявку!

Наши менеджеры свяжутся с вами в ближайшее время.