Что такое фавикон и зачем он нужен | Пикабу

Что такое фавикон и зачем он нужен | Пикабу Камаз

Куда загрузить фавикон чтобы он был онлайн?

Для отображения созданного Вами favicon.ico в виде значка сайта необходимо загрузить его в корневой каталог сайта (либо в любой каталог) и указать в коде шаблона сайта абсолютный или относительный путь к нему (подробнее на Wikipedia), пример кода:

Фавикон: что следует запомнить

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

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

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

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

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

Фавикон (favicon — это сокращение от Favorite icon, в переводе с анг. означает любимый значок) — иконка, также известная как ярлык, значок веб-сайта или значок закладки. Фавикон является обычным графическим изображением (картинкой), связанным с конкретной веб-страницей или веб-сайтом.

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

favicon

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

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

{
  "name": "Rick and Morty",
  "short_name": "Rick",
  "icons": [
  {
    "src": "/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/android-chrome-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
 }
],
  "theme_color": "#b3adad",
  "background_color": "#b3adad",
  "display": "standalone"
}

Ключ

name

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

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через <head>, добавив следующий мета-тег:

Ключ

background_color

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

Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.

Вызов в <head>:

Html5 и атрибут sizes

Атрибут

sizes

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

sizes

указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.

Mac os


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

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color.

Windows

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в <head>:


Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:

Можно указать цвет фона плитки:

Можно указать имя закрепленного сайта:


Если нет этих метаданных, то в качестве имени используется значение в

; страницы.

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


Можно даже определить адрес документа:

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

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

Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.

Вызов файла в <head>:

browserconfig.xml

Автоматизация

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

, а при необходимости можно заодно сгенерировать код.

Есть пакеты для сборки и для Gulp, и для Grunt.

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

В каком формате должен быть фавикон?

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

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

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

Визуальная составляющая

Что учитывать при создании фавиконки:

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

Отличный фавикон у «Google Диска». Разноцветный треугольник хорошо смотрится в любом размере.

Логотип «Google Диска» и он же в виде фавиконки на вкладке

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

Логотип SendPulse и он же в виде фавиконки на вкладке

Вызывает доверие

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

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

Длинная версия, со всеми объяснениями

Концепция favicon (является сокращением от favorite icon, «любимая иконка»), существует с начала 2000-х годов. Мы каждый день видим эти милые маленькие изображения на панели вкладок браузера, они помогают нам различать открытые веб-сайты. Пользователи ожидают, что на вашем сайте будет favicon. Это одна из тех мелочей, которые заставляют людей относиться к вам серьезно.

Даже Apple, у которой всегда была какая-то эстетическая война с иконками (их не принимали в Купертино, скрывая favicon в Safari в течение многих лет) наконец-то сдалась и теперь правильно отображает их на всех своих устройствах.

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

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

Набор favicon, генерируемых популярным онлайн-генератором
Набор favicon, генерируемых популярным онлайн-генератором

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

Таким образом, я поставил перед собой цель создать минимальный список favicon, которые будут работать во всех случаях и во всех браузерах, за исключением некоторых редких случаев, но даже там всё будет работать, просто не на 100% идеально.

Загружаем иконки на сайт

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

Корневая папка сайта может называться public_html, www, html или site. Если такой не найдете, уточните у своего провайдера. Загрузите все полученные на предыдущем шаге файлы в корневую папку.

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

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

Зачем указывать путь к фавикону?

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

Идеальный набор favicon

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

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

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

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

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

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

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

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

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

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

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

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

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

И мы встретились. Конечно, поднутренним пространством я ожидал увидеть ну знаете, Годзиллу что ли. Все мы в курсе, как в среднем выглядят девушки, которые ставят на аву аниме-тян.
Но, мать, когда ее увидел, понял что ошибся.

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

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

И крохотная задорная жёпка.

Словом, я слегка поплыл. Но очень скоро понял, что не туда куда мне думалось.

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

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

А так как я поплыл, хоть и не отошёл ещё от предыдущего прекрасного создания, решено было брать за что полагается, когда настанет час.
Словом, рискнул. Ой зря…

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

Домой, к слову, меня не звали тоже. Ещё быстро (спустя месяц, ага) я сообразил, что меня используют. Началось все с «а давай вместе сходим, ты донесёшь» (тут-то ничего такого, рад помочь), затем просьбы эволюционировали в «принеси, ты же знаешь где».

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

Да, так я узнал что мы встречаемся.

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

Вы не Монтекки, я не Капулетти.

На что был ответ: ненене, я не готова.

— А с моими?..

— Ты шо, это стресс, от которого я умру.

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

Но я чет не сдался, хоть и дулся как ёж рыба.

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

На втором часу меня спасли панкующие нефоры, что тусили в домовой арке неподалёку. Меня отвели в дворничью подсобку, напоили водкой, и, роняя сопли все пели ой-йо, Кукушку, это вот всё.

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

А трубку она не брала, поскольку презирает такой вид общения.

Я понял, что сентябрь сгорел окончательно, этого времени мне хватило, и тощая жопа уже ну совсем не прельщала. За нее в принципе страшно было теперь браться. Мало ли.

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

Всё это было встречено ну прямо стеной непроницаемого равнодушия. Человек просто не видел претензий.

Я усилил нажим в надежде хоть на какую реакцию. Не, пофик.

Она планировала продолжать отношения как было, то есть вываливать на меня продукты своей депрессии. Молчать по три дня, чтобы как солнышко явиться с «привет, как дела?»

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

По улице слона водили, ага

Не, реально, меня чуть ли не через день приглашали потусить в этом кафе, в том, сём. С подругами.

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

Хоть я и предлагал.

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

Она молча проглотила эту новость. С достоинством королевы. Мне так показалось на счастливые полмесяца.

