Favicon - (сокращение от слов «Favorite Icon» ) - это маленькая картинка размером 16×16 пикселей, которую увидит посетитель вашего сайта. Она отображается рядом с URL сайта в адресной строке браузера. Кроме того эта иконка отображается рядом с именем вашего сайта в списке открытых вкладок, в закладках и в результатах поиска, облегчая пользователю быстро найти ваш сайт среди других сайтов.
По умолчанию в качестве иконки сайта отображается значок браузера. Чтобы сайт отличался от остальных и не затерялся в бесчисленном количестве серых вкладок, открытых пользователем, нужно сделать свою оригинальную фавиконку.
Хотя многие современные веб-браузеры поддерживают фавиконки в формате GIF, PNG или других популярных форматов файлов все версии Internet Explorer по-прежнему требуют значки в виде файлов ICO (формат Microsoft). В этом формате вашу иконку поймет любой браузер.
Фавиконка нужна, чтобы ваш сайт как-то выделялся в общей массе на странице результатов поисковой выдачи и был заметен во множестве открытых вкладках в браузере. Хорошая иконка является как бы логотипом вашего сайта, который будет узнаваем и создающий определенное отношение и вызывающий особый уровень доверия.
Естественно, что фавиконка способна привлечь внимание пользователя и он прочтет заголовок-ссылку на вашу статью. Заголовок, в комбинации с хорошим сниппетом и красивой иконкой, увеличит кликабельность и соответственно посещаемость ресурса.
Сразу же хочу заметить, что к сайтам, имеющим ярлык «ГС» - сама по себе иконка не способна улучшить впечатление от ресурса. Но это как встреча по одежке. Замечательная фавиконка обязательно создаст первое впечатление о сайте, располагающим к посещению.
Вы, конечно можете попытаться найти готовый файл favicon.ico на сайте www.iconfinder.com, но думаю многим хотелось бы сделать что-то свое. Ведь именно фавиконка будет выделять ваш сайт в поисковой выдаче. О том как это сделать вы сейчас знаете. Итак, приступим.
Logaster - это онлайн-сервис для создания логотипов и элементов фирменного стиля. В нем вы в автоматизированном режиме, буквально в несколько кликов, получите иконку для сайта в формате ICO и PNG.
Но учтите, что никакой автоматический генератор логотипов не может заменить творчество человека.
Конечно, крупные компании такими инструментами пользоваться не будут. Они найдут дорогого дизайнера, который создаст для них профессиональный логотип. Но, небольшим фирмам, частным предпринимателям такой инструмент может быть как раз кстати.
Вот что у меня получилось
Теперь можно нажать на кнопочку «Скачать логотип». В бесплатной версии на нем будет водяная надпись Logaster.com
Логотип можно купить. После этого вы сможете скачать в выбранном формате (PNG, JPEG, PDF, SVG) и размере (1024 px, 5000 px).
Теперь переходим непосредственно к созданию фавиконки.
Вот какая получилась фавиконка. В принципе, выглядит неплохо.
Как добавить фавиконку на свой сайт
Дополнительно вы можете приобрести весь комплект фирменного стиля. Вот один из вариантов.
Статья по теме: Как подключить Яндекс.Спеллер к WordPress
Существует огромное количество разных программ для создания фавиконок. В основном они являются примитивными, позволяющими создать иконки, используя при этом 16 цветов.
Создать фавиконку можно прямо в Фотошопе. Для этого понадобится плагин, который можно скачать по адресу www.telegraphics.com.au . Для его установки, скопируйте файл ICOFormat.8bi в директорию c:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats.
С помощью плагина ICOFormat.8bi , вы сможете сохранять картинки в виде «.ico-файлов».
Есть еще онлайн-сервис www.convertico.com . ConvertICO это бесплатный онлайн-конвертер файлов ICO/PNG. Он работает быстро и прост в использовании. Он используется для преобразования значков рабочего стола, иконок приложений, а также фавиконок для веб-сайтов.
* Если у вас не установлен специальный плагин ICO (Windows Icon) Format , можете скачать его с сайта www.telegraphics.com.au/sw/ . Там есть для Маков, Винды 32, 64-разрядных с поддержкой всех версий Photoshop, включая CS6.
Чтобы ваш сайт отображал фавиконку, ее можно просто расположить в корне сайта. Браузер и поисковые системы сами определят, что у вас есть файл favicon.ico и будут ее отображать автоматически. Данный способ является самым простым и он действенен в 95% случаев. Но, можно и явно подключить фавиконку.
Неотъемлемой частью современных веб-сайтов является значок Favicon, позволяющий быстро идентифицировать тот или иной ресурс в списке вкладок браузера. Также сложно представить компьютерную программу без собственного уникального ярлыка. При этом сайты и софт в таком случае объединяет не совсем очевидная деталь — и те и другие используют иконки в формате ICO.
Эти небольшие изображения могут создаваться как благодаря специальным программам, так с помощью и онлайн-сервисов. К слову, именно последние для подобных целей пользуются значительно большей популярностью, и ряд таких ресурсов мы рассмотрим с вами в этой статье.
Работа с графикой — не самая популярная категория веб-сервисов, однако в том, что касается генерации иконок, определенно есть из чего выбирать. По принципу работы такие ресурсы можно разделить на те, в которых вы сами рисуете картинку, и сайты, позволяющие конвертировать уже готовое изображение в ICO. Но в основном все генераторы иконок предлагают и то, и другое.
Этот сервис является наиболее функциональным решением для создания ICO-картинок. Веб-приложение позволяет вам детально прорисовать иконку вручную либо же воспользоваться уже готовым изображением. Главным преимуществом инструмента является возможность экспорта картинки с разрешением вплоть до 64×64.
Так, если нужно создать целый набор однотипных иконок разного размера — ничего лучше, чем X-Icon Editor для этих целей вам не найти.
При необходимости сгенерировать значок favicon с разрешением 16×16 для веб-сайта, отличным инструментом также может служить русскоязычный онлайн-сервис Favicon.ru. Как и в случае с предыдущим решением, здесь вы можете как самостоятельно нарисовать иконку, раскрашивая каждый пиксель отдельно, так и создать favicon из готовой картинки.
Как результат, на вашем ПК сохраняется файл с расширением ICO, представляющий собою картинку размером 16×16 пикселей. Сервис отлично подойдет для тех, кому требуется всего лишь конвертировать изображение в маленькую иконку. Впрочем, и проявлять фантазию в Favicon.ru совсем не запрещается.
Схожий с предыдущим как по названию, так и по принципу работы, но еще более продвинутый генератор иконок. Помимо создания обычных картинок 16×16, сервис позволяет легко нарисовать анимированный favicon.ico для вашего сайта. Кроме того, ресурс содержит тысячи пользовательских иконок, доступных для свободного скачивания.
Если англоязычный интерфейс вас не смущает, то аргументов в пользу работы с предыдущим сервисом нет абсолютно никаких. Помимо того, что Favicon.cc умеет генерировать анимированные иконки, ресурс еще и корректно распознает прозрачность на импортированных изображениях, чего русскоязычный аналог, к сожалению, лишен.
Еще один вариант генератора значков favicon для сайтов. Есть возможность создания иконки с нуля или на основе конкретного изображения. Из отличий можно выделить функцию импорта картинок со сторонних веб-ресурсов и довольно стильный, лаконичный интерфейс.
В целом отличий в работе с уже рассмотренными в этой статье сервисами нет, однако с конвертированием изображений в ICO ресурс Favicon.by справляется значительно лучше, и это вполне легко заметить.
Вполне вероятно, что вам уже известен этот сайт как практически всеядный онлайн-конвертер файлов. Но не всем известно, что это один из лучших инструментов для преобразования любых изображений в ICO. На выходе вы можете получать иконки с разрешением вплоть до 256×256 пикселей.
Как видите, создать иконку ICO при помощи сайта Online-Convert совсем несложно, и делается это буквально за пару кликов мыши.
Здравствуйте, уважаемые читатели блога сайт. Разговор в сегодняшней статье пойдет о так называемых иконках Favicon.ico. Мы разберемся, что такое фавикон, почему в обязательном порядке его нужно устанавливать на своем сайте и как самому создать иконку нужного размера.
В принципе, чтобы создать favicon, вовсе не обязательно использовать какие-либо специальные онлайн генераторы, хотя это довольно удобно и просто. Можно попытаться сделать его в Photoshop, но он по умолчанию, к сожалению, не умеет сохранять изображения в формате ICO. Поэтому для того, чтобы научить Фотошоп работать с ICO, нужно будет установить специальный плагин .
Но если с Фотошопом вы не на дружеской ноге (равно как и с его ), то вам будет гораздо удобнее воспользоваться одним из многочисленных онлайн-сервисов приведенных ниже. При этом в некоторых из них вы сможете полностью с нуля нарисовать новую иконку, а в других сможете переделать уже имеющуюся у вас картинку (которая вас устраивает) в формат фавикона.
Ну, а самый простой вариант — это скачать коллекцию Favicon-ок из какой-нибудь онлайн галереи или каталога. О том, где ими можно будет разжиться, читайте чуть ниже.
Давайте я сначала приведу примеры сервисов (так называемых favicon generator ), где можно не имея особых навыков сконструлить вполне себе достойный мини-логотип для своего сайта, ну, или хотя бы автоматом переделать подходящую картинку в формат, необходимый для загрузки фавикона на сайт.
В центре страницы генератора расположена область, где каждый квадратик является пикселем вашей будущей фавиконки. Ваша задача состоит в закрашивании разными цветами этих квадратиков. Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски поставьте галочку в поле «transparent» и щелкните по квадратику, в результате чего он станет бесцветным (прозрачным).
Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом. Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер. В результате вы получите графический файл, который сможете затем скачать и загрузить на сервер хостинга.
Теперь вы знаете как сделать мини-логотип для своего сайта с нуля. Но если вы графическими талантами не обладаете, то можете на сервис онлайн генератора загрузить любую картинку для будущего фавикона , которая будет служить болванкой. Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image ».
В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 16 на 16 (квадрат). Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon). Во втором случае изображение будущей фавиконки будет искажено по одной из осей.
Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.
На этом онлайн сервисе также имеется возможность использовать коллекции фавиконов, созданные другими его пользователями и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся в галереи экспонаты, вам нужно будет нажать в левой части окна либо на кнопку «Latest Favicons » для просмотра коллекций отсортированных по дате создания, либо на кнопку «Top Rated Favicons » для просмотра галерей отсортированных по рейтингу.
Этот вариант online favicon generator примечателен, пожалуй, только тем, что он отечественный. Поэтому он и попал в эту статью. Итак, для работы с ним вам нужно на главной странице вверху нажать на кнопку «Выберите файл» и указать путь до нужного изображения на вашем компьютере. Загруженное и преобразованное в формат Favicon.ico изображение можно будет подкорректировать, а затем сохранить к себе на компьютер. Все просто и удобно.
Для того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать . После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.
После этого вам только остается нажать на кнопку «Создать». На открывшейся странице вы увидите ссылку для скачивания получившегося фавикона.
Если вам по каким-либо причинам не понравились описанные выше favicon generator, то могу предложить попытать счастье на одном из следующих бесплатных онлайн-сервисов :
Если вам наплевать на эксклюзивность вашего мини-логотипа для сайта, а возиться с редакторами и генераторами влом, то можно будет себе подобрать подходящую иконку на сайтах, где их пруд пруди. Ведь нам, по сути, подойдет абсолютно любая иконка размером 16 на 16 пикселей, которую вы можете скачать из сети или найти в недрах своего компьютера.
Но нужно помнить, что фавикон прежде всего должен привлекать внимание пользователей. В идеале, пользователь должен будет узнавать ваш сайт по одному лишь взгляду на Favicon, поэтому лучше, если он будет уникальный, но можно будет также поискать что-нибудь не заезженное в закромах интернета.
Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего будет попробовать поискать в галереях с коллекциями бесплатных фавиконов :
Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.
Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта . Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки public_htm или htdocs) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы). Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.
Если поставить фавикон таким образом у вас не получилось, то возможно вам придется , т.к. часто бывает, что из кэша загружается старая версия. Можете попробовать , у меня он лучше всего реагирует на проводимые изменения без очистки кэша. Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для favicon , отличное от корневой папки. Как это проверить?
Откройте исходный код любой страницы вашего сайта. Чтобы посмотреть ее исходный код, достаточно будет щелкнуть по странице правой кнопкой мыши и выбрать соответствующий пункт контекстного меню (например, «Исходный код» в старой Opera, либо «Исходный код страницы» в Мазила Фаерфокс, либо «Просмотр кода страницы» в Google Chrome, либо «Просмотр HTML-кода» в IE) или нажать сочетание клавиш Ctrl+U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.
Она может выглядеть примерно так:
Теперь, зная этот путь, вы можете опять подключиться по протоколу FTP и загрузить по указанному пути свою фавиконку, заменив ею уже имеющуюся на сайте. Если никаких изменений в адресной строке браузера опять не произошло, то попробуйте в очередной раз очистить кэш браузера.
В Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). Т.е. для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:
/templates/папка_с_используемым_шаблоном_оформления/favicon.ico
Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):
/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico
В общем, если хотите задать или поменять путь до вашего фавикона , который бы поняли и браузеры, и поисковый робот Яндекса, то вам нужно будет прописать в соответствующем файле шаблона Joomla, WordPress или любого другого движка, между открывающим и закрывающим тегами HEAD , следующие строчки кода:
В каком именно файле шаблона нужно прописать эти строки, зависит от движка вашего сайта. Например, в в WordPress вам нужно открыть на редактирование файл header.php : wp-content/themes/Папка_с_вашей_темой_оформления. Открываете header.php в редакторе и в самом его начале находите открывающий Html тег HEAD. В любом месте за ним, но до закрывающего HEAD прописываете одну из приведенных выше строчек кода с указанием пути до вашего графического файла мини-логотипа.
Как установить анимированный фавикон ? В принципе, точно так же, как и обычный. Будет отличаться только код, вставляемый в шаблон вашего сайта, с помощью которого вы указываете браузерам и поисковому роботу Яндекса путь до нужного графического файла. Дело в том, что анимированный Favicon будет иметь расширение GIF, и, следовательно, в строках кода нужно будет прописать примерно так:
Вот и вся разница между анимированными favicon и обычными. Но следует учесть, что будет работать анимированная иконка только в FireFox, в остальных же браузерах она будет статичной. Яндекс же, при загрузке вашего анимированного фавикона, преобразует его в статичный формат PNG. Но, по-моему, овчинка выделки не стоит — устанавливать вместо обычного мини-логотипа для сайта анимированный не имеет особого смысла. Но это только мое ИМХО.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Онлайн FTP клиент Net2ftp и Google Alerts - полезный сервисы для вебмастеров
Анализ сайта в бесплатных онлайн сервисах Pr-cy, Cy-pr, Be1, Xseo и других
Иконки, значки, фоны, картинки и логотипы для сайта (онлайн-сервисы IconFinder, Freepik, PSDGraphics и другие)
Юзабилити - как сделать свой сайт удобным для посетителей и попытаться их удержать как можно дольше за чтением ваших статей
MegaIndex Tools - набор инструментов для вебмастеров и оптимизаторов
Как проверить кроссбраузерность верстки сайта в Browsershots и настроить отправку пинга при появлении новых материалов
Http - что это такое, как просмотреть заголовки и проверить код ответов сервера, что означают коды 200, 301, 302, 404 и 500
Кросспостинг - что это такое и как его правильно проводить
Как раскрутить сайт самому и бесплатно
Здравствуйте, уважаемые читатели! Сегодняшняя статья посвящена созданию фавикона (favicon.ico) для вашего сайта. Из поста вы узнаете, что такое фавикон, каких размеров бывает эта иконка и почему ее обязательно нужно сделать и установить на свой блог. Кроме того, в статье будут приведены favicon генераторы, позволяющие за пару минут создать фавикон в режиме онлайн, а также сайты, на которых можно скачать галереи и коллекции готовых фавиконок .
Для начала давайте разберемся, что такое Фавикон, зачем она нужна, может, вообще без нее можно обойтись?
Понятие Favicon происходит из двух английских слов Favorites Icon, что можно перевести как иконка (маленькое изображение) для «избранного» . «Избранное» – это название закладок в базовом браузере Internet Exprorer. Они выглядят, например, так в браузере Хром:
Для каждого ресурса существует маленькое изображение, что-то вроде мини- . Согласитесь, что сохранять в закладки удобнее не url-адреса сайтов, а их небольшие логотипы – фавиконы. Кстати, кроме этого favicon отображается в адресной строке браузера сразу перед URL открытой страницы сайта или в заголовке закладки:
Favicon
– это файл небольшого размера (16×16 пикселов), имеющий расширение.ico (это расширение используется операционными системами для хранения иконок). Favicon.ico есть практически у каждого сайта, причем неважно, на каком он хостинге расположен или какой движок/тему использует. Онлайн генераторы и галереи favicon позволяют сделать иконку за пару минут из любого изображения, нарисовать ее с нуля или же скачать готовую, поэтому если вы еще не используете favicon на вашем блоге, то скорее исправляйте ситуацию.
Для чего нужна эта небольшая картинка? Во-первых, это мини-логотип для вашего сайта, ваши посетители будут лучше его запоминать. Поэтому если вы решите ее создать, то постарайтесь сделать так, чтобы фавикона привлекала внимание посетителей и легко запоминалась. А во-вторых, самая популярная в рунете поисковая система Яндекс в своей выдаче рядом с каждым сайтом размещает его favicon, что позволяет выделить ваш ресурс на фоне других, у которых иконки нету. Пользователи охотнее посещают те сайты, рядом с которыми красуется изображение (даже неважно какое), а это значит, что фавикон позволяет .
Кстати, у яндекса даже есть специальный бот, который занимается индексацией не контента на сайте, а только индексацией фавиконок ресурсов. Создав favicon и установив его на сайт, вам нужно будет немного подождать, пока этот самый бот яндекса его не проиндексирует, а этот процесс длится, как правило, от недели до месяца. Проверить, проиндексировал ли яндекс вашу фавикону, можно тремя способами:
Итак, мы уже разобрались, что представляет собой фавикона, так необходимая для сайта. Узнали, что она должна быть размером в пикселях – 16 на 16, а ее расширение должно быть.ico. Теперь есть несколько путей создания favicon.ico:
Преимущество создания favicon с нуля заключается в том, что получившаяся иконка будет уникальна, а уникальность очень важна! Поэтому лучше не полениться и потратить 5-10 минут на создание собственной фавиконы.
Проблем с генерированием иконки возникнуть не должно, т.к. тут итак все понятно.
Еще один неплохой online generator фавиконок. Попасть на него можно по данной ссылке — http://favicon-generator.org/ .
Проблем с этим генератором возникнуть тоже не должно. На скрине переведены функции онлайн фавикон генератора.
Если вы не хотите делать фавикон для вашего сайта с нуля, то можете использовать какое-нибудь изображение, которое и станет основой мини-логотипа. В этом случае вам нужно будет заранее подготовить картинку (желательно квадратную, иначе при создании favicon.ico возможно искажение узора), а затем использовать ее в онлайн сервисе favicon generator. Давайте рассмотрим два самых популярных ресурса.
Онлайн генератор очень прост в использовании, он с легкостью преобразует любое изображение любых размеров в небольшую иконку 16×16 пикселей. Сейчас вы сами убедитесь в простоте работы с этим сервисом.
Добавить изображение можно двумя способами:
После того как файл загрузится, вам останется лишь нажать на кнопку «Создать favicon.ico! » и подождать несколько секунд. Далее вам нужно будет лишь скачать фавикон на компьютер.
Этот онлайн generator мощнее предыдущего, но и сложнее его. Для начала перейдите по ссылке – favicon.cc , а затем нажмите «Import Image» (в левом окне).
Далее нажмите на кнопку «Выберите файл» и загрузите нужную картинку. На основе ее и будет создана фавикона для вашего сайта. При этом вам нужно будет выбрать, что делать с изображением при его уменьшении:
После того как загрузите картинку, вы сможете отредактировать ее в онлайн генераторе или же оставить ее неизменной. Если полученная favicon.ico вас устраивает, то скачивайте ее на компьютер.
Чаще всего фавикон находится в корневой папке сайта, кроме того, это и удобнее, поэтому мы будем рассматривать именно этот вариант. Делается это в два шага.
ПЕРВЫЙ ШАГ . Сначала вам нужно будет найти в теме строчку html-кода, указывающую путь к фавиконе. Для блога на Вордпресс вам нужно найти файл header.php (Заголовок) и найти строчку, она должна выглядеть примерно так (она может немного отличаться в зависимости от темы):
Вам нужно заменить эту строчку на следующие две:
| < link rel= "icon" href= "/favicon.ico" type= "image/x-icon" > |
| < link rel= "shortcut icon" href= "/favicon.ico" type= "image/x-icon" > |
ВАЖНО! Эти строчки должны быть размещены внутри тегов
иВТОРОЙ ШАГ. Теперь вам нужно добавить фавикон в корневую папку сайта. Зайдите на ваш хостинг и поместите в папку с вашим сайтом файл с именем favicon.ico (размером 16×16 пикселей).
Если вы все сделали правильно, то теперь ваш сайт обзавелся собственной фавиконкой.
Фавикон - термин дословно переводится как «любимая иконка» - считается одним из самых сложных элементов современного веб-дизайна. Это небольшое изображение, которое располагается на вкладке браузера, в поисковой строке и других местах, и играет важную роль в персонализации сайта.
Из-за нестандартного формата и небольшого размера создание фавикона может быть сопряжено с трудностями, причем как с технической, так и с дизайнерской точки зрения.
Не менее сложной задачей является обеспечение совместимости фавикона с различными браузерами.
В этой статьи вы узнаете, как сделать фавикон - мы дадим советы по дизайну и расскажем про сервисы для создания фавикона, и как добавить фавикон на сайт.
Несмотря на то, что фавикон – это очень маленький графический объект, он крайне важен в дизайне сайта и в целом.
Кликните , чтобы увеличить картинку.
Во-первых , фавикон делает ваш сайт более персонализированным и выдержанным в едином стиле с другими графическими элементами, такими как логотип.
Во-вторых , фавикон выделяет ваш сайт среди прочих веб-ресурсов в списке поисковой выдачи. Сайт без этой мини-иконки будет блекло смотреться и проигрывать конкурентам. Одним словом, фавикон – это просто “must have” для сайтов.
В-третьих , фавикон позволяет пользователю быстрее находить ваш сайт в каталоге закладок или других иконок на рабочем столе.
Фавикон должен отразить суть и бренда в крошечном знаке размером со смайлик. Хорошим решением станет упрощенный вариант логотипа компании, но учтите: полноценный логотип с текстом и товарными знаками для этой цели не подходит.
Эти веб-сайты используют графический знак своего бренда (или, по крайней мере, что-то похожее на него).
Не используйте текст
Следует отказаться от использования текста, потому что из-за небольшого размера фавикона надписи будут нечитаемыми. Поместите на иконку 1, максимум 2 буквы – например, первые в названии вашей компании или веб-ресурса; в этом случае их еще можно будет различить.
Пикселизация фавикона
Фавиконы настолько маленькие, что в них имеет значение каждый пиксель. Зачастую при уменьшении полноразмерного логотипа изображение получается расплывчатым.
Это фрагмент полноразмерного логотипа Facebook после его уменьшения до размера 32×32. Легко заметить, что по краям изображение «плывет». Чтобы избежать такого дефекта, следует провести редактирование на пиксельном уровне.
При работе с иконками я предпочитают использовать программы для редактирования растровых изображений (например, Photoshop или Pixelmator). Сначала я уменьшаю полноразмерный логотип до размера 64×64 пикселя, поскольку это самый большой фавикон, который мне понадобится. Труд очень кропотливый, может занять целый час, а то и два, но зато результат получается просто отличный.
Если у вас нет времени и навыков в подобных операциях, лучше использовать онлайн сервисы, такие как Logotizer.ru
Получив иконку размером 64×64, я точно так же создаю иконки размером 32×32, 24×24 и 16×16 пикселей. У каждой из них свое предназначение:
– 64×64 – “Список для чтения” в Safari и Windows
– 24×24 – Закрепленные сайты в IE9.
– 32×32 – Для экранов с высоким разрешением.
– 16×16 – Обычно используется в таких браузерах, как IE, Safari, Chrome и т.д.
Но созданием более мелких фавиконов дело не ограничивается: зачастую требуется дополнительное редактирование на пиксельном уровне. Также вы можете добавить альфа-канал, если сочтете нужным. Если ранее это вызывало затруднения, то сейчас практически все браузеры поддерживают прозрачность в фавиконах.
Раньше, когда поддерживались только файлы формата Windows ICO, мы могли сэкономить время, сохранив фавикон размером 16×16 в формате GIF и дав ему расширение.ico. Такой прием работал безотказно! Но теперь в этом методе нет необходимости, поскольку инструменты для создания файлов ICO можно легко найти в Интернете. Более того, сейчас для фавиконов используются и , но самыми распространенными все же являются только следующие два.
ICO
Пальма первенства принадлежит формату ICO. В отличие от файлов PNG, файлы ICO могут иметь разное разрешение и битовую глубину (что отлично подходит для Windows). Браузер Internet Explorer использует фавиконы различных размеров (например, 32-пиксельные иконки для панели задач Windows 7), и поэтому в данном случае формат ICO является единственным вариантом.
Файлы PNG отличаются большим удобством, поскольку для их создания не нужны никакие специальные инструменты. Этот формат поддерживает альфа-канал и позволяет создавать файлы самых маленьких размеров. Пожалуй, единственный недостаток формата PNG заключается в том, что он не поддерживается в браузере Internet Explorer.
Есть и другие варианты:
– Форматы GIF и анимированный GIF не имеют никаких преимуществ, кроме совместимости с очень старыми браузерами.
– Формат JPG использовать не рекомендуется, даже если изображение представлено в виде фотографии. Этому формату недостает четкости PNG, а единственное достоинство заключается в более плавных переходах между цветами – нюанс, который на очень маленьком изображении совершенно незаметен.
– SVG мог бы стать отличным вариантом, если бы больше браузеров поддерживали фавиконы этого формата. Пока же имеется совместимость только с Opera.
– Также существует так называемый “подформат” PNG – APNG (анимированный PNG), который поддерживается в Firefox и Opera. Однако целесообразность его использования остается под вопросом. Анимированный фавикон может отвлекать внимание и даже раздражать пользователя.
Мы выбрали для вас самые полезные сервисы, которые помогут создать фавикон онлайн.
Logotizer
– новый, простой и удобный сервис для создания фавикона и логотипа для вашего сайта.
С помощью этого онлайн-конструктора вы можете создать фавикон с нуля. Сервис ориентирован на новичков, поэтому разработать хороший дизайн не составит труда.
Как создать фавикон с помощью онлайн генератора Logotizer
Основная рабочая область находится слева. Справа вы можете видеть, как фавикон будет смотреться на различных носителях – вкладке браузера, панели задач компьютера или экране смартфона. Очень удобно и наглядно.
Вначале следует выбрать форму для фавикона. Их очень много, больше 50. Мы советуем выбирать простые и незамысловатые формы, чтобы сделать фавикон легким для восприятия и запоминания.
На этом этапе вы также определяете цвет формы, который идет в качестве фона фавиконки, и подбираете рамку. Посмотрите, какой цвет доминирует в вашем логотипе (если он есть), какие цвета являются основными на вашем сайте. Именно в рамках этой гаммы мы советуем создавать дизайн фавикона.
Ниже блока “Форма” расположена коллекция фигур (символов). Их не так много, жаль, что нельзя загружать свои варианты; но выбор все равно достаточно интересный.
Меняйте цвет, размер, расположение фигур! Одним словом, экспериментируйте, благо, сервис позволяет это сделать.
После того как фигура выбрана, можно добавлять свой текст. Как я писал ранее, лучше использовать 1 или 2 буквы, не больше.
Есть обширный выбор шрифтов. Это однозначно плюс. Как и в случае с фигурами, вы можете менять цвет, размер, расположение текста.
Если вы решили, что какой-то слой фавикона вам временно мешает или совсем не нужен, вы можете просто его скрыть.
После создания фавикона сервис предложит сохранить его. Зарегистрируйте аккаунт (в 2017 году без регистрации никак), и после этого вы сможете скачать файлы при небольшой оплате – 199 рублей.
На сайте еще присутствует небольшая инструкция, как добавить фавикон на сайт, поэтому с добавлением фавикона на сайт у вас не должно возникнуть проблем. Ниже в этой статье также приведены подобные рекомендации.
После оплаты пользователь получает сразу 10 фавиконок разных размеров под все необходимые на сегодняшний день устройства (Аpple touch icon, Microsoft Application Icons и другие).
Сам файл favicon.ico является мультиразмерным и содержит в себе иконки 4 размеров в 1 файле (16px, 24px, 32px, 64px). Соответственно, если добавить сайт в закладки браузера или открыть историю – можно будет наблюдать иконки разного размера, но отображаться они будут четко и без размытия.
В целом сервис хороший. Простой, удобный, ничего лишнего.
– это более простой фавикон-генератор, который позволяет создавать фавиконы для любых платформ. Более того, на ресурсе можно протестировать фавикон. Введите URL своего сайта, и вы увидите, как ваш фавикон выглядит в каждом браузере и в каждой операционной системе. Real Favicon Generator также подскажет вам, как исправить недостатки и сделать ваш фавикон еще лучше.
Favicon.by
– еще один бесплатный и простой в использовании генератор фавиконов, который конвертирует файлы PNG, JPG и GIF в формат.ico. Загрузите изображение с вашего компьютера, выберите размер (16x16px или 32x32px) и нажмите на кнопку “Создать”. Чтобы сохранить полученный фавикон на своем сайте, следуйте указаниям.
Также сервис дает возможность нарисовать лого по пикселям, но, если честно, это под силу не каждому. Вот, например, я – не смог. Вот такой я криворукий:)
Добавить фавикон на сайт можно, сделав несколько правок в HTML – коде страницы сайта.
Шаг 1: Загрузите файл “favicon.ico” на свой хостинговый сервер.
Для этого зайдите в свой FTP-сервер по этой ссылке:
ftp://[email protected]
Введите свои имя пользователя и пароль. Их можно получить в панели администратора вашей хостинговой компании.
Загрузите файлы с фавиконами в корневой каталог. Корневой каталог обычно называется “public_html” или “www”.
Шаг 2: Добавьте фавикон в HTML.
Держа окно FTP-сервера открытым, скачайте файл “index.html” или “header.php”.
Затем вам нужно загрузить код. Загружаемый код зависит от вашего веб-сайта.
Если ваш сайт на HTML, найдите область HEAD в файле index.html и вставьте следующий код:
Если ваш сайт на WordPress, найдите область HEAD в файле header.php и вставьте следующий код:
/favicon.ico” />
При помощи этих кодов браузеры смогут найти ваши фавиконы.
Итак, вы установили свой фавикон!
Если ваш ресурс базируется на WordPress или другой CMS, то добавить фавикон на сайт очень просто. В целом алгоритм добавления фавикона для разных платформ будет одинаковым.
1. Вам нужно зайти в консоль сайта.
2. Найти раздел “Дизайн” или “Внешний вид”.
3. Зайти в раздел “Настройки темы” и найти там “Фавикон”.
4. Загрузить фавикон из вашего компьютера.
5. Сохранить и обновить страницу.
В этой статье рассмотрены простые и быстрые способы создания фавиконов, совместимых с практическим любыми браузерами и операционными системами. Но когда дело касается веб-дизайна и разработки, предела совершенству нет. Если вы хотите научиться делать более сложные фавиконы, тач-иконки для главных экранов iOS, иконки для интерфейса Metro в Windows, иконки для Google TV и многое другое, я рекомендую вам ознакомиться с этими материалами: favicon cheat sheet . Там собрана полная информация по теме и приведены хорошие источники. Это отличный вариант для тех дизайнеров и разработчиков (включая меня), кто постоянно стремятся расширять свои знания.
При помощи Favico.js вы можете создавать динамические фавиконы с цифрами.
Также вам может понадобиться динамический фавикон, который имеет значок с изменяющейся цифрой. Для создания таких фавиконов я советую воспользоваться сервисом favico.js
, доступным на Github. Пока динамические фавиконы совместимы не со всеми браузерами. Но для тех браузеров, которые их поддерживают, эти иконки могут стать интересным и полезным дополнением.
Если вы хотите пополнить эту статью еще одним советом или задать вопрос, оставляйте комментарии ниже!
Как создать фавикон для веб-сайта – советы и сервисы обновлено: Февраль 7, 2018 автором: admin
