Как создать и как установить фавикон Favicon.ico на сайте

Как создать и как установить фавикон Favicon.ico на сайтеПриветствую всех читателей! Сегодня мы выясним, что такое favicon и зачем он нужен сайту. Favicon с английского переводится, как — «иконка избранного». Когда вы заходите в браузере на любой сайт, то рядом с url вы можете видеть маленькую картинку, можно ее наблюдать рядом с закладкой. Также вы можете ее видеть в различных табах программ и самое главное в результатах выдачи запроса Яндекса и Google. Одним словом эта картинка позволяет выбрать сайт из множества других, а также украшает сайт.

Давайте разберемся по-подробнее что именно представляет собой Favicon.ico и как создать иконку для сайта. Во-первых, это картинка, которая может быть как статистической ( просто неподвижное изображение) или анимационной ( картинка с действиями, например крутится). Favicon имеет размеры 16 х 16 пикселей и не больше. Если размер иконки будет больше, то он может не отображаться в различных местах и что хуже в Яндексе.

Как сделать favicon.ico? Все очень просто. Здесь можно пойти двумя путями: использовать программы или интернет сервисы. Давайте рассмотрим оба варианта.

Создание Favicon.ico в различных программах

Icon Empire — наиболее навороченная программа. Она может создавать различные иконки не только для WEB, но и на Windows. Программа может делать, как анимированные, так и обычные картинки с глубиной цвета до 32 бит. За основу можно взять любую картинку.

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

Favicon Create — могу сказать, что очень простая по-моему мнению программка. Для создания иконки вам понадобится готовая картинка в формате *.jpg, *.jpeg, или *.bmp. Устанавливаем программу, выбираем картинку, выбираем размер и глубину цвета, нажимаем кнопку старт. Все готово.

Онлайн сервисы для создания иконок

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

www.favicon.ru — как раз на нем-то я и делал себе иконку. Отличный русский сервис для создания иконок. Позволяет создавать favicon из картинки, загрузив ее на сайт.

www.favicon.by — тоже сервис на русском языке для создания иконок.

htmlkit.com тоже на русском.

tools.dynamicdrive.com — этот сервис на английском.

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

Вот и остался последний шаг, иконка у нас готова надо бы опробывать ее на сайте. Для этого надо сделать несколько вещей:

  1. Переименовать полученную иконку в favicon.ico
  2. Загрузить полученный файл к себе на сервер ( например с помощью filezilla) в корневую папку ( обычно это public_html )
  3. Добавить код между тэгами <head></head>:

[stextbox id=»info» mode=»css»]Если у вас joomla, то устанавливаем код в index.php вашей установленной темы. Темы находятся в папке templates.
Если у вас сайт на платформе wordpress то переходим в Внешний вид — редактор — header.php.[/stextbox]

[stextbox id=»grey»]Код для вставки между тэгами <head></head>

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>[/stextbox]

Где скачать Favicon.ico, коллекции фавикон

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

Если жевы плохо рисуете и не обладаете возможностями создать favicon для сайта, то в сети существует множество коллекций favicon.ico. Галереи иконок для сайта:

» www.audit4web.ru/info/favicon — большая коллекция иконок для сайта

» www.iconj.com/gallery.php — кроме галереи иконок присутствует редактор для создания иконки для сайта

» www.favicon.cc — есть возможность просматривать недавно созданные иконки пользователями, а также создать самому

Как создать установить анимированный favicon.ico на WordPress

Установка анимированной иконки на сайт ничем не отличается от обычной. Разве что, совсем небольшое отличие в коде: анимированный favicon будет иметь разширение GIF, а следовательно надо изменить код так:

<link rel=»shortcut icon» href=»/img/ favicon .gif» type=»image/gif» >
<link rel=»icon» href=»/img/ favicon .gif» type=»image/gif» >

Стоит знать, что в выдаче Яндекса иконка будет иметь статистичный формат -> она будет преобразована из анимированной в обычную в формат PNG.

Ну вот и все, вся работа закончена. Если вы не видите сразу иконки на своем сайте, то следует дождаться, когда на сервисе обновятся все файлы. И также подождать 2-3 дня до следующего обновления в Яндекс, чтобы увидеть иконку на вашем сайте в выдаче. На этом все, пока!

 


Похожие записи:

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

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

Похожие записи: