Favicon размер

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

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

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

Favicon размер

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

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

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

Что такое формат favicon .ico (ICO)?

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

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать:

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

Подключение иконок через Web App Manifest: manifest.json

Вместе с Progressive Web Apps (PWAs) вы часто будете слышать про файл manifest.json. Файл manifest.json – это JSON файл, позволяющий настраивать внешний вид и запускать действия веб-приложения, которое добавлено в закладки или на домашний экран устройства.

manifest.json позволяет настраивать ряд параметров, среди которых внешний вид иконки, используемой для запуска веб-приложения.

Более подробно о manifest.json и его возможностях читайте в нашей статье manifest.json.

Favicon размер

Favicon на домашнем экране устройства Android

Манифест содержит свойство массива icons, с помощью которого можно задавать список объектов изображений, каждое из которых может обладать свойствами src, sizes и type, описывающими иконку.

Файл manifest.json с двумя иконками может выглядеть следующим образом:

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

Подключение иконок через файл browserconfig.xml

browserconfig.xml – это XML файл, с помощью которого можно задавать иконки для Microsoft Windows. Он также размещается в корне сайта. Его код:

Нас интересуют здесь тег tile и его дочерние элементы. Код сверху определяет иконку с двумя размерами 150×150 и 310×310. Подробнее об этих размерах позже.

Так много способов подключения иконки – какой использовать?

Столько способов подключения favicon. Вы спросите: «какой же использовать?». Теперь самое забавное – все! ОК, весело? Не совсем.

Почему столько много способов подключения favicon?

Ранее мы говорили, что почти все браузеры поддерживают favicon.ico 16×16 и 32×32 в корневой папке. Так почему бы не пойти этим путем? Нам нужно поддерживать разные платформы и плотность пикселей на экране, чтобы иконка всегда хорошо смотрелась на разных размерах и в разных контекстах.

Во-первых, иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.

На мобильных ОС, например, нужно также подготовить иконку для отображения на домашнем экране. У каждой ОС свои особенности и набор предпочтительных размеров иконок для разных размеров экрана. Файлы Web App Manifest и browserconfig.xml дают разработчику больше контроля над представлением и запуском сайта на разных платформах.

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

У нас есть разные способы подключения иконок. Давайте узнаем, какие размеры использовать. С появления атрибута sizes в HTML5 теперь можно указывать favicon в формате PNG:

Рекомендации Chrome

На сайте Google developers рекомендуют использовать для Chrome максимальный размер 192×192px.

Изображение будет автоматически уменьшено до необходимого размера.

Однако если вам нужно больше контроля, и вы сами предпочитаете масштабировать изображения, а не оставлять это браузеру, можете предоставить свои собственный иконки кратные 48px.

Мы получаем следующие размеры:

Другой источник Google developer для заставок Add to homescreen рекомендует разрешение еще больше. Поэтому можно добавить 256, 384 и 512:

Разметка со всеми этими favicon будет выглядеть так:

Рекомендации Safari

Apple рекомендует следующие размеры иконок:

Их можно подключить через тег link. Получается:

Оптимальные размеры для старых устройств на iOS:

Их также моно разместить в корневой папке с именами типа apple-touch-icon-180×180.png и apple-touch-icon.png, и Safari iOS автоматически найдет правильную иконку.

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

Закрепленные вкладки в Safari

Safari использует SVG иконки на закрепленных вкладках. Для этого используется SVG изображение (поэтому размер пикселей неважен):

Плитки Microsoft Windows

Даже если вы не хотите заботиться об ОС Windows Phone mobile (на это есть хорошая причина, она была заморожена), вам все еще нужно думать об иконках на плитках Windows. Они используются в Windows 8 и выше, на планшетах, ноутбуках и ПК.

Favicon размер

Плитки Microsoft Windows

Windows 8 и выше использует формат плитки для отображения иконок. Руководство по их проектированию довольно сложное. Мы лишь рассмотрим необходимые размеры.

Базовые размеры плитки, определенные Microsoft:

В Windows 8.0 и IE 10 плитку 144×144 можно задать в разметке так:

С версии 8.1 можно использовать файл browserconfig.xml и не писать это в head.

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

Наш browserconfig.xml теперь ссылается на изображения плиток, увеличенные на 1.8, и выглядит следующим образом:

Edge и IE11 автоматически запрашивает файл browserconfig.xml. Однако конфиг файл можно явно предоставить следующим образом, что позволяет изменить его имя и путь:

Собираем все вместе

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

И 2 конфиг файла:

Разметка favicon

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

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

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

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

Например, прозрачность хорошо работает на Android, но на iOS она превращается в черный цвет. Во многих случаях это неприемлемо.

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

Вывод – нужно проверять рендер favicon на всех платформах.

Нам действительно нужны все эти favicon?

Для такой маленькой иконки очень много работы.

С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.

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