Теперь я думаю, что она просто не прочитала. Кто-то может сказать мне:

— Ничтожество, женщин не бросают по смс.

И будет прав. Но, понимаете, до нее невозможно было дозвониться. Вообще. В принципе.
Короче, спустя время меня зовут на погулять. На что я изумлённо заявляю, что боле не вместе, не судьба, отстань.

— Разве? — был ответ. — Странно.

Да, пиздец странно, подумал я. И решил что эта Алиса в стране чудес вообще странная по сути. Не понятно было что ей надо. Чем живет. Про рисование я уж не верил, пахло пиздежом.

Я натурально начал думать, что у нее есть муж. Конспирация указывала на это.

И все разговоры об отношениях умело игнорировались.

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

Кажется, она не расстроилась.

Потому что объявилась следующим летом. Привези, пишет, ноты, которые я тебе одолжила.
Я перерыл бумаги, и в самом деле я нечаянно зажал книжку. А, решил я, нехорошо, надо отдать.
Поехал отдавать, знал где ее дом. Набираю номер. И, о, мне ответили! Поднимайся на такой-то этаж — пишет.

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

В общем сидим на кухне, пьём. Я пырюсь на интерьер, интересно. Жара за окнами и тут.

Она в халате китайском. И вот этот халат меня смутил. Чето она начала то ногу показывать, то чуть распахнет его на груди, вроде «ой душно мне, душно».

И под этим делом виден комплект белья, и чулки на ногах видно — ещё б тебе не душно было, дура.

С запозданием сработало паучье чутье. На полчаса. А может на полгода.

Да, вообще, реакция у меня не как у змеи. Разве что как у мертвой.
Словом, я понял что по мне сейчас работает тяжёлая артиллерия, и, чтобы не сгинуть в этих окопах, пора съябывать.

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

По лестнице я ссыпался счастливый, как хер, пардон, в пизде.

К чему вся эта графомань. Щас будет панчлайн.

Проходит совсем немного времени после моего побега от этой шоушенки.

Она мне пишет, и пишет, совсем не как рептилоид. А нормально так, с эмоциями.

Почему, мол, вы меня бросили, чем я плоха, чем обидела вас и проч.

Ну я ей в двух словах отвечаю: «заебало заебало».

— Ах, — отвечает, — тебя заебало! А как я страдала!

— Как!

— Во-первых, тебе не интересна я, и нужен был только секс.

— Чо-чо, — возмущаюсь, — да я, да я все время как святой был! Секс! Охереть! И в чем это проявлялось, хоть один случай…

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

— Стоп, — пишу, — але, какая машина? Мы не были в машине, только в маршрутке. И потом, я в жизни из транспорта водил только велосипед, коня, ну ещё у отца на шее катался.

Возникла пауза. Я не ждал ответа.

Но он пришел.

— А, — написала она, — прости, я спутала.

Спутала, сцук! Триггерит с тех пор на светлые волосы. Даже усы блондинистые как вижу, хочется зажигалкой поджечь.

Без обид, усачи, это психотравма

На этом наше общение чето оборвалось.

Прошу простить за многобукв, кланяюсь, занавес

Как создать окончательный набор favicon

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

Шаг 1: Подготовка SVG

Убедитесь, что изображение в формате SVG имеет квадратную форму. Откройте исходный файл в вашем системном средстве просмотра и проверьте ширину и высоту изображения. Размер SVG легко настроить с помощью любого редактора SVG. В Inkscape вы можете изменить размер документа, выбрав File → Document Properties, а затем отцентровать логотип с помощью Object → Align и Distribute.

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

Теперь откройте свой SVG-файл в текстовом редакторе. Найдите <path> с темной или отсутствующей заливкой. Добавьте медиа-выражение CSS, которое будет запускаться при изменении темы, и измените заливку на нужные вам цвета:

Мы кого-то забыли?

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

Значок плитки Windows

Microsoft Edge раньше поддерживал специальный формат значков для прикрепления веб-сайтов к меню «Пуск». Для последних версий Windows это больше не требуется.

Закрепленный значок Safari

Отображение фавиконки

Если робот загрузил favicon, она появится в результатах поиска в

течение двух недель.

Помогает в навигации

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

Фавиконы можно увидеть:

Крупные фавиконы на стартовой странице Mozilla Firefox

Пора ли отправлять ico на свалку?

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

Сервисы для создания фавиконки без программиста

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

Этот сервис просит квадратный исходник с оптимальным размеров 260 на 260 пикселей. Здесь можно самостоятельно настроить результат: покрутить фон, отступы, цветовую тему.

Настройка получившихся иконок в Realfavicongenerator

В результате получаете пакет файлов для скачивания и код для встраивания на сайт.

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16×16, 32×32 или 64×64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

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

Создание favicon

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

Требования «яндекс» к фавиконке

Размер: 120 * 120 пикселей, 32 * 32 или 16 * 16.

Формат: SVG (рекомендуемый), ICO, GIF (без анимации), JPEG, PNG, BMP.

Вот что «Яндекс» пишет по поводу фавиконок:

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

Раздел «Яндекс.Справки» о фавиконках

Требования google к фавиконке

Размер: кратный 48 — 144 * 144, 96 * 96, 48 * 48. Загружать файл 16*16 не рекомендуется.

Формат: SVG, ICO, GIF (без анимации), JPEG, PNG.

Кроме этого, Google рекомендует следующее:

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

Раздел документации Google о фавиконках

Требования яндекса к фавиконке

Примечание:

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

Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но

если сайт проще найти в результатах поиска, а доверие к нему выше — это повышает кликабельность.

Экстремально короткая версия

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

HTML:

Оцените статью
Камаз