Favicon.ico: как сделать и установить на сайт

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

Favicon.ico: как сделать и установить на сайт

Начну с определения, вдруг кто не знает, favicon — это иконка, значок сайта (блога) или отдельной веб-страницы, которая отображается в адресной строке браузера, в закладках, в журнале, во вкладках и т.д. Стандартный, минимальный размер иконки 16×16, этот размер необходим для вышеуказанных мест, но есть пользователи, которые сохраняют адреса веб-страниц в виде ярлыков на рабочем столе или где-то в папках, в общем для таких целей предусмотрены размеры 24х24, 32х32, 48х48 и 64х64, все эти размеры включаются в один favicon.ico, но главное помнить, что размер файла от этого увеличивается, имею ввиду байты, что затрудняет загрузку сайта.

Favicon.ico в адресной строке браузера

Favicon на вкладках браузера

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

Favicon в результатах поиска Яндекс

У яндекса для это есть специальный робот, который ищет на сайтах фавикон, мой фавикон находится здесь http://pervushin.com/favicon.yandex.net/favicon/pervushin.com, понимаете да, чтобы проверить свой фавикон, поменяйте адрес сайта на свой. Так вот если Вы сменили иконку, то на яндексе она сразу не появится, ну максимум через месяц.

Создать favicon можно с помощью настольных программ, например Favicon Create или Icon Cool Studio, последняя кстати очень мощная, но лучше использовать онлайн сервисы :).

Favicon генераторы

Favicon.ru

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

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, для создания ярлыков можно включить два дополнительных размера 32х32 и 48х48, также на favicon.ru можно обрезать картинку, в случае если размеры её не пропорциональны.

Favicon.ico на favicon.ru

У меня была готовая картинка 50×50 пикселей, её я и закинул. После сервис показал мне как будет выглядеть иконка, если всё в порядке, то можно её тут же скачать, но мне не понравилось:

Готовая иконка

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

Графический онлайн редактор иконок

Favicon.cc

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

Справа расположилась палитра цветов (оттенков) и несколько инструментов, а именно инструмент прозрачности, пипетка, для определения цвета на холсте и инструмент перетаскивания, которым можно таскать по холсту Ваше что-то там нарисованное :).

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

Графический онлайн редактор favicon.cc

Рисовать иконку в графическом онлайн редакторе? Мазахизм, не мой метод, потому слева от холста в основном меню кликаю на пункт «Import image»:

Импортируем готовое изображение на favicon.cc

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

Конечный результат на favicon.cc

FavIcon from Pics

На очереди FavIcon from Pics, тупой такой, лёгкий до безобразия, ничего лишнего, но на нём я сделал свою фавиконку, которая сейчас стоит на pervushin.com, лучше чем здесь, мне не удалось сделать больше нигде. Самое удивительное, что из картинки которую загружаю (здесь тоже есть такая возможность) на сервис получается такая же шняга, как и у остальных, но этот сервис пошёл дальше, он делает favicon из аватарки твиттера! Кстати, если у кого нет твиттера, рекомендую завести, читаем здесь как, и присоединяемся ко мне :).

Favicon из twitter на FavIcon from Pics

Итак, я указал свой логин в твиттере @pervushin_com и нажал заветную кнопку «Generate Favicon«. Попадаем на следующую страницу с дополнительными настройками. Там всё на английском, но разобраться будет не трудно. Во-первых к своей иконке я добавил анимацию в виде бегущей строки «Sergey Pervushin.com». Далее настроил цвет — зелёный (green). Цвет фона прозрачный (transparent). Здесь же можно добавить иконки для iphone, ipad и т.д., но не переусердствуйте, помните про размер.

Готовая иконка favicon

После всех проделанных необходимых настроек можно забирать свои иконки, почему говорю свои, потому что здесь мы получим их две: favicon.ico и анимированную иконку .gif, анимация будет работать только в firefox и других мозиловских браузерах, а ico соответственно во всех остальных.

Я свой favicon сделал и мне он нравится, но сервисов ещё очень много, вот ссылки на них, посмотрите, может Вам нужно что-то другое:

