Хочу поделиться своим "секретом", как сделать фавикон для сайта. Расскажу об онлайн-сервисе, которым пользуюсь я. Конечно, таких сервисов на просторах интернета предостаточно, но этот сайт по созданию фавиконов подкупил меня своей простотой, так что других больше и не искал.
Речь идет о сайте . Кстати, .CC — это доменная зона Кокосовых островов, скоро напишу пост о ней, раз уж зашла речь. Ну что ж, давайте сделаем фавикон для сайта.
Делаем фавикон для сайта
Для начала расскажу, что такое фавикон.
[stextbox id="alert" image="null"]Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Традиционно используются изображения размером 16×16 пикселей формата ICO, помещённые в корень сайта под именем favicon.ico[/stextbox]
Попросту говоря, favicon (фавикон) — это картинка определенного размера, которая индивидуально привязана к вашему сайту и показывается вместе с ним в разных местах: в закладках, вкладках браузера и даже в поисковой выдаче Яндекса.
Пренебрегать наличием этого замечательного значка не следует, удачный фавикон моментально выхватывается глазом из десятка других, что может послужить поводом для прохода вашего сайта "в дамки" при прочих равных условиях, то есть на него зайдет посетитель только по одной причине — ему понравилась картинка напротив вашего сайта. Удачный фавикон запоминается, придает сайту черты индивидуальности. В общем, фавикон — штука весьма полезная.
Что касается произношения русского слова фавикон: рунетовцы склоняют его как существительное мужского рода — фавикон, фавикона, фавиконы и так далее.
Делаем фавикон на сайте favicon.cc
Вот скриншот рабочего окна сайта favicon.cc
Слева — меню управления созданием фавикона. Здесь вы можете создать фавикон, загрузить изображение, выбрать готовый или лучший по рейтингу.
В центре — рабочая зона, место, где делается фавикон.
Справа — область инструментов для изготовления фавикона.
Фавикон из готового изображения
Нажимаем на кнопку Импорт изображения (Import Image). Оговорюсь, что у меня браузер Гугл Хром и он автоматом переводит английский текст. После нажатия кнопки выскочит окно загрузки изображения. Такое:
Тут все просто — загружаем картинку с жесткого диска. Кстати, на скриншоте видны форматы картинок, которые подойдут для обработки. Это jpg, jpeg, gif, png, bmp, ico, cur.
Для примера я загрузил свою фотку с аватара.
В процессе работы вы можете сразу видеть результат. Во-первых, вверху, в закладке браузера.
Во-вторых, чуть ниже рабочей области, в окне Предварительный просмотр.
Для того, чтобы сохранить готовый фавикон, надо в окне Preview (Предварительный просмотр) нажать кнопку Download Favicon (Скачать Favicon) и сохранить его на компьютере. (См. скриншот выше)
Рисование фавикона
Вы также можете нарисовать фавикон сами. Для этого служит рабочая область в центре экрана. Она представляет из себя квадрат со сторонами по 16 пикселей. Каждому пикселю, с помощью инструментов справа, вы можете задать свой цвет, прозрачность. Выбираете цвет и щелкаете левой кнопкой мыши на пикселе, выбираете ластик и таким же образом удаляете цвет. Интуитивно простой интерфейс, разобраться в нем — минутное дело.
В результате некоторых усилий вы получите какую-то картинку в рабочей области. Тут уже каждый творит в меру своих способностей. У некоторых получаются просто шедевры. Для примера, на скрине показана "нетленка", которую я по-быстрому сваял для своего сайта. Увы, с рисованием не очень дружу. Но вроде, как что-то оригинальное получилось. Результат вы можете увидеть в браузере.
Закончив работу, вы сохраняете готовый фавикон также, как и в первом случае. На выходе у вас получится файл favicon.ico. Именно в таком формате сервис favicon.cc сохраняет готовые файлы и именно в таком формате требуется установка фавикона на сайт для корректного отображения браузерами.
Итак, сегодня рассмотрена тема как сделать фавикон для сайта. Как его установить на сайт, расскажу в другом уроке. Удачи!
My copyright info Хостиндо 2011
Наглядно и актуально! Спасибо!
Вы так доступно пишете статьи, что любой новичек сможет это сделать.
Сам недавно был новичком, знаю что поначалу ничего не понятно. Зато потом кажется, что за ерунда, это ж раз плюнуть.
Отличная подробная инструкция
Вы знаете, Владимир, я самостоятельно натыкалась на это сервис. Но тогда его просто «не заметила». А вот вы сейчас так хорошо все описали, что сразу его в закладки. И вашу статью по работе с ним )))
Давно хотел поправить свой фавикон. Сделал, все просто. Спасибо, Владимир за простое и наглядное описание как сделать фавикон. Фавикон очень важная штука для посещаемости сайта, раньше я не понимал этого.
Вижу. Отличный фавикон у вас получился
Владимир! Отлично всё рассказали! Так просто и доступно. Теперь задумалась: а может поменять , придумать что-то новенькое? Нужно попробовать.С уважением, Ирина.
Спасибо за полезную информацию.
Интересно! А я себе в фотошопе просто картинку ужала, теперь понимаю, почему она не во всех браузерах отображается — из-за расширения.
Тут дело вот в чем — фавикон может быть сделан в разных форматах: ico, png, jpeg, gif, svg.
Но они по-разному будут отображаться разными браузерами. То есть не все браузеры понимают все форматы.
Особенно капризен IE. Opera наоборот видит все форматы.
И только один формат — ico — понимают все браузеры.
А я вот сначала подготавливаю файл в фотошопе и только потом пользуюсь прикладными программами для создания иконок. Материал изложенный в статье хороший и понятен для всех пользователей.
Актуально для меня. Спасибо.
Очень полезный инструктивный материал. Оказывается сделать фавикон красивым так просто. Спасибо автору!
Нарисовать просто. Сохранить — никак. Даже после регистрации.
Юрий, я не понял, где не получается сохранить. Если на сервисе favicon.cc, то этого не может быть — только что зашел, проверил -все работает. Кнопка Download Favicon — и картинка сохраняется в загрузках под именем favicon.ico
Если на сайте, то, возможно, причина в том, что кэш браузера не удаляется сразу. Кстати, у вас на блоге установлен фавикон — две зеркальных буквы Ю — это из старых запасов?
Нет, это заставочка с Вашей подачи, только испечённая, спасибо! Немного помаялся с определением пути к файлу, он у меня пролегает через wp-content/uploads. А то мне подсказывали public_html, что ли? Ну, да ладно. Спасибо ещё раз!
В основном в WordPress favicon.ico лежит в корневой папке, которая и есть public_html. Но в некоторых шаблонах свое место прописано. На таких блогах можно прописать следующий код между тегами
Обычно, в вордпрессе эти теги находятся в файле header.php
Я и не знала, что есть такой простой способ. Все в фотошопе делаю)))
В моей теме был готовый фавикон, но он невзрачный такой, приготовила другой, взяла из картинки красивое море, но не получилось у меня, а сейчас прочитала хорошую подробную статью и попробую ещё раз.
Я свой фавикон в фотошопе делала, потом онлайн-сервисом воспользовалась, чтобы его в нужный формат перевести.