Пусть браузер сам занимается уменьшением

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

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

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

Минимальный набор иконок

1. Следующие файлы в корневой папке

2. Файл manifest.json, использующий изображение chrome:

3. Файл browserconfig.xml, использующий изображение mstile

4. Следующая разметка

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

Мы используем manifest.json для Android, Chrome также будет использовать его, если он объявлен.

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

Будущее favicon

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

SVG favicon

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

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

Чтобы использовать favicon SVG, атрибут sizes необходимо установить в значение any:

Автор: Ruadhán O’Donoghue

Источник: https://mobiforge.com/

Редакция: Команда webformyself.

Favicon размер

webformyself.com

Как выглядит favicon и что это такое

Favicon (сокр. от favorite icon) – это маленькая квадратная иконка, которая отображается на вкладке страницы рядом с ее заголовком и также в закладках браузера.

Favicon для сайта

Создание favicon по шагам

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

Создаем изображение

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

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

Создаем файл favicon.ico, c помощью онлайн-генератора

Загружаем картинку на данный сайт. Изображение должно быть размером менее 50 кб. Нажимаем кнопку «Iconify». Дожидаемся, когда сервис сформирует иконку и скачиваем файл favicon.ico.

Загрузка favicon на сайт

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

Какого размера фавикон

Фавикон может быть размером 16×16, 32×32, 48×48 пикселей. В любом случае это квадрат. Какого размера фавикон выбрать решайте сами, расскажу лишь об отличиях между ними. Разница будет заключаться в качестве отображения и объеме файла. Фавикон размером 16×16 будет весить примерно 1 кб, 32×32 — 6 кб, 48×48 — 34 кб.

Поиск favicon в интернете

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

Если фавикон не отображается

Если у вас после этих действий все еще не отображается favicon, проверьте правильно ли Вы указали папку для копирования файла. Для этого наберите в браузере http://yoursite.ru/favicon.ico. В браузере должна отобразиться ваша иконка. Также может потребоваться обновить кэш браузера. Это можно сделать, нажав комбинацию клавиш Ctrl+F5.

Favicon для сайта

Если не отображается favicon в Яндексе, не спешите сильно огорчаться.

Пример favicon в Яндексе

Для того, чтобы favicon появился в Яндексе, должно пройти примерно 2 месяца.

Итак, теперь мы знаем что такое favicon, как установить его. Если у вас остались вопросы о том, как установить favicon на сайт, вы можете их задать в комментариях к этой странице. На этом все, всем удачи!

С уважением, Евгений Кузьменко.

ekuzmenko.ru

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

  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">  <link rel="shortcut icon" href="favicon.ico">  

Для сайта на CMS WordPress это может выглядеть так:

  <link rel="apple-touch-icon" sizes="180x180" href="<?php bloginfo('template_directory'); ?>/images/favicon/apple-touch-icon-180x180.png">  <link rel="icon" type="image/png" sizes="32x32" href="<?php bloginfo('template_directory'); ?>/images/favicon/favicon-32x32.png">  <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon/favicon.ico">  
  1. apple-touch-icon-180x180.png — сразу для всех современных гаджетов и больших экранов, эту иконку будет использовать и iOs, и Android
  2. Для обычных браузеров, favicon-32x32.png — средних размеров, можно и больше, но устройства, которые могут использовать большего размера фавикон, возьмут первый вариант apple-touch-icon-180x180.png
  3. Все же еще где-то используют IE9 и младше, поэтому приходится использовать такой устаревший формат как favicon.ico, по идее, можно сделать размер и 32х32, но оставим 100% поддерживаемый 16х16.

До этого я использовал такие фавиконки:

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">  <link rel="apple-touch-icon" href="apple-touch-icon-57x57.png">  <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">  <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">  

Но все эти иконки успешно должна заменить одна apple-touch-icon-180x180.png.

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

На iPhone старых версий размер 180х180 просто сожмется до нужных пропорций.

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

  <link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">  <link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">  <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">  <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">  <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">  <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">  <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">  <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">  <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">  <link rel="icon" type="image/png" href="favicon-194x194.png" sizes="194x194">  <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">  <link rel="icon" type="image/png" href="android-chrome-192x192.png" sizes="192x192">  <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">  <link rel="manifest" href="manifest.json">  <meta name="apple-mobile-web-app-title" content="JoJo Productions">  <meta name="application-name" content="JoJo Productions">  <meta name="msapplication-TileColor" content="#00aba9">  <meta name="msapplication-TileImage" content="mstile-144x144.png">  <meta name="msapplication-config" content="browserconfig.xml">  <meta name="theme-color" content="#555555">  <link rel="shortcut icon" href="favicon.ico">  

Но самый первый вариант с тремя фавиконами успешно заменяет кучу этих иконок.

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

denis-creative.com

Это фавикон

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

Favicon размер«>

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

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

Со страниц истории

Впервые такое понятие как «фавикон» появилось в 1999 году. Тогда компания «Майкрософт» выпустила новую версию браузера Explorer. В этом обновленном варианте Internet Explorer -5 стало возможным использовать фавикон. Для этого нужно было загрузить изображение с расширением .ico в основную папку сайта.

Загруженная картинка должна была иметь формат http://«название сайта» /favicon.ico. Лишь в таком случае браузер мог использовать соответствующего размера фавикон в списке закладок и возле адресной строки сайта, что расположен в закладках. Но это уже давно устаревшая техника, сейчас иконка сайта поддерживается на сайтах и без закладок. Кроме того, доступны разные форматы избранных изображений. Теперь можно использовать не только картинку с расширением .ico, подойдут также .jpg, .png, .gif и .jpeg форматы.

Особенности форматов

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

Favicon размер«>

Самые распространенные форматы на сегодня это .png и .ico:

  • .ico— этот формат превосходно подходит для Windows. Картинки с таким расширением имеют разное разрешение и глубину цвета. То есть, битовую глубину, что характеризирует информацию о цвете для каждого пикселя и делает изображение более точным. Для браузера Internet Explorer это отличное решение, так как здесь могут использоваться фавиконы разных размеров.
  • .pngфайлы этого расширения более удобны в использовании. Это объясняется тем, что для создания иконки сайта не нужно никаких дополнительных инструментов. Более того, форматом поддерживается маска-канал, с помощью которой можно создать картинку самого маленького размера без потери качества изображения. Единственное, чем этот формат уступает предыдущему – невозможность отображения фавикона в Internet Explorer.

Другие расширения

Что касается остальных форматов, то у каждого есть как свои преимущества, так и недостатки. Все они проявляются в зависимости от того, в каком браузере отображаются. К примеру, картинки формата .gif не совместимы со старыми браузерами. Картинкам .jpg недостает качества и четкости изображения, однако здесь плавные переходы между цветами. Отличным качеством изображения обладают фавиконы формата .svg, вот только они доступны лишь в браузере Opera.

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

Favicon размер«>

Размер имеет значение

В классическом варианте размер иконки составляет приблизительно 16ˣ16 пикселей. По крайней мере, так было до недавнего времени. Но с развитием технологий размер фавикона стал увеличиваться. Сейчас максимальный размер иконки составляет 64х64 пикселя. Такая динамика расширения избранного изображения спровоцирована желанием (и, соответственно, возможностью) пользователей сохранять ярлыки сайтов в соответствующих папках или на рабочем столе, чтобы иметь быстрый доступ.

На сегодняшний день существует 5 размеров фавикона:

  • 16х16;
  • 24х24;
  • 32х32;
  • 48х48;
  • 64х64;

Favicon размер«>

Добавление иконки

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

Чтобы установить фавикон на сайт, нужно всего лишь следовать несложному алгоритму:

  1. Во-первых, необходимо создать фавикон. Этот процесс не должен доставить неудобств. Для начала нужно выбрать изображение, которое будет позиционировать сайт, а потом отредактировать его при помощи специального сервера, который автоматически подгоняет картинку под стандартный размер фавикона.
  2. Во-вторых, нужно полученный материал загрузить в корневую папку сайта.
  3. И в-третьих, вписать в тег <head> такой код:

Favicon размер«>

Чтобы имидж не испортить

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

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

Favicon размер«>

Основная задача фавикона: изображать ключевую тематику ресурса. Но никто не запрещает применять для этого всю свою креативность. К примеру, если сайт занимается продажей бытовой техники, то можно, конечно, в качестве фавикона использовать изображение стиральной машинки или холодильника. Но чем тогда ресурс будет отличаться от сотен подобных ему, и чем он тогда запомнится? Что если попробовать поэкспериментировать и с названием проекта? Например, «Яндекс» уже давно стал, узнаваем благодаря алой букве «Я». Это и есть главная особенность фавикона, как бренда – врезаться в память пользователя и характеризировать конкретный сайт, выделяя его из сотен других.

Программы для создания фавиконов

Сегодня каждый веб-мастер может воспользоваться специальными сервисами для создания фавиконов. К тому же, существуют объемные галереи, из которых можно выбрать готовую иконку сайта, сделанную на профессиональном уровне. Среди создателей сайтов особой популярностью пользуется галерея IconJ. Она является не только каталогом, но и генератором. Желающие могут выбрать иконку для своего ресурса из каталога, в котором находится более 18000 картинок или же создать свой авторский фавикон.

Favicon размер«>

На пространстве Рунета популярной является база фавиконов от рекламного агентства «Веб Аудит». Что касается иностранных ресурсов, то лучшим вариантом для создания и выбора иконки сайта считают Favicon.cc. Здесь можно воспользоваться специальными функциями, чтобы настроить цветовую гамму, обрезать картинку или наложить дополнительные слои.

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

www.syl.ru

You May Also Like

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.