* http://pervushin.com/www.cy-pr.com/tools/favicon/
* http://pervushin.com/genfavicon.com/
* http://pervushin.com/www.tools.dynamicdrive.com/favicon/
* http://pervushin.com/favicon-generator.org/
* http://pervushin.com/www.faviconfactory.com/
* http://pervushin.com/shaheeilyas.com/favicon/
* http://pervushin.com/www.degraeve.com/favicon/
* http://pervushin.com/michurin.com.ru/favicon-editor.shtml

Скачать готовый Favicon для сайта

Если Вам лень делать иконку, хотя чего уж тут лениться, дело 2-х минут, то можно скачать готовые, ниже несколько адресов, где этих favicon.ico завались:

1. http://pervushin.com/www.audit4web.ru/favicon/ — более 15000 иконок.
2. http://pervushin.com/www.iconj.com/ — более 18000 иконок, кто больше? Есть также и анимированные. Также и генератор favicon есть, причём очень даже не плохой.

Установка Favicon.ico

У меня движок на wordpress, будем исходить из него, но принципиально установка favicon на других движках или html страницах ничем не отличается и проходит она в два этапа: 1. Загрузка файла на сервер; 2. Прописываем специальные теги в движок. Всё на самом деле очень просто.

Все поисковые роботы ищут иконку в корне сайта, т.е. иконка должна, точнее желательно, хоть и не обязательно, находится по адресу, например, http://pervushin.com//favicon.ico. Но для движков, таких как wordpress, в сети много разных тем, вместе с этими темами в комплекте часто идут свои favicon и пути у них прописаны соответственно расположению этого favicon в папках темы, например адрес.ру/шаблоны/тема/изображения/favicon.ico. Вам необходимо либо просто заменить стандартный ico на свой, либо перепрописать пути, я поступаю именно так.

Закинул оба файла в корень pervushin.com, это favicon.ico и animated_favicon.gif и в файле своего шаблона header.php между тегом <head></head> прописал следующее:

<link rel="shortcut icon" href="http://pervushin.com//favicon.ico" >
 </link><link rel="icon" type="image/gif" href="http://pervushin.com//animated_favicon.gif" >
 </link>

Готово! Стильного Вам фавикона и удачной работы!

Snapshot / @pervushin_com в twitter

Сладкое на сегодня: Славная бабулька, с юморцом :).

Комментарии

11 на запись "Favicon.ico: как сделать и установить на сайт"
  1. Кэлин says:

    Отличный пост.. давно хотел себе поставить фавикон.. спасибо аффтар.

  2. Xstroy says:

    Тэг «Link rel=» отлично работает и без закрывающего тэга.

    За возможность добавить анимированный фавикон не знал. Спасибо за инфу.

    • Snapshot says:

      >>Тэг «Link rel=» отлично работает и без закрывающего тэга.
      Да это как сервис выдал, так я его и закинул, но вроде это вопрос валидности, точно не помню, но валидатор ругается по-моему.

  3. Xstroy says:

    Тэг «Link rel=» отлично работает и без закрывающего тэга.

    За возможность добавить анимированный фавикон не знал. Спасибо за инфу.

  4. MMORPG says:

    Спасибо за ссылки на готовые фавиконы, в закладочки добавил, с каждым сайтом нужны 🙂

    P.S. Давно вас читаю и никогда не сохранял бонусы, думал, если понадобятся — знаю где искать, а тут стал проектику наращивать траст, захожу и.. испытываю натуральный шок, когда * вижу. Так обидно! 🙁

    • Snapshot says:

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

  5. Baronuser says:

    Блин! Так долго мучался с этой фигней! Спасибо огромное!

  6. Владимир says:

    В чем дело?

  7. Здравствуйте! Спасибо за полезную инфу, как говорится)) Все доходчиво. Правда, я все сделала, как здесь описано, но фавиконка моя все равно не появилась в строке закладок в браузере(( Боже, ну что я делаю не так!?)))

Спасибо, что оставили свой комментарий

